diff --git a/200.html b/200.html index 43e51b4cbd..ded9c1f793 100644 --- a/200.html +++ b/200.html @@ -22,5 +22,5 @@ 100% { stroke-dashoffset: -128; } -} +} \ No newline at end of file diff --git a/404.html b/404.html index 43e51b4cbd..ded9c1f793 100644 --- a/404.html +++ b/404.html @@ -22,5 +22,5 @@ 100% { stroke-dashoffset: -128; } -} +} \ No newline at end of file diff --git a/api/_content/cache.1710803607354.json b/api/_content/cache.1710889884934.json similarity index 99% rename from api/_content/cache.1710803607354.json rename to api/_content/cache.1710889884934.json index ec2d5495f9..5a0e080618 100644 --- a/api/_content/cache.1710803607354.json +++ b/api/_content/cache.1710889884934.json @@ -1 +1 @@ -{"generatedAt":1710803638583,"generateTime":5193,"contents":[{"_path":"/","_dir":"","_draft":false,"_partial":false,"_locale":"","_empty":true,"title":"Ripple Design System","description":"Ripple is the design system for Victorian government digital products","icon":"carbon:home","layout":"home","primaryCTA":{"title":"For Designers","description":"Information for designers using Ripple to create brand Victoria compliant digital experiences.","image":{"src":"/assets/img/for-designers.png"},"url":"/design-system/design/getting-started"},"secondaryCTA":{"title":"For Developers","description":"How to get started implementing Ripple UI components in digital products.","image":{"src":"/assets/img/for-developers.png"},"url":"/design-system/develop/getting-started"},"modulesCTA":{"title":"Modules","description":"Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","url":"/framework"},"quickLink1":{"title":"About Ripple","description":"Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.","url":"/design-system/about/what-is-ripple"},"quickLink2":{"title":"Who should use it","description":"Ripple is built by government for government to deliver services Victorians trust and rely on.","url":"/design-system/about/whos-it-for"},"quickLink3":{"title":"Design principles","description":"The guiding principles that are the foundation of the Ripple Design System.","url":"/design-system/design/our-design-principles"},"framework":{"title":"Ripple framework","description":"Ripple framework contains the tools for building SDP sites using Ripple design system components.","url":"/framework"},"body":{"type":"root","children":[],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:1.index.md","_source":"content","_file":"1.index.md","_extension":"md"},{"_path":"/design-system/_markdown-reference-file","_dir":"design-system","_draft":false,"_partial":true,"_locale":"","_empty":false,"title":"Markdown Kitchen Sink (DEV ONLY)","description":"This is an example page to demonstrate and document the markdown features available in the docs site","draft":true,"layout":"page","links":[{"text":"Vic gov","url":"https://www.vic.gov.au/"},{"text":"Single Digital Presence","url":"https://www.vic.gov.au/single-digital-presence"}],"body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a more detailed markdown editing guide, see here "},{"type":"element","tag":"a","props":{"href":"https://www.markdownguide.org/basic-syntax/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.markdownguide.org/basic-syntax/"}]}]}]},{"type":"element","tag":"h2","props":{"id":"front-matter"},"children":[{"type":"text","value":"Front matter"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Front matter sits at the very top of a markdown file and contains metadata about a page. In our case, it contains things like the page title and description."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is the frontmatter for the page you are currently reading."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"---\ntitle: Kitchen sink\ndescription: Here's everything\nlayout: page\nlinks:\n - text: Vic gov\n url: https://www.vic.gov.au/\n - text: Single Digital Presence\n url: https://www.vic.gov.au/single-digital-presence\n---\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Kitchen sink\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Here's everything\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"layout"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"page\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"links"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Vic gov\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"https://www.vic.gov.au/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Single Digital Presence\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"headings"},"children":[{"type":"text","value":"Headings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headings are added using hash marks before text. The number of hash marks specifies the heading level (e.g. '##' = H2). Please don't use H1s in markdown, these are reserved for the page title, which is set in the front matter."}]},{"type":"element","tag":"h3","props":{"id":"example"},"children":[{"type":"text","value":"Example"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"## Heading level 2\n\n### Heading level 3\n\n#### Heading level 4\n\n##### Heading level 5\n\n###### Heading level 6\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"## Heading level 2\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"### Heading level 3\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"#### Heading level 4\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"##### Heading level 5\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"###### Heading level 6"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"heading-level-2"},"children":[{"type":"text","value":"Heading level 2"}]},{"type":"element","tag":"h3","props":{"id":"heading-level-3"},"children":[{"type":"text","value":"Heading level 3"}]},{"type":"element","tag":"h4","props":{"id":"heading-level-4"},"children":[{"type":"text","value":"Heading level 4"}]},{"type":"element","tag":"h5","props":{"id":"heading-level-5"},"children":[{"type":"text","value":"Heading level 5"}]},{"type":"element","tag":"h6","props":{"id":"heading-level-6"},"children":[{"type":"text","value":"Heading level 6"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"paragraph-text"},"children":[{"type":"text","value":"Paragraph text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Paragraphs are simply text seperated by an empty line."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"This is a paragraph\n\nThis is another paragraph\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"This is a paragraph\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"This is another paragraph"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a paragraph"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is another paragraph"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"emphasis"},"children":[{"type":"text","value":"Emphasis"}]},{"type":"element","tag":"h3","props":{"id":"italics"},"children":[{"type":"text","value":"Italics"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Here is *italic text*\n\nHere is also _italic text_\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"class":"ct-996367"},"children":[{"type":"text","value":"*italic text*\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is also "}]},{"type":"element","tag":"span","props":{"class":"ct-996367"},"children":[{"type":"text","value":"_italic text_"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"italic text"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is also "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"italic text"}]}]},{"type":"element","tag":"h3","props":{"id":"bold"},"children":[{"type":"text","value":"Bold"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Here is **bold text**\n\nHere is also __bold text__\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"class":"ct-996366"},"children":[{"type":"text","value":"**bold text**\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is also "}]},{"type":"element","tag":"span","props":{"class":"ct-996366"},"children":[{"type":"text","value":"__bold text__"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"bold text"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is also "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"bold text"}]}]},{"type":"element","tag":"h3","props":{"id":"strikethrough"},"children":[{"type":"text","value":"Strikethrough"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Here is ~~strikethrough text~~\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"~~strikethrough text~~"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"del","props":{},"children":[{"type":"text","value":"strikethrough text"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"horizontal-rules"},"children":[{"type":"text","value":"Horizontal Rules"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add a horizontal rule by using at least three of either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"_"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"These are all equivalent:\n---\n___\n***\n\nSo are these:\n------\n______\n******\n\nBut these won't work:\n--\n__\n**\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"These are all equivalent:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"___\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"***\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"So are these:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"------\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"______\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"******\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"But these won't work:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"--\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"__\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"**"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"blockquotes"},"children":[{"type":"text","value":"Blockquotes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Blockquotes are added with a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":">"}]},{"type":"text","value":" before the text."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"lists"},"children":[{"type":"text","value":"Lists"}]},{"type":"element","tag":"h3","props":{"id":"unordered"},"children":[{"type":"text","value":"Unordered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unordered lists are created by starting a line with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"+"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-"}]},{"type":"text","value":", or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*"}]},{"type":"text","value":". Nested lists can be achieved through indentation, with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"2 spaces"}]},{"type":"text","value":" for each additional level."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"* Fruit\n * Berries\n - Strawberry\n - Blueberry\n * Classics\n - Apple\n - Banana\n* Vegetables\n + Broccoli\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Fruit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Berries\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Strawberry\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Blueberry\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Classics\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Apple\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Banana\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Vegetables\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Broccoli"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fruit"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Berries"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Strawberry"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Blueberry"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Classics"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Apple"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Banana"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Vegetables"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Broccoli"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"ordered"},"children":[{"type":"text","value":"Ordered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ordered lists are created by starting a line with a number and period (e.g. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1."}]},{"type":"text","value":"). Nested lists can be achieved through indentation, with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"4 spaces"}]},{"type":"text","value":" (different to the unordered list) for each additional level."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use any numbers, but it's more convenient to just use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1."}]},{"type":"text","value":" for each item, the numbering will work automatically."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"This works:\n\n1. Lorem ipsum dolor sit amet\n 1. Lorem at massa\n 2. Adipiscing\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\nBut just do this, it's the same thing:\n\n1. Lorem ipsum dolor sit amet\n 1. Lorem at massa\n 1. Adipiscing\n1. Consectetur adipiscing elit\n1. Integer molestie lorem at massa\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"This works:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Lorem ipsum dolor sit amet\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"2."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Adipiscing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"2."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Consectetur adipiscing elit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"3."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Integer molestie lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"But just do this, it's the same thing:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Lorem ipsum dolor sit amet\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Adipiscing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Consectetur adipiscing elit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Integer molestie lorem at massa"}]}]}]}]}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lorem ipsum dolor sit amet"},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lorem at massa"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Adipiscing"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Consectetur adipiscing elit"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Integer molestie lorem at massa"}]}]},{"type":"element","tag":"h4","props":{"id":"starting-point"},"children":[{"type":"text","value":"Starting point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can start the list at any number like this:"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"64. foo\n1. bar\n1. blah\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"64."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" foo\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" bar\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" blah"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":64},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"blah"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"links"},"children":[{"type":"text","value":"Links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hyperlinks can be added with the following syntax, the link text goes in the square brackets, followed by the url in round brackets."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Visit the [Victorian government website](https://www.vic.gov.au/)\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Visit the ["}]},{"type":"element","tag":"span","props":{"class":"ct-165920"},"children":[{"type":"text","value":"Victorian government website"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"](https://www.vic.gov.au/)"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/","rel":["nofollow"]},"children":[{"type":"text","value":"Victorian government website"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alternatively, if you don't need different link text you can just write the url directly"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Here is the link to vic gov https://www.vic.gov.au/.\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is the link to vic gov https://www.vic.gov.au/."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is the link to vic gov "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"code"},"children":[{"type":"text","value":"Code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"code inline"}]},{"type":"text","value":" in context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's some "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"codeInline"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'highlighted code inline'"}]}]},{"type":"text","value":" in context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Indented code"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"// Some comments\nline 1 of code\nline 2 of code\nline 3 of code\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"// Some comments\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"line 1 of code\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"line 2 of code\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"line 3 of code"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Block code \"fences\""}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"Sample text here...\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Sample text here..."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax highlighting"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"var foo = function (bar) {\n return bar++;\n};\n\nconsole.log(foo(5));\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" bar"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"};\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"));"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"tables"},"children":[{"type":"text","value":"Tables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tables can be added using a special format. More info here:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables","rel":["nofollow"]},"children":[{"type":"text","value":"Github markdown tables guide"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An example of a simple table"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"| Name | Description |\n| ------ | ---------------------------- |\n| Banana | Yellow, elongated, edible. |\n| Apple | 84% water, 15% carbohydrates |\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"| Name | Description |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"| ------ | ---------------------------- |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"| Banana | Yellow, elongated, edible. |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"| Apple | 84% water, 15% carbohydrates |"}]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Description"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Banana"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Yellow, elongated, edible."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Apple"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"84% water, 15% carbohydrates"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"images"},"children":[{"type":"text","value":"Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images can be added like this:"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"![Nils Olav - This is the alt text](/assets/img/temp/Nils_Olav_wide.jpg)\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"!["}]},{"type":"element","tag":"span","props":{"class":"ct-165920"},"children":[{"type":"text","value":"Nils Olav - This is the alt text"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"class":"ct-996364"},"children":[{"type":"text","value":"/assets/img/temp/Nils_Olav_wide.jpg"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Nils Olav - This is the alt text","src":"/assets/img/temp/Nils_Olav_wide.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By Lee Carson on Flickr - Nils Olav on Flickr, CC BY-SA 2.0, "},{"type":"element","tag":"a","props":{"href":"https://commons.wikimedia.org/w/index.php?curid=5080064","rel":["nofollow"]},"children":[{"type":"text","value":"https://commons.wikimedia.org/w/index.php?curid=5080064"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"custom-components"},"children":[{"type":"text","value":"Custom components"}]},{"type":"element","tag":"h3","props":{"id":"docsexample"},"children":[{"type":"text","value":"DocsExample"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsExample"}]},{"type":"text","value":" will display an component example from storybook, you will need to give it the id of the story you want to display."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are additional options you can use for this component:"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\nwithPadding: false\nhideNewTab: false\nhideCode: true\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"withPadding"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"hideNewTab"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"hideCode"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled",":hideCode":"true",":hideNewTab":"false",":withPadding":"true"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add toggle values in storybook and copy the the value of the args parameter in the URL to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"argsString"}]},{"type":"text","value":" option in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsExample"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Storybook controls","src":"/assets/img/temp/storybook-toggles.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Browser url bar","src":"/assets/img/temp/url-args.png"},"children":[]}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsExample\n---\nid: core-navigation-pagination--complex\nargsString: 'totalPages:50;currentPage:30;showTally:true'\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-pagination--complex\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"argsString"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'totalPages:50;currentPage:30;showTally:true'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex","argsString":"totalPages:50;currentPage:30;showTally:true"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also the theme and whether or not neutral buttons should be used."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\ntheme: 'light'\n---\n::\n\n::DocsExample\n---\nid: core-navigation-card--call-to-action\nuseNeutralButtons: true\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'light'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-card--call-to-action\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"useNeutralButtons"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled","theme":"docsTheme3"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action",":useNeutralButtons":"true"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsthemechooser"},"children":[{"type":"text","value":"DocsThemeChooser"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can wrap "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsExample"}]},{"type":"text","value":" components with a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsThemeChooser"}]},{"type":"text","value":" component. This will allow the user to choose which theme the examples inside the theme chooser will display with."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsThemeChooser\n ::DocsExample\n ---\n id: core-navigation-button--default-filled\n ---\n ::\n ::DocsExample\n ---\n id: core-navigation-button--default-outlined\n ---\n ::\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsThemeChooser\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-outlined\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"docsimageexample"},"children":[{"type":"text","value":"DocsImageExample"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsImageExample"}]},{"type":"text","value":" will display an image in a way this is visually similar to the component examples, you will need to give it the url (src) of the image, the alt text (alt) and an optional caption."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsImageExample\n---\nsrc: /assets/img/InlineLink-Focus.png\nalt: An example of focus state colour contrast\n---\nHere's the **rich** text `caption`\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsImageExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"/assets/img/InlineLink-Focus.png\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"alt"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"An example of focus state colour contrast\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here's the "}]},{"type":"element","tag":"span","props":{"class":"ct-996366"},"children":[{"type":"text","value":"**rich**"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" text "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"`caption`\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/InlineLink-Focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" text "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"caption"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example without caption:"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsImageExample\n---\nsrc: /assets/img/InlineLink-Focus.png\nalt: An example of focus state colour contrast\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsImageExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"/assets/img/InlineLink-Focus.png\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"alt"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"An example of focus state colour contrast\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/InlineLink-Focus.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docscard-docscardgrid"},"children":[{"type":"text","value":"DocsCard && DocsCardGrid"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards can also be added. Ensure that you wrap them with DocsCardGrid so that they are layout out correctly. DocsCard use the 'promo' type card under the hood."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsCardGrid\n ::DocsCard\n ---\n title: Button\n url: /design-system/components/button\n ---\n Here's the summary text\n ::\n\n ::DocsCard\n ---\n title: Vic gov\n url: https://www.vic.gov.au/\n ---\n Here's the summary text\n ::\n\n ::DocsCard\n ---\n title: Code standards\n url: /framework/code-standards\n ---\n Here's the summary text\n ::\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsCardGrid\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Button\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"/design-system/components/button\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Vic gov\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"https://www.vic.gov.au/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Code standards\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"/framework/code-standards\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-card-grid","props":{},"children":[{"type":"element","tag":"docs-card","props":{"title":"Button","url":"/design-system/components/button"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]},{"type":"element","tag":"docs-card","props":{"title":"Vic gov","url":"https://www.vic.gov.au/"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]},{"type":"element","tag":"docs-card","props":{"title":"Code standards","url":"/framework/code-standards"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]}]},{"type":"element","tag":"h3","props":{"id":"docscolourtable"},"children":[{"type":"text","value":"DocsColourTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsColourTable"}]},{"type":"text","value":" will display a table of themed colours, you just need to specify which colours to show.\nThis can be either direct colours like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clr.type.primary.contrast"}]},{"type":"text","value":", colour groups like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clr.type.primary"}]},{"type":"text","value":" or a mix of both."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"\n::DocsColourTable\n---\ncolours:\n - clr.primary\n - clr.link\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsColourTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"colours"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"clr.primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"clr.link\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.primary\",\"clr.link\"]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsgradienttable"},"children":[{"type":"text","value":"DocsGradientTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsGradientTable"}]},{"type":"text","value":" will display the themed horizontal and vertical gradients."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsGradientTable\n:::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsGradientTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":::"}]}]}]}]}]},{"type":"element","tag":"docs-gradient-table","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsicontable"},"children":[{"type":"text","value":"DocsIconTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsIconsTable"}]},{"type":"text","value":" will display a table of icons, you just need to specify which icon group to show, this will be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alert"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"social"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsIconTable\n---\ngroup: alert\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsIconTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"group"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"alert\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-icon-table","props":{"group":"alert"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsiconsizingtable"},"children":[{"type":"text","value":"DocsIconSizingTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsIconSizingTable"}]},{"type":"text","value":" will display a table of icons with a preview of the icon at the specified size."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsIconSizingTable\n---\nsizes:\n- s : 16px\n- m : 24px\n- l : 32px\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsIconSizingTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"s"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" : "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"16px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"m"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" : "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"24px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"l"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" : "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"32px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-icon-sizing-table","props":{":sizes":"[{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docslayerstyletable"},"children":[{"type":"text","value":"DocsLayerStyleTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsLayerStyleTable"}]},{"type":"text","value":" will display a table of layer styles with a preview of that style in action, you just need to specify the type of style to show, this will be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"border"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"border.radius"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"elevation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsLayerStyleTable\n---\ntype: border.radius\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsLayerStyleTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"border.radius\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border.radius"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docstypetable"},"children":[{"type":"text","value":"DocsTypeTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsTypeTable"}]},{"type":"text","value":" will display a table of type styles, you just need to specify the type of type style to show. This will be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"weight"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"size"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lh"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ls"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsTypeTable\n---\ntype: size\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsTypeTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"size\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-type-table","props":{"type":"size"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docstypeclasstable"},"children":[{"type":"text","value":"DocsTypeClassTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsTypeClassTable"}]},{"type":"text","value":" will display a table of type styles, with a preview of that style in action."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsTypeClassTable\n---\ntype:\n- style :\n - Heading 1\n - values :\n - Font size: 32px / 56px\n - Line height: 36px / 60px\n - Letter spacing: 1.4% / 0.8%\n - Font weight: Bold (700)\n - rpl-type-h1\n- style :\n - Heading 1 Highlight\n - values :\n - Font size: 32px / 56px\n - Line height: 36px / 60px\n - Letter spacing: 1.4% / 0.8%\n - Font weight: Bold (700)\n - rpl-type-h1-highlight\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsTypeClassTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Heading 1\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"values"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Font size"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"32px / 56px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Line height"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"36px / 60px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Letter spacing"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"1.4% / 0.8%\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Font weight"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Bold (700)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"rpl-type-h1\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Heading 1 Highlight\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"values"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Font size"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"32px / 56px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Line height"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"36px / 60px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Letter spacing"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"1.4% / 0.8%\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Font weight"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Bold (700)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"rpl-type-h1-highlight\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]}]"},"children":[]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-996368{color:#24292F;}\n.ct-872567{color:#116329;}\n.ct-165924{color:#0A3069;}\n.ct-109547{color:#0550AE;font-weight:bold;}\n.ct-996367{color:#24292F;font-style:italic;}\n.ct-996366{color:#24292F;font-weight:bold;}\n.ct-082380{color:#953800;}\n.ct-165920{color:#0A3069;text-decoration:bold;}\n.ct-186825{color:#CF222E;}\n.ct-319862{color:#8250DF;}\n.ct-109545{color:#0550AE;}\n.ct-996364{color:#24292F;text-decoration:bold;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"front-matter","depth":2,"text":"Front matter"},{"id":"headings","depth":2,"text":"Headings","children":[{"id":"example","depth":3,"text":"Example"}]},{"id":"heading-level-2","depth":2,"text":"Heading level 2","children":[{"id":"heading-level-3","depth":3,"text":"Heading level 3"}]},{"id":"paragraph-text","depth":2,"text":"Paragraph text"},{"id":"emphasis","depth":2,"text":"Emphasis","children":[{"id":"italics","depth":3,"text":"Italics"},{"id":"bold","depth":3,"text":"Bold"},{"id":"strikethrough","depth":3,"text":"Strikethrough"}]},{"id":"horizontal-rules","depth":2,"text":"Horizontal Rules"},{"id":"blockquotes","depth":2,"text":"Blockquotes"},{"id":"lists","depth":2,"text":"Lists","children":[{"id":"unordered","depth":3,"text":"Unordered"},{"id":"ordered","depth":3,"text":"Ordered"}]},{"id":"links","depth":2,"text":"Links"},{"id":"code","depth":2,"text":"Code"},{"id":"tables","depth":2,"text":"Tables"},{"id":"images","depth":2,"text":"Images"},{"id":"custom-components","depth":2,"text":"Custom components","children":[{"id":"docsexample","depth":3,"text":"DocsExample"},{"id":"docsthemechooser","depth":3,"text":"DocsThemeChooser"},{"id":"docsimageexample","depth":3,"text":"DocsImageExample"},{"id":"docscard-docscardgrid","depth":3,"text":"DocsCard && DocsCardGrid"},{"id":"docscolourtable","depth":3,"text":"DocsColourTable"},{"id":"docsgradienttable","depth":3,"text":"DocsGradientTable"},{"id":"docsicontable","depth":3,"text":"DocsIconTable"},{"id":"docsiconsizingtable","depth":3,"text":"DocsIconSizingTable"},{"id":"docslayerstyletable","depth":3,"text":"DocsLayerStyleTable"},{"id":"docstypetable","depth":3,"text":"DocsTypeTable"},{"id":"docstypeclasstable","depth":3,"text":"DocsTypeClassTable"}]}]}},"_type":"markdown","_id":"content:design-system:_markdown-reference-file.md","_source":"content","_file":"design-system/_markdown-reference-file.md","_extension":"md"},{"_path":"/design-system/about/_5.accessibility-statement","_dir":"about","_draft":false,"_partial":true,"_locale":"","_empty":false,"title":"Accessibility statement","description":"Page description","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"content-goes-here"},"children":[{"type":"text","value":"Content goes here"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"content-goes-here","depth":2,"text":"Content goes here"}]}},"_type":"markdown","_id":"content:design-system:1.about:_5.accessibility-statement.md","_source":"content","_file":"design-system/1.about/_5.accessibility-statement.md","_extension":"md"},{"_path":"/design-system/about/what-is-ripple","_dir":"about","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"What is Ripple?","description":"Ripple is the digital design system of the Victorian government","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes it easier for citizens to "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"find"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"understand"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" government information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes creating Brand Victoria approved content, assets and sites easy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"increases delivery speed for digital products and services."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Over 50 government websites use Ripple, including our main "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"vic.gov.au"}]},{"type":"text","value":" platform. These sites attract millions of views per month."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au","class":"docs-center-img","src":"/assets/img/sites.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"why-use-ripple"},"children":[{"type":"text","value":"Why use Ripple?"}]},{"type":"element","tag":"h3","props":{"id":"ripple-solves-the-hard-problems-so-you-dont-have-to"},"children":[{"type":"text","value":"Ripple solves the hard problems so you don’t have to"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We spent the past 5 years refining Ripple based on user feedback to ensure it:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"meets the publishing needs of government users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes it easier for citizens to interact with government services."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple users can be confident their site’s design and development is based on industry standards and best practices for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accessibility"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"SEO"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"security"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"performance."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can easily navigate sites regardless of technical ability, location or device."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Designers and developers can create consistent digital experiences across Victorian Government sites."}]},{"type":"element","tag":"h3","props":{"id":"ripple-gives-you-efficient-and-reusable-digital-resources"},"children":[{"type":"text","value":"Ripple gives you efficient and reusable digital resources"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple promotes efficiency and reuse by providing reusable styles, components and patterns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It provides a set of standards to manage design at scale, to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reduce redundancy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"create a shared language"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide visual consistency."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense."}]},{"type":"element","tag":"h3","props":{"id":"ripple-is-by-government-for-government"},"children":[{"type":"text","value":"Ripple is by government, for government"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise."}]},{"type":"element","tag":"h2","props":{"id":"who-can-use-ripple"},"children":[{"type":"text","value":"Who can use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is open to all departments or agencies that use Victorian Government branding. Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/about/whos-it-for"},"children":[{"type":"text","value":"Who's it for?"}]},{"type":"text","value":" page for more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"text","value":" page for more information."}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-find-out-more"},"children":[{"type":"text","value":"How do I find out more?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/work-sdp","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/work-sdp"}]},{"type":"text","value":" or contact "},{"type":"element","tag":"a","props":{"href":"mailto:digital@dpc.vic.gov.au"},"children":[{"type":"text","value":"digital@dpc.vic.gov.au"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To find out more about the Single Digital Presence program, please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"why-use-ripple","depth":2,"text":"Why use Ripple?","children":[{"id":"ripple-solves-the-hard-problems-so-you-dont-have-to","depth":3,"text":"Ripple solves the hard problems so you don’t have to"},{"id":"ripple-gives-you-efficient-and-reusable-digital-resources","depth":3,"text":"Ripple gives you efficient and reusable digital resources"},{"id":"ripple-is-by-government-for-government","depth":3,"text":"Ripple is by government, for government"}]},{"id":"who-can-use-ripple","depth":2,"text":"Who can use Ripple?"},{"id":"how-do-i-find-out-more","depth":2,"text":"How do I find out more?"}]}},"_type":"markdown","_id":"content:design-system:1.about:1.what-is-ripple.md","_source":"content","_file":"design-system/1.about/1.what-is-ripple.md","_extension":"md"},{"_path":"/design-system/about/whos-it-for","_dir":"about","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Who's it for?","description":"Built by government, for government.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"who-can-use-ripple"},"children":[{"type":"text","value":"Who can use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is available to all departments and agencies that use Victorian Government branding."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Designers"}]},{"type":"text","value":" can easily and quickly create wireframes, high-fidelity designs and prototypes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Developers"}]},{"type":"text","value":" can access technical specifications to create pixel-perfect code."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Content creators"}]},{"type":"text","value":" can design page concepts, knowing their layouts will accurately reflect the finished product."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Product owners"}]},{"type":"text","value":" and stakeholders can review designs and provide feedback."}]}]},{"type":"element","tag":"h2","props":{"id":"what-should-i-use-ripple-for"},"children":[{"type":"text","value":"What should I use Ripple for?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" platform."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also means Ripple is not a general purpose design system for use outside of Brand Victoria."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand."}]}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-use-ripple"},"children":[{"type":"text","value":"How do I use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"building your own components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"referencing the Ripple styles"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"importing the Ripple components."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"text","value":" page for instructions."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"who-can-use-ripple","depth":2,"text":"Who can use Ripple?"},{"id":"what-should-i-use-ripple-for","depth":2,"text":"What should I use Ripple for?"},{"id":"how-do-i-use-ripple","depth":2,"text":"How do I use Ripple?"}]}},"_type":"markdown","_id":"content:design-system:1.about:2.whos-it-for.md","_source":"content","_file":"design-system/1.about/2.whos-it-for.md","_extension":"md"},{"_path":"/design-system/about/getting-support","_dir":"about","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Support","description":"How to get help","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple design system"}]},{"type":"text","value":" is maintained by the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" team at the Victorian Department of Government Services."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can reach out to us via the following channels:"}]},{"type":"element","tag":"h3","props":{"id":"for-technical-and-project-support"},"children":[{"type":"text","value":"For technical and project support"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"join the discussion on "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"log a request through our "},{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portals","rel":["nofollow"]},"children":[{"type":"text","value":"helpdesk"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"sign up to the "},{"type":"element","tag":"a","props":{"href":"https://vic-sdp.slack.com","rel":["nofollow"]},"children":[{"type":"text","value":"SDP Slack"}]},{"type":"text","value":" (Open to projects with an MoU for application support)"}]}]},{"type":"element","tag":"h2","props":{"id":"design-enquiries"},"children":[{"type":"text","value":"Design enquiries"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Email: "},{"type":"element","tag":"a","props":{"href":"mailto:design@dpc.vic.gov.au"},"children":[{"type":"text","value":"design@dpc.vic.gov.au"}]}]},{"type":"element","tag":"h2","props":{"id":"general-enquiries"},"children":[{"type":"text","value":"General enquiries"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497","rel":["nofollow"]},"children":[{"type":"text","value":"Raise a request"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"for-technical-and-project-support","depth":3,"text":"For technical and project support"},{"id":"design-enquiries","depth":2,"text":"Design enquiries"},{"id":"general-enquiries","depth":2,"text":"General enquiries"}]}},"_type":"markdown","_id":"content:design-system:1.about:3.getting-support.md","_source":"content","_file":"design-system/1.about/3.getting-support.md","_extension":"md"},{"_path":"/design-system/about/contributing","_dir":"about","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Contributing","description":"Found an issue?","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple design system"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple framework"}]},{"type":"text","value":" are open source and released under an Apache 2.0 License."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is maintained by the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" team at the Victorian Department of Government Services.\nIf you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To propose a change, you will need to have a free GitHub account. Please see the "},{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub docs"}]},{"type":"text","value":" to create one if you haven't already."}]},{"type":"element","tag":"h2","props":{"id":"submit-a-bug-report"},"children":[{"type":"text","value":"Submit a bug report"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Check existing the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"discussions"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"issues"}]},{"type":"text","value":" to see if the issue has already been discussed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill out the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D","rel":["nofollow"]},"children":[{"type":"text","value":"bug report issue template"}]}]}]},{"type":"element","tag":"h2","props":{"id":"documentation-changes"},"children":[{"type":"text","value":"Documentation changes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change."}]},{"type":"element","tag":"h3","props":{"id":"to-create-an-issue"},"children":[{"type":"text","value":"To create an issue:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To log a docs site issue please do the following"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Log in to GitHub"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D","rel":["nofollow"]},"children":[{"type":"text","value":"Log an issue on the GitHub Repository"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill in the form, providing as much detail as possible"}]}]},{"type":"element","tag":"h3","props":{"id":"to-propose-an-edit-directly"},"children":[{"type":"text","value":"To propose an edit directly"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub docs"}]},{"type":"text","value":" for more information about creating a pull request."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Log in to GitHub"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Click the \"Propose a change to this page on GitHub\" link at the bottom of each content page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make a change to the markdown in the editor. See "},{"type":"element","tag":"a","props":{"href":"https://www.markdownguide.org/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.markdownguide.org/"}]},{"type":"text","value":" for information on syntax"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Describe the change in the commit message"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new pull request from the \"forked\" version of the repository"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This pull request will be reviewed by the SDP development team and we may ask for changes or revisions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If the Pull Request is approved it will be merged and included in the next Ripple release."}]}]},{"type":"element","tag":"h2","props":{"id":"propose-a-new-feature"},"children":[{"type":"text","value":"Propose a new feature"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have a proposal for a new feature to the Ripple design system please see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#enquiries-and-support","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/ripple-design-system#enquiries-and-support"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For development partners wishing to propose a new feature to Ripple Framework please do the following:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Check existing the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc","rel":["nofollow"]},"children":[{"type":"text","value":"discussions"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"issues"}]},{"type":"text","value":" to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you are confident that the feature is something worth progressing, please fill out the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D","rel":["nofollow"]},"children":[{"type":"text","value":"New feature proposal"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"submit-a-bug-report","depth":2,"text":"Submit a bug report"},{"id":"documentation-changes","depth":2,"text":"Documentation changes","children":[{"id":"to-create-an-issue","depth":3,"text":"To create an issue:"},{"id":"to-propose-an-edit-directly","depth":3,"text":"To propose an edit directly"}]},{"id":"propose-a-new-feature","depth":2,"text":"Propose a new feature"}]}},"_type":"markdown","_id":"content:design-system:1.about:4.contributing.md","_source":"content","_file":"design-system/1.about/4.contributing.md","_extension":"md"},{"_path":"/design-system/design/getting-started","_dir":"design","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Getting started","description":null,"layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"styles"}]},{"type":"text","value":" - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"guidance"}]},{"type":"text","value":" - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences."}]}]},{"type":"element","tag":"h2","props":{"id":"first-steps"},"children":[{"type":"text","value":"First steps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some key areas of the Ripple Design System that will help you create your digital product."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/design-tokens/"},"children":[{"type":"text","value":"Design tokens"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Sign up for access to the Ripple 2.0 Figma file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"Theming"}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-ripple-20-figma-file"},"children":[{"type":"text","value":"The Ripple 2.0 Figma file"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 Design System is available in "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/","rel":["nofollow"]},"children":[{"type":"text","value":"Figma"}]},{"type":"text","value":". It contains all the design assets needed to design, prototype and share."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"To create quality user experiences, do not use the Figma file in isolation."}]},{"type":"text","value":" This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality."}]},{"type":"element","tag":"h3","props":{"id":"figma-file-access"},"children":[{"type":"text","value":"Figma file access"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Sign up to Figma"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Create a free "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/pricing/","rel":["nofollow"]},"children":[{"type":"text","value":"Figma Starter account"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Install Ripple font"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Ripple uses the VIC font family."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-fonts","rel":["nofollow"]},"children":[{"type":"text","value":"Download and install VIC"}]},{"type":"text","value":" to use this typeface in Figma."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Request access to Ripple Figma file"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Ripple has been built as a Figma project."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Request access to the Ripple 2.0 Design System"}]},{"type":"text","value":"."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"You will receive access to the Ripple Design System Figma file."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Add Ripple to your Figma account"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Add the Ripple 2.0 Design System Figma file to your Figma account."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Set up Asset Library"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"In your Figma account, go to the Getting Started page."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Follow these instructions to set up the Asset Library."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"first-steps","depth":2,"text":"First steps"},{"id":"the-ripple-20-figma-file","depth":2,"text":"The Ripple 2.0 Figma file","children":[{"id":"figma-file-access","depth":3,"text":"Figma file access"}]}]}},"_type":"markdown","_id":"content:design-system:2.design:1.getting-started.md","_source":"content","_file":"design-system/2.design/1.getting-started.md","_extension":"md"},{"_path":"/design-system/design/our-design-principles","_dir":"design","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Our design principles","description":"There are 4 design principles that are the foundation of the Ripple Design System.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 4 design principles that underpin the Ripple Design System:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Inclusive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Efficient."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Flexible."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Easy."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System uses these principles when making design decisions."}]},{"type":"element","tag":"h2","props":{"id":"inclusive"},"children":[{"type":"text","value":"Inclusive"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Accessibility is top priority."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Collaborative in design."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Transparent documentation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Friendly, helpful and trustworthy."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include all users, abilities and backgrounds in the process and design intent."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Support best practices, provide guidance and build trust with the community."}]},{"type":"element","tag":"h2","props":{"id":"efficient"},"children":[{"type":"text","value":"Efficient"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Less is more."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Clean and clear."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Considered."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Economic design."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Think holistically to create considered sustainable outcomes that make sense to all users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Increase efficiencies while reducing complexities and risks."}]},{"type":"element","tag":"h2","props":{"id":"flexible"},"children":[{"type":"text","value":"Flexible"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Responsive to data."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Responsive to sub-brands."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Considers context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Iterative improvements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use meaningful evidence to improve impact and add value."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Find improvement opportunities that elevate the experience for multiple contexts and end users."}]},{"type":"element","tag":"h2","props":{"id":"easy"},"children":[{"type":"text","value":"Easy"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Easy to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contribute to"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"learn and understand"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"create and recreate"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"find information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider the needs and experiences of end users of Victorian digital products."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"inclusive","depth":2,"text":"Inclusive"},{"id":"efficient","depth":2,"text":"Efficient"},{"id":"flexible","depth":2,"text":"Flexible"},{"id":"easy","depth":2,"text":"Easy"}]}},"_type":"markdown","_id":"content:design-system:2.design:2.our-design-principles.md","_source":"content","_file":"design-system/2.design/2.our-design-principles.md","_extension":"md"},{"_path":"/design-system/design/design-tokens","_dir":"design","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Design tokens","description":"Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"what-is-a-design-token"},"children":[{"type":"text","value":"What is a Design token?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By storing design decisions, they replace the need to use static values (for example, hex code values for colour)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple Design System has tokens for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"colour"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"typography"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"spacing"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"elevation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"borders"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"motion values."}]}]},{"type":"element","tag":"h2","props":{"id":"why-use-design-tokens"},"children":[{"type":"text","value":"Why use design tokens?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using design tokens keeps your UI consistent across different platforms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens are the single source of truth. You can use them across designs and code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since design tokens let you make value changes at scale, design language changes are easier to make."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products."}]},{"type":"element","tag":"h2","props":{"id":"ripple-design-tokens"},"children":[{"type":"text","value":"Ripple design tokens"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A Ripple token has 2 parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a token name, such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an associated value, such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"#0052C2"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The token's value can be one of several things: colour, a typeface, a measurement or even another token."}]},{"type":"element","tag":"h2","props":{"id":"how-to-read-ripple-design-token-names"},"children":[{"type":"text","value":"How to read Ripple design token names"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Knowing how to read a token name helps you find the right token faster."}]},{"type":"element","tag":"h3","props":{"id":"parts-of-design-token-names"},"children":[{"type":"text","value":"Parts of design token names"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl"}]},{"type":"text","value":": design system"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"clr"}]},{"type":"text","value":" (colour) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" (typography) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sp"}]},{"type":"text","value":" (spacing) for example: token type"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"primary-accessible"}]},{"type":"text","value":" (a descriptive name) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"3"}]},{"type":"text","value":" (a number), for example: see below"}]}]},{"type":"element","tag":"h3","props":{"id":"examples"},"children":[{"type":"text","value":"Examples"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-clr-primary-accessible"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]}]}]},{"type":"element","tag":"h3","props":{"id":"steps-and-explanations"},"children":[{"type":"text","value":"Steps and explanations"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Start all design tokens with the system name: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl"}]},{"type":"text","value":" is for Ripple."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Then, place an abbreviation for the token type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"clr"}]},{"type":"text","value":" is for colour; type is for typography; "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sp"}]},{"type":"text","value":" is for spacing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"primary-accessible"}]},{"type":"text","value":" in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"4"}]},{"type":"text","value":" in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System."}]}]},{"type":"element","tag":"h2","props":{"id":"best-practices"},"children":[{"type":"text","value":"Best practices"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose tokens based on meaning rather than appearance only"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose the token with the most specific meaning that is available and applies to your content’s role on the site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not choose tokens based only how the end result looks on your site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later"}]}]},{"type":"element","tag":"h2","props":{"id":"why-are-tokens-important-for-design"},"children":[{"type":"text","value":"Why are tokens important for design?"}]},{"type":"element","tag":"h3","props":{"id":"purpose-driven"},"children":[{"type":"text","value":"Purpose-driven"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale."}]},{"type":"element","tag":"h3","props":{"id":"single-source-of-truth"},"children":[{"type":"text","value":"Single source of truth"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation."}]},{"type":"element","tag":"h3","props":{"id":"system-wide-updates"},"children":[{"type":"text","value":"System-wide updates"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They let developers and designers change system-wide themes and contexts, using only a single update."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code."}]},{"type":"element","tag":"h2","props":{"id":"for-developers"},"children":[{"type":"text","value":"For developers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For information for developers using tokens to theme Ripple components see the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guide"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"what-is-a-design-token","depth":2,"text":"What is a Design token?"},{"id":"why-use-design-tokens","depth":2,"text":"Why use design tokens?"},{"id":"ripple-design-tokens","depth":2,"text":"Ripple design tokens"},{"id":"how-to-read-ripple-design-token-names","depth":2,"text":"How to read Ripple design token names","children":[{"id":"parts-of-design-token-names","depth":3,"text":"Parts of design token names"},{"id":"examples","depth":3,"text":"Examples"},{"id":"steps-and-explanations","depth":3,"text":"Steps and explanations"}]},{"id":"best-practices","depth":2,"text":"Best practices"},{"id":"why-are-tokens-important-for-design","depth":2,"text":"Why are tokens important for design?","children":[{"id":"purpose-driven","depth":3,"text":"Purpose-driven"},{"id":"single-source-of-truth","depth":3,"text":"Single source of truth"},{"id":"system-wide-updates","depth":3,"text":"System-wide updates"}]},{"id":"for-developers","depth":2,"text":"For developers"}]}},"_type":"markdown","_id":"content:design-system:2.design:3.design-tokens.md","_source":"content","_file":"design-system/2.design/3.design-tokens.md","_extension":"md"},{"_path":"/design-system/design/theming-guidance-for-designers","_dir":"design","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Theming guidance for designers","description":null,"layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Jump to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#create-a-custom-theme"},"children":[{"type":"text","value":"Create a custom theme"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#component-specific-theming"},"children":[{"type":"text","value":"Component-specific theming"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#theme-accessibility"},"children":[{"type":"text","value":"Theme accessibility"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#automatic-colour-token-logic"},"children":[{"type":"text","value":"Automatic colour token logic"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"create-a-custom-theme"},"children":[{"type":"text","value":"Create a custom theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple has been designed with a primary and accent colour. These inform the colour framework."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A link colour, focus colour and optional gradient are also required when theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary, accent and focus colours can be either light or dark:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To classify your colour as light or dark, we recommend the use "},{"type":"element","tag":"a","props":{"href":"https://webaim.org/resources/contrastchecker/","rel":["nofollow"]},"children":[{"type":"text","value":"WebAim Colour Contrast Checker"}]},{"type":"text","value":" or the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/community/plugin/733159460536249875","rel":["nofollow"]},"children":[{"type":"text","value":"Figma plugin, A11y - Colour Contrast Checker"}]},{"type":"text","value":" to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Guidance for creating your own theme can be found on the Theming page of the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 2.0 Design System Figma file"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you don’t have access, you can "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"request access to view the Ripple 2.0 Design System"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"component-specific-theming"},"children":[{"type":"text","value":"Component-specific theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 options for component-specific styling:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom."}]}]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Neutral can be applied to the following components:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"buttons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"header (only reverse and image variants)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"footer."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised."}]},{"type":"element","tag":"h3","props":{"id":"custom"},"children":[{"type":"text","value":"Custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom component theming can only be applied to the footer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To learn more about custom styling please see the Theming page of the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 2.0 Design System Figma file"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theme-accessibility"},"children":[{"type":"text","value":"Theme accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-guidelines-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Brand Victoria guidelines"}]},{"type":"text","value":" for more information)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html","rel":["nofollow"]},"children":[{"type":"text","value":"1.4.3 Contrast Minimum (Level AA)"}]},{"type":"text","value":"\nThe visual presentation of "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-text","rel":["nofollow"]},"children":[{"type":"text","value":"text"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-images-of-text","rel":["nofollow"]},"children":[{"type":"text","value":"images of text"}]},{"type":"text","value":" has a "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio","rel":["nofollow"]},"children":[{"type":"text","value":"contrast ratio"}]},{"type":"text","value":" of at least 4.5:1, except for the following:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-large-scale","rel":["nofollow"]},"children":[{"type":"text","value":"Large-scale"}]},{"type":"text","value":" text and images of large-scale text have a contrast ratio of at least 3:1;"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text or images of text that are part of an inactive "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-user-interface-components","rel":["nofollow"]},"children":[{"type":"text","value":"user interface component"}]},{"type":"text","value":", that are "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-pure-decoration","rel":["nofollow"]},"children":[{"type":"text","value":"pure decoration"}]},{"type":"text","value":", that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that is part of a logo or brand name has no contrast requirement."}]}]},{"type":"element","tag":"h3","props":{"id":"accessibility-testing-requirements"},"children":[{"type":"text","value":"Accessibility testing requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html","rel":["nofollow"]},"children":[{"type":"text","value":"minimum contrast ratio of 4:5:1"}]},{"type":"text","value":" for normal text contrast, 3:1 for large text and non-text elements must be met."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Links are required to meet a ratio of 4.5:1 colour contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dark type / rpl-clr-dark / #1A1A1A"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light type / rpl-clr-light / #FFFFFF."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The link colour is tested against 3 colours:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light type / rpl-clr-light / #FFFFFF"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-neutral-100 / #F5F5F5"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-accent-alt / #E6F5FD (example hex only)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/community/plugin/733343906244951586","rel":["nofollow"]},"children":[{"type":"text","value":"Figma plugin 'Color Blind'"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"colour-token-automatic-logic"},"children":[{"type":"text","value":"Colour token automatic logic"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is a full list of colour tokens required to theme the Ripple 2.0 Design System."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements.\nFor example, if the primary colour is classified as dark:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast will automatically be rpl-clr-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible will automatically be rpl-clr-primary."}]}]},{"type":"element","tag":"h3","props":{"id":"core"},"children":[{"type":"text","value":"Core"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary-alt"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary-alpha"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary')"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-accent"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-accent-alt"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-focus"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-link"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient-horizontal"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient-vertical"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"typography-colour-tokens"},"children":[{"type":"text","value":"Typography colour tokens"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast-alpha"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-type-primary-contrast')"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-accent-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-accent’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-alt-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-focus-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-focus’ contrast requirements)"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"footer-specific-optional"},"children":[{"type":"text","value":"Footer-specific (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See: "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#component-specific-theming"},"children":[{"type":"text","value":"component-specific theming"}]},{"type":"text","value":"."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-footer"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom or automatic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-footer-alt"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom or automatic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-footer-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-footer’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-footer-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-footer’ contrast requirements)"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"automatic-colour-token-logic"},"children":[{"type":"text","value":"Automatic Colour Token Logic"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF)."}]}]},{"type":"element","tag":"h3","props":{"id":"primary-access-focus-and-link"},"children":[{"type":"text","value":"Primary, Access, Focus and Link"}]},{"type":"element","tag":"h4","props":{"id":"primary"},"children":[{"type":"text","value":"Primary"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary-alpha"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary at 50% opacity"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary at 50% opacity"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast-alpha"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast at 75% opacity"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast at 75% opacity"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-alt-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rlpl-clr-primary-alt"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-accent-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"focus"},"children":[{"type":"text","value":"Focus"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-focus-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"link"},"children":[{"type":"text","value":"Link"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"If Primary ‘Dark’"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"If Primary ‘Light’"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-link"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"gradient"},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Including a gradient is optional for theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a gradient is not used, 'rpl-clr-accent' will be used in its place."}]},{"type":"element","tag":"h4","props":{"id":"gradient-1"},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Accent"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient-horizontal"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient (90 degrees)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-accent"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient-vertical"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient (180 degrees)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-accent"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"create-a-custom-theme","depth":2,"text":"Create a custom theme"},{"id":"component-specific-theming","depth":2,"text":"Component-specific theming","children":[{"id":"neutral","depth":3,"text":"Neutral"},{"id":"custom","depth":3,"text":"Custom"}]},{"id":"theme-accessibility","depth":2,"text":"Theme accessibility","children":[{"id":"accessibility-testing-requirements","depth":3,"text":"Accessibility testing requirements"}]},{"id":"colour-token-automatic-logic","depth":2,"text":"Colour token automatic logic","children":[{"id":"core","depth":3,"text":"Core"},{"id":"typography-colour-tokens","depth":3,"text":"Typography colour tokens"},{"id":"footer-specific-optional","depth":3,"text":"Footer-specific (optional)"}]},{"id":"automatic-colour-token-logic","depth":2,"text":"Automatic Colour Token Logic","children":[{"id":"primary-access-focus-and-link","depth":3,"text":"Primary, Access, Focus and Link"},{"id":"gradient","depth":3,"text":"Gradient"}]}]}},"_type":"markdown","_id":"content:design-system:2.design:4.theming-guidance-for-designers.md","_source":"content","_file":"design-system/2.design/4.theming-guidance-for-designers.md","_extension":"md"},{"_path":"/design-system/develop/getting-started","_dir":"develop","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Getting started","description":"Information for developers using the Ripple 2 UI libraries","layout":"page","links":[{"text":"Github","url":"https://github.com/dpc-sdp/ripple-framework"},{"text":"Storybook","url":"/storybook"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-core"}]},{"type":"text","value":": A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-forms"}]},{"type":"text","value":": A collection of form inputs and support for building complex forms via "},{"type":"element","tag":"a","props":{"href":"https://formkit.com/","rel":["nofollow"]},"children":[{"type":"text","value":"Formkit"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"These docs are for Ripple 2"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple","rel":["nofollow"]},"children":[{"type":"text","value":"original Ripple GitHub repo"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Are you developing a site on the SDP platform?"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For information about using Ripple in SDP sites, visit the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework for SDP documentation"}]}]}]},{"type":"element","tag":"h2","props":{"id":"accessing-the-source-code"},"children":[{"type":"text","value":"Accessing the Source code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is an open source project and the source code can be found in the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework","rel":["nofollow"]},"children":[{"type":"text","value":"ripple-framework monorepo on Github"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core","rel":["nofollow"]},"children":[{"type":"text","value":"View "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-core"}]},{"type":"text","value":" on Github"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms","rel":["nofollow"]},"children":[{"type":"text","value":"View "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-forms"}]},{"type":"text","value":" on Github"}]}]}]},{"type":"element","tag":"h2","props":{"id":"viewing-examples-in-storybook"},"children":[{"type":"text","value":"Viewing examples in Storybook"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Storybook has information about props and slots that each Vue component supports. "},{"type":"element","tag":"a","props":{"href":"/storybook"},"children":[{"type":"text","value":"View the Ripple storybook"}]},{"type":"text","value":" to start exploring the available components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most of the examples found on this documentation site link directly examples in storybook."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"usage"}]},{"type":"text","value":" guide for information about getting started with the different ways of implementing Ripple."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"accessing-the-source-code","depth":2,"text":"Accessing the Source code"},{"id":"viewing-examples-in-storybook","depth":2,"text":"Viewing examples in Storybook"},{"id":"usage","depth":2,"text":"Usage"}]}},"_type":"markdown","_id":"content:design-system:3.develop:1.getting-started.md","_source":"content","_file":"design-system/3.develop/1.getting-started.md","_extension":"md"},{"_path":"/design-system/develop/contributing","_dir":"develop","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Contributing","description":"Information for developers wishing to contribute to the Ripple 2 UI libraries","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When contributing or participating in discussions, ensure that you are following our "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md","rel":["nofollow"]},"children":[{"type":"text","value":"contributor code of conduct"}]}]}]},{"type":"element","tag":"h2","props":{"id":"report-an-issue"},"children":[{"type":"text","value":"Report an issue"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you find an issue in Ripple, you can create an issue in github here "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/dpc-sdp/ripple-framework/issues"}]},{"type":"text","value":". Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue."}]},{"type":"element","tag":"h2","props":{"id":"join-the-discussion"},"children":[{"type":"text","value":"Join the discussion"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do you have an idea for a new component or feature? Use the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"Discussions"}]},{"type":"text","value":" feature in Ripple Github repo to start the conversation."}]},{"type":"element","tag":"h2","props":{"id":"writing-code"},"children":[{"type":"text","value":"Writing code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are ready to write some code in the Ripple git repo, please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md","rel":["nofollow"]},"children":[{"type":"text","value":"Contributing guide"}]},{"type":"text","value":" in Github."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"report-an-issue","depth":2,"text":"Report an issue"},{"id":"join-the-discussion","depth":2,"text":"Join the discussion"},{"id":"writing-code","depth":2,"text":"Writing code"}]}},"_type":"markdown","_id":"content:design-system:3.develop:2.contributing.md","_source":"content","_file":"design-system/3.develop/2.contributing.md","_extension":"md"},{"_path":"/design-system/develop/theming","_dir":"develop","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Theme and brand application","description":"Information for developers using Ripple 2 UI libraries","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple allows for customisation of it's components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]}]},{"type":"element","tag":"h2","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS Variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is fully theme-able using "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties","rel":["nofollow"]},"children":[{"type":"text","value":"CSS variables"}]},{"type":"text","value":", this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site."}]},{"type":"element","tag":"h2","props":{"id":"example"},"children":[{"type":"text","value":"Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To override theme values, simply set the css variable at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" or an element that wraps elements you want to theme."}]},{"type":"element","tag":"code","props":{"className":["language-css"],"code":":root {\n --rpl-clr-primary: #6B19A3;\n}\n","language":"css","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":root"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"--rpl-clr-primary"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"#6B19A3"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/colour"},"children":[{"type":"text","value":"colour"}]},{"type":"text","value":" page for a list of theme-able colours."}]},{"type":"element","tag":"h2","props":{"id":"assets"},"children":[{"type":"text","value":"Assets"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the following components for guidance on providing graphic elements to theme your site:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/styles/logo"},"children":[{"type":"text","value":"Logos"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/header"},"children":[{"type":"text","value":"Header"}]}]}]},{"type":"element","tag":"h2","props":{"id":"brand-application-in-sdp-sites"},"children":[{"type":"text","value":"Brand application in SDP sites"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"SDP Ripple framework"}]},{"type":"text","value":" section for more information on customising SDP websites and applying brand."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-109545{color:#0550AE;}\n.ct-996368{color:#24292F;}\n.ct-082380{color:#953800;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"css-variables","depth":2,"text":"CSS Variables"},{"id":"example","depth":2,"text":"Example"},{"id":"assets","depth":2,"text":"Assets"},{"id":"brand-application-in-sdp-sites","depth":2,"text":"Brand application in SDP sites"}]}},"_type":"markdown","_id":"content:design-system:3.develop:2.theming.md","_source":"content","_file":"design-system/3.develop/2.theming.md","_extension":"md"},{"_path":"/design-system/develop/usage","_dir":"develop","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Usage","description":"Ripple components can be used in several different ways depending on your project needs.","layout":"page","links":[{"text":"Github","url":"https://github.com/dpc-sdp/ripple-framework"},{"text":"Storybook","url":"/storybook"}],"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"using-ripple-ui-components"},"children":[{"type":"text","value":"Using Ripple UI components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Whilst Ripple is built to implement sites using a framework built on Vue JS and Nuxt, its modular architecture allows adopting different parts depending on your requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","src":"/assets/img/modules/rpl-modules.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI libraries are usable in the following contexts:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"svg","props":{"id":"docs-sprite","ariaHidden":"true","className":["rpl-svg-sprite--hidden"]},"children":[{"type":"element","tag":"defs","props":{},"children":[{"type":"element","tag":"symbol","props":{"xmlns":"http://www.w3.org/2000/svg","id":"icon-check","viewBox":"0 0 24 24"},"children":[{"type":"element","tag":"path","props":{"d":"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"},"children":[]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Library"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS styles"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Vue Components"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Ripple Framework (Nuxt)"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Web components"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Ripple UI Core"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Partial support"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Ripple UI Forms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"not supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-cancel"},"children":[]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"using-in-an-sdp-website"},"children":[{"type":"text","value":"Using in an SDP website"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For documentation on using Ripple with Nuxt in SDP sites, visit the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework documentation"}]}]}]},{"type":"element","tag":"h3","props":{"id":"github-packages"},"children":[{"type":"text","value":"Github Packages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is hosted publicly on Github Packages (ghcr) under the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@dpc/sdp"}]},{"type":"text","value":" namespace, please read these "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage/access-to-github-packages"},"children":[{"type":"text","value":"setup instructions for accessing Github Packages"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"using-ripple-ui-components","depth":2,"text":"Using Ripple UI components","children":[{"id":"using-in-an-sdp-website","depth":3,"text":"Using in an SDP website"},{"id":"github-packages","depth":3,"text":"Github Packages"}]}]}},"_type":"markdown","_id":"content:design-system:3.develop:3.usage.md","_source":"content","_file":"design-system/3.develop/3.usage.md","_extension":"md"},{"_path":"/design-system/develop/usage/access-to-github-packages","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Access to Github Packages","description":"How to access and use repos hosted on Github Packages.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NPM allows the use of multiple repo hosts, as long as they can be identified by namespace."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is hosted publicly on Github Packages (ghcr) under the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@dpc/sdp"}]},{"type":"text","value":" namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, create a Personal Access Token on Github:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Visit "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/settings/tokens"}]},{"type":"text","value":" and select "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate new token"}]},{"type":"text","value":" > "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate new token (classic)"}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic","src":"/img/generate.jpg","style":"width:360px"},"children":[]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill in the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note"}]},{"type":"text","value":" and choose an "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Expiration"}]},{"type":"text","value":" - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days","src":"/img/token.jpg","style":"width:505px"},"children":[]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Set the scope to only allow "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"read:packages"}]},{"type":"text","value":", and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate"}]},{"type":"text","value":" token"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of scope, with only read:packages selected","src":"/img/permissions.jpg","style":"width:827px"},"children":[]},{"type":"element","tag":"ol","props":{"start":4},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Store the resulting token somewhere secure, and add it to either a user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".npmrc"}]},{"type":"text","value":" (recommended) or the project-level "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".npmrc"}]},{"type":"text","value":" (the url on line 2 below is protocol-less, not a comment):"}]}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"@dpc-sdp:registry=https://npm.pkg.github.com\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"//npm.pkg.github.com/:_authToken="}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:1.access-to-github-packages.md","_source":"content","_file":"design-system/3.develop/4.usage/1.access-to-github-packages.md","_extension":"md"},{"_path":"/design-system/develop/usage/vue","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Vue","description":"How to use Ripple components with Vue.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue or index.js file):"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use a component, import it from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@dpc-sdp/ripple-ui-core/vue"}]},{"type":"text","value":", note the addition of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/vue"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"\n\n\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"import "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" RplButton "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" from '@dpc-sdp/ripple-ui-core/vue';\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"RplButton"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"variant"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"outlined\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please see this "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-vue-example","rel":["nofollow"]},"children":[{"type":"text","value":"example app"}]},{"type":"text","value":" for a basic demonstration of how to use Ripple components in a Vue app."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-186825{color:#CF222E;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-872567{color:#116329;}\n.ct-109545{color:#0550AE;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:2.vue.md","_source":"content","_file":"design-system/3.develop/4.usage/2.vue.md","_extension":"md"},{"_path":"/design-system/develop/usage/nuxt","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Nuxt","description":"How to use Ripple components with Nuxt in a non-SDP context.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI exports a nuxt module that you can add to your nuxt config, note the addition of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/nuxt"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"export default defineNuxtConfig({\n modules: [\n '@dpc-sdp/ripple-ui-core/nuxt'\n ]\n})\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"modules: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/nuxt'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue file):"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is no need to import the components as they will be registered globally by the nuxt module"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"RplButton"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"variant"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"outlined\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are not using SDP, the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework documentation"}]},{"type":"text","value":" is a good starting point for any Nuxt development using Ripple."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-186825{color:#CF222E;}\n.ct-082380{color:#953800;}\n.ct-319862{color:#8250DF;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-872567{color:#116329;}\n.ct-109545{color:#0550AE;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:3.nuxt.md","_source":"content","_file":"design-system/3.develop/4.usage/3.nuxt.md","_extension":"md"},{"_path":"/design-system/develop/usage/webcomponents","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Web components","description":"How to use the web component exports with other front-end systems.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.\n"},{"type":"element","tag":"a","props":{"href":"https://www.webcomponents.org/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.webcomponents.org/"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/658","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As with the other methods, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":" and then install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A basic example of how to use the web component exports can be found under "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/examples/webcomponents","rel":["nofollow"]},"children":[{"type":"text","value":"examples/webcomponents"}]},{"type":"text","value":" in the ripple-framework monorepo."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:4.webcomponents.md","_source":"content","_file":"design-system/3.develop/4.usage/4.webcomponents.md","_extension":"md"},{"_path":"/design-system/develop/usage/css-only","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Styles only","description":"Using the design system styles without a front-end framework.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI core exports it's CSS stylesheets directly. If you have a use case where you can't use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can import CSS styles from the ripple-ui-core package."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend that you lock the version of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@dpc-sdp/ripple-ui-core"}]},{"type":"text","value":" so that any future changes of styles without changes to markup do not break your application."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-186825{color:#CF222E;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:5.css-only.md","_source":"content","_file":"design-system/3.develop/4.usage/5.css-only.md","_extension":"md"},{"_path":"/design-system/styles/colour","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Colour","description":"Colour plays an important role in creating a consistent and strong visual digital products and services.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default colours, made up of two blues, reflect vic.gov.au branding. This strengthens the association with the Victorian Government."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The design system contains a colour framework. You can change it if your site requires department or entity branding."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you're meeting WCAG requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you change your core brand colours, your styles and components will re-theme automatically using the design system's colour framework."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more guidance on theming options, see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming/"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"You don’t need to use hex colours in code."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation."}]}]},{"type":"element","tag":"h2","props":{"id":"core-palette"},"children":[{"type":"text","value":"Core palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The core palette includes primary and secondary colours."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It's used in combination with the primary colour to create a more dynamic and engaging visual experience."}]}]},{"type":"element","tag":"h3","props":{"id":"primary"},"children":[{"type":"text","value":"Primary"}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.primary\"]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.accent\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"neutral-palette"},"children":[{"type":"text","value":"Neutral palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Neutral palette is on a colour scale of white to black."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 10 steps represent this scale based on our requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Neutral colours are consistent throughout the design system. They are for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text colours"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"borders"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"other elements, like a neutral background."}]}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.neutral\"]"},"children":[]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.light\",\"clr.dark\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"typography-colours"},"children":[{"type":"text","value":"Typography colours"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Interaction colours are in addition to the core colour palette. This guarantees accessible text."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.type.default\",\"clr.type.light\",\"clr.type.primary.contrast\",\"clr.type.accent.contrast\"]"},"children":[]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.link\",\"clr.link-visited\",\"clr.focus\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"gradients"},"children":[{"type":"text","value":"Gradients"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Gradients bring attention to components or information. Only use them on occasion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All gradients should appear from dark to light in their usage."}]},{"type":"element","tag":"docs-gradient-table","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"sematics"},"children":[{"type":"text","value":"Sematics"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Warning"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using them outside of their semantic meaning."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These colours help signal to users the meaning of some components. For example, for alerts or error messages."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.information\",\"clr.success\",\"clr.warning\",\"clr.error\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"focus"},"children":[{"type":"text","value":"Focus"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/focus-state/"},"children":[{"type":"text","value":"focus state"}]},{"type":"text","value":" for guidance."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.focus\"]"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see theming guidance for designers or developers."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"core-palette","depth":2,"text":"Core palette","children":[{"id":"primary","depth":3,"text":"Primary"},{"id":"accent","depth":3,"text":"Accent"}]},{"id":"neutral-palette","depth":2,"text":"Neutral palette"},{"id":"typography-colours","depth":2,"text":"Typography colours"},{"id":"gradients","depth":2,"text":"Gradients"},{"id":"sematics","depth":2,"text":"Sematics"},{"id":"focus","depth":2,"text":"Focus"},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:4.styles:colour.md","_source":"content","_file":"design-system/4.styles/colour.md","_extension":"md"},{"_path":"/design-system/styles/focus-state","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Focus state","description":"Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some users use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states help users understand which element is currently selected and ready for interaction."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Focus states are orange and neutral-800, aiming to conform to the WCAG 2.1 Level AA "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html","rel":["nofollow"]},"children":[{"type":"text","value":"non-text contrast"}]},{"type":"text","value":" on any background colour."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have chosen this orange colour as it is a direct opposite of our primary colour. This allows all colourblind users to see a visual difference. Focus state styling also removes any border radius to create a bigger visual difference to surrounding elements."}]},{"type":"element","tag":"h3","props":{"id":"inline-style"},"children":[{"type":"text","value":"Inline style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The inline focus state helps links stand out from the rest of the content on a page. When a link receives focus, it will underline and change background colour. Other components and elements that look like links use the inline style."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/focus-inline-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-inline"}]}]},{"type":"element","tag":"h3","props":{"id":"block-style"},"children":[{"type":"text","value":"Block style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The block style completely highlights a section or whole component with the focus state. For example, when a button receives focus, a border is added to the bottom of the container and the background colour will change."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Focus Link Visual Block Sample","src":"/assets/img/focus-block-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-block"}]}]},{"type":"element","tag":"h3","props":{"id":"outline-focus-state-style"},"children":[{"type":"text","value":"Outline focus state style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The outline styles are for when form inputs are focused. When a form field receives focus, it adds a border. If the element already has a border, the border gets thicker."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Focus Link Visual Outline Focus Sample","src":"/assets/img/focus-outline-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-outline"}]}]},{"type":"element","tag":"h3","props":{"id":"modified-focus-states-for-components"},"children":[{"type":"text","value":"Modified focus states for components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The alert component has a modified focus state colour. This is consistent across all alert variants. It meets colour contrast requirements on all semantic colours, including danger and warning."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The modified styling uses a white background in place of the orange, still with the dark content and border."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Component Modified Focus State Sample","src":"/assets/img/focus-alert-focus.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS Variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The focus state has three CSS Variables."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Swatch"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Element"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"swatch","props":{"colour":"#FF9E1B"},"children":[]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Background Fill"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"#FF9E1B"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-focus"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"swatch","props":{"colour":"#1A1A1A"},"children":[]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Content / Text / Icons"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"#1A1A1A"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-focus-contrast"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"swatch","props":{"colour":"#1A1A1A"},"children":[]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Bottom Border"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"#1A1A1A"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For advice on focus state theming, see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming/"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"inline-style","depth":3,"text":"Inline style"},{"id":"block-style","depth":3,"text":"Block style"},{"id":"outline-focus-state-style","depth":3,"text":"Outline focus state style"},{"id":"modified-focus-states-for-components","depth":3,"text":"Modified focus states for components"},{"id":"css-variables","depth":3,"text":"CSS Variables"},{"id":"theming","depth":3,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:4.styles:focus-state.md","_source":"content","_file":"design-system/4.styles/focus-state.md","_extension":"md"},{"_path":"/design-system/styles/grid","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Grid","description":"With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grids are a crucial component of any design system. They provide a framework for arranging content in an appealing and structured manner."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed the grid for a high degree of flexibility and responsiveness."}]},{"type":"element","tag":"h2","props":{"id":"breakpoints"},"children":[{"type":"text","value":"Breakpoints"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple has 5 breakpoints. These ensure content is at an optimal layout for readability and accessibility."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Width"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Active content area"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"<575px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"288 – 543px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"S"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"576 – 767px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"544 – 735px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"768 – 991px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"736 – 927px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"992 – 1199px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"864 – 1071px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XL"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1200px +"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1040px"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"grids"},"children":[{"type":"text","value":"Grids"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The grid is made up of three elements: columns, gutters, and margins."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Visual of basic grid / column / gutter / margin anatomy","src":"/assets/img/Grid-Grid-Anatomy.png"},"children":[]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Margins"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Gutter"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Column type / width"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • <575px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"S • 576 – 767px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • 768 – 991px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L • 992 – 1199px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XL • 1200px +"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"28px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fixed / 61px"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the grid system to structure your content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most vic.gov.au pages follow a ‘two-thirds and one-third’ layout. But, the grid system allows for more combinations if needed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your main content should always be in a two-thirds column. This is even if you’re not using a corresponding one-third column for secondary content."}]},{"type":"element","tag":"h3","props":{"id":"column-layouts"},"children":[{"type":"text","value":"Column layouts"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Column Span"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Layout"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"12"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Full"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • S • M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Half"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • S • M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Two thirds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"One third"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"One quarter"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L • XL"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"breakpoints","depth":2,"text":"Breakpoints"},{"id":"grids","depth":2,"text":"Grids"},{"id":"usage","depth":2,"text":"Usage","children":[{"id":"column-layouts","depth":3,"text":"Column layouts"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:grid.md","_source":"content","_file":"design-system/4.styles/grid.md","_extension":"md"},{"_path":"/design-system/styles/icons","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Icons","description":"Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons are a visual representation of an action, idea, or object. They provide a quick and easy way to communicate information. They can also enhance the usability of a design."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Ripple Design System's icon set for a consistent user experience and a cohesive look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add icons to components or pair them with text. Icons should have a clear relationship with their corresponding text or action. This keeps them accessible to users with visual impairments or disabilities."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using icons alone, as one user may interpret them differently to another."}]},{"type":"element","tag":"h2","props":{"id":"icon-library"},"children":[{"type":"text","value":"Icon Library"}]},{"type":"element","tag":"h4","props":{"id":"alerts"},"children":[{"type":"text","value":"Alerts"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"alert"},"children":[]},{"type":"element","tag":"h4","props":{"id":"social"},"children":[{"type":"text","value":"Social"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"social"},"children":[]},{"type":"element","tag":"h4","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"standard"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Accessibility tip"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using an icon by itself, ensure it's using the right label for screen readers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using an icon and text, ensure only the text gets read out."}]}]},{"type":"element","tag":"h2","props":{"id":"application"},"children":[{"type":"text","value":"Application"}]},{"type":"element","tag":"h3","props":{"id":"sizing"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System displays icons at four sizes (12px, 16px, 24px, 32px) depending on their type, use and screen size."}]},{"type":"element","tag":"docs-icon-sizing-table","props":{":sizes":"[{\"xs\":\"12px\"},{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"spacing"},"children":[{"type":"text","value":"Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure you use the right amount of space around an icon to allow for legibility. At the least, icons must have clear space of 50% of the height/width of the icon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Visual of min space","src":"/assets/img/Icon-Clear-space.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For accessibility, ensure you:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"wrap icons within their interactive component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specify if an icon is decorative and informative by assigning the property in code"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"use descriptive and meaningful titles for informative icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"use icons to represent the same action or idea."}]}]},{"type":"element","tag":"h2","props":{"id":"styling"},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tag":"h3","props":{"id":"colour"},"children":[{"type":"text","value":"Colour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a background changes the colour of the text (for example, a button) the icon should take on the same colour as the text."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons used to represent a state should use the correct colour. For example, an icon used in a success notification should use rpl-clr-success."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--success"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"icon-library","depth":2,"text":"Icon Library"},{"id":"application","depth":2,"text":"Application","children":[{"id":"sizing","depth":3,"text":"Sizing"},{"id":"spacing","depth":3,"text":"Spacing"}]},{"id":"accessibility","depth":2,"text":"Accessibility"},{"id":"styling","depth":2,"text":"Styling","children":[{"id":"colour","depth":3,"text":"Colour"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:icons.md","_source":"content","_file":"design-system/4.styles/icons.md","_extension":"md"},{"_path":"/design-system/styles/layer-styles","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Layer styles","description":null,"layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"border"},"children":[{"type":"text","value":"Border"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use a border to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separate or segment blocks or sections of content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight important elements such as featured content or a call to action"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"aid information hierarchy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"support navigational structure"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight an active navigation item."}]}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Find examples of borders that add visual consistency on the "},{"type":"element","tag":"a","props":{"href":"/design-system/components/in-page-navigation/"},"children":[{"type":"text","value":"in-page navigation"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"/design-system/components/card/"},"children":[{"type":"text","value":"cards"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/design-system/components/contact-us/"},"children":[{"type":"text","value":"contact us"}]},{"type":"text","value":" pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Borders can also segment content (like on banners)."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-in-page-navigation--in-page-navigation"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"border-radius"},"children":[{"type":"text","value":"Border Radius"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've defined a set of radius values for use."}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border.radius"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage-1"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border radius is on containers such as buttons, cards and form inputs."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a container has a defined border radius, but is in focus, discard the border radius."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A 0px value is applied for consistency and clarity."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"elevation"},"children":[{"type":"text","value":"Elevation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation adds depth to components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer."}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"elevation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage-2"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation is on components such as cards, button (elevated variant only) and breadcrumbs."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-breadcrumbs--default-story"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"border","depth":2,"text":"Border","children":[{"id":"usage","depth":3,"text":"Usage"}]},{"id":"border-radius","depth":2,"text":"Border Radius","children":[{"id":"usage-1","depth":3,"text":"Usage"}]},{"id":"elevation","depth":2,"text":"Elevation","children":[{"id":"usage-2","depth":3,"text":"Usage"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:layer-styles.md","_source":"content","_file":"design-system/4.styles/layer-styles.md","_extension":"md"},{"_path":"/design-system/styles/layout","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Layout","description":"Layouts are common page composition patterns that offer ways of structuring components and content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always design for small screens first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For most types of pages, use either a ‘two-thirds’ or a ‘two-thirds and one-third’ layout. Doing this reduces long lines of text that can make a page hard to read on desktop devices. This approach should limit lines of text to 75 characters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should never assume what devices people are using. This is why you should design for different screen sizes instead of specific devices."}]},{"type":"element","tag":"h2","props":{"id":"page-layouts"},"children":[{"type":"text","value":"Page layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 standard page layouts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Full width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Two column - right side."}]}]},{"type":"element","tag":"h3","props":{"id":"full-width"},"children":[{"type":"text","value":"Full width"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Displays the main content area the full width of the container."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of full width layout","src":"/assets/img/layout-full-width.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"two-column"},"children":[{"type":"text","value":"Two column"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Displays a right hand sidebar that stacks on <991px breakpoints. The main content area is always visible."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of two column layout","src":"/assets/img/layout-two-column.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"white-space"},"children":[{"type":"text","value":"White Space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use adequate white space in the layout to separate elements and create a sense of hierarchy. This helps to make elements on the page easier to distinguish and understand, and creates visual harmony."}]},{"type":"element","tag":"h3","props":{"id":"page-section-spacing"},"children":[{"type":"text","value":"Page Section Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Spacing is used between the ‘above’, ‘body’ and ‘below’ content sections."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For both XS and S breakpoints, section spacing is added between the body section and sidebar section when in use."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of page section layout spacing","src":"/assets/img/layout-page-spacing.png"},"children":[]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • <576px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"S • 576-767px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • 768-991px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"48px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-10"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L • 992-1199px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-12"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XL • 1200px+"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-13"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"content-layout-spacing"},"children":[{"type":"text","value":"Content Layout Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We define spacing between components and elements at a breakpoint level. This compliments the grid and applied layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of content layout spacing","src":"/assets/img/layout-content-spacing.png"},"children":[]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Sidebar Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Sidebar CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • <576px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"S • 576-767px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • 768-991px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L • 992-1199px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XL • 1200px+"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-9"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-9"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"page-layouts","depth":2,"text":"Page layouts","children":[{"id":"full-width","depth":3,"text":"Full width"},{"id":"two-column","depth":3,"text":"Two column"}]},{"id":"white-space","depth":2,"text":"White Space","children":[{"id":"page-section-spacing","depth":3,"text":"Page Section Spacing"},{"id":"content-layout-spacing","depth":3,"text":"Content Layout Spacing"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:layout.md","_source":"content","_file":"design-system/4.styles/layout.md","_extension":"md"},{"_path":"/design-system/styles/logo","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Logo","description":"The visual representation of vic.gov.au and the Victorian Government.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"vicgovau-logo"},"children":[{"type":"text","value":"vic.gov.au logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vic.gov.au logo is the primary logo used in the design system."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"vic.gov.au logo","src":"/assets/img/Logo-vicgov.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-using-our-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Download logo"}]}]}]},{"type":"element","tag":"h3","props":{"id":"clear-space"},"children":[{"type":"text","value":"Clear space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The clear space for the vic.gov.au logo is 100% of the height of the ‘V’ across all applications."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Clear space visual","src":"/assets/img/Logo-vicgov-Clear-Space.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"co-branding"},"children":[{"type":"text","value":"Co-branding"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where the vic.gov.au logo appears next to another logo, it should be:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"centred vertically"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a minimum distance of 16px"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a divider line."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Co-branded visual","src":"/assets/img/Logo-vicgov-cobrand.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"sizing"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vic.gov.au logo should be 16px in height on all screens."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"No modification"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't change the logo. This includes changing its colour, adding effects, or altering its shape."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helps to maintain the integrity and consistency of the logo."}]}]},{"type":"element","tag":"h3","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always add alternative text to the logo. This is for screen reader users."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"victoria-state-government-logo"},"children":[{"type":"text","value":"Victoria State Government logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Victorian State Government logo is the secondary logo used in the design system. It’s used in the footer."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Victoria State Government logo","src":"/assets/img/Logo-StateGov.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-using-our-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Download logo"}]}]}]},{"type":"element","tag":"h3","props":{"id":"clear-space-1"},"children":[{"type":"text","value":"Clear space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The clear space for the Victorian State Government logo is at least 20% the height."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Clear space visual","src":"/assets/img/Logo-StateGovClearSpace.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"co-branding-1"},"children":[{"type":"text","value":"Co-branding"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where the Victorian State Government logo appears next to another logo, it should be:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"centred vertically"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a distance of at least 50% the height of the Victorian State Government logo."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Co-branded visual","src":"/assets/img/Logo-StateGov-cobrand.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"sizing-1"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Victorian State Government logo should be 42px in height on all screens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Victorian State Government logo where size permits. But, at times, we need to use a smaller logo depending on the application:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"VIC only logo (favicons only)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed these logos to ensure accessibility and clarity at all sizes."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"co-branding-logo"},"children":[{"type":"text","value":"Co-branding logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/primary-navigation/"},"children":[{"type":"text","value":"primary navigation"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/design-system/components/footer/"},"children":[{"type":"text","value":"footer"}]},{"type":"text","value":" for size requirements."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"vicgovau-logo","depth":2,"text":"vic.gov.au logo","children":[{"id":"clear-space","depth":3,"text":"Clear space"},{"id":"co-branding","depth":3,"text":"Co-branding"},{"id":"sizing","depth":3,"text":"Sizing"},{"id":"accessibility","depth":3,"text":"Accessibility"}]},{"id":"victoria-state-government-logo","depth":2,"text":"Victoria State Government logo","children":[{"id":"clear-space-1","depth":3,"text":"Clear space"},{"id":"co-branding-1","depth":3,"text":"Co-branding"},{"id":"sizing-1","depth":3,"text":"Sizing"}]},{"id":"co-branding-logo","depth":2,"text":"Co-branding logo"}]}},"_type":"markdown","_id":"content:design-system:4.styles:logo.md","_source":"content","_file":"design-system/4.styles/logo.md","_extension":"md"},{"_path":"/design-system/styles/motion","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Motion","description":"Motion gradually changes an element from one state to another. It can also indicate an interaction.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use motion with a purpose in mind. This could be to draw attention to important elements or to provide feedback to users."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each animation needs at least these four parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Trigger — what causes the animation to happen (gestures, time, etc.)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Duration — how long should the transition take."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Easing — how an element transitions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Property — the characteristic of the element transitioning (position, opacity, scale, etc.)."}]}]},{"type":"element","tag":"h2","props":{"id":"duration-speed"},"children":[{"type":"text","value":"Duration (speed)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The duration of motion should be consistent throughout. Use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"shorter durations for more subtle motions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"longer durations for more significant or complex motions."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A general rule of thumb is:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"0.06-0.2s for simple interface movements"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"up to 0.5s for more complex or larger movements."}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Time"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"60 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"60ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"120 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"120ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"160 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"160ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"200 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"200ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"240 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"240ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"300 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"300ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-7"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"360 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"360ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"420 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"420ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-9"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"500 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"500ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-10"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"easing"},"children":[{"type":"text","value":"Easing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Definitions:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-in: slow at the beginning, fast/abrupt at the end."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-out: fast/abrupt at the beginning, slow at the end."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When to use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-in: when things are moving "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"out."}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-out: when things are moving "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"in."}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage"},{"id":"duration-speed","depth":2,"text":"Duration (speed)"},{"id":"easing","depth":2,"text":"Easing"}]}},"_type":"markdown","_id":"content:design-system:4.styles:motion.md","_source":"content","_file":"design-system/4.styles/motion.md","_extension":"md"},{"_path":"/design-system/styles/spacing","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Spacing","description":"In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We use a spacing system in a 4-pixel grid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It helps to create a visual hierarchy and organises page content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 4px framework creates consistent spacing relationships and alignment across breakpoints. This is crucial for good UI design."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Size"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"4px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"8px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"12px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"20px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"28px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-7"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-9"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"48px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-10"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"56px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-11"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-12"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-13"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"120px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-14"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For page level, component and content spacing see "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/layout/"},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:4.styles:spacing.md","_source":"content","_file":"design-system/4.styles/spacing.md","_extension":"md"},{"_path":"/design-system/styles/typography","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Typography","description":"Type styles are used to present content clearly.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"font"},"children":[{"type":"text","value":"Font"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"'VIC' is the brand font to be used across all Victorian Government communications. This creates a distinct but consistent look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is free to download from "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-fonts","rel":["nofollow"]},"children":[{"type":"text","value":"vic.gov.au"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use VIC font. The Ripple Design System only uses ‘Regular’ and ‘Bold’ weights of VIC font."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As VIC is a custom font, it's recommended to use Web Safe Font as a fallback when declaring your font stack. The preferred fallback font for the Ripple Design System is Arial."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Font Family"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"VIC"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"VIC, Arial, Helvetica, sans-serif"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-type-font-family"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"type-styles"},"children":[{"type":"text","value":"Type Styles"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the Ripple Design System there are two type sets, one for fixed use and one for fluid (responsive) use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The fixed type set uses fixed sizes. This means they use the <991 fluid styles, but do not respond."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The fluid type set has two fixed sizes. These both respond at certain breakpoints for larger or smaller styles."}]}]},{"type":"element","tag":"h3","props":{"id":"headings"},"children":[{"type":"text","value":"Headings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headings have both fluid and fixed sets. Headings are bold by default for emphasis and to create contrast."}]},{"type":"element","tag":"h4","props":{"id":"fluid"},"children":[{"type":"text","value":"Fluid"}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]},{\"style\":[\"Heading 2\",{\"values\":[{\"Font size\":\"24px / 32px\"},{\"Line height\":\"32px / 40px\"},{\"Letter spacing\":\"1.6% / 1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2\"]},{\"style\":[\"Heading 3\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3\"]},{\"style\":[\"Heading 3 Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight\"]},{\"style\":[\"Heading 4\",{\"values\":[{\"Font size\":\"16px / 20px\"},{\"Line height\":\"24px / 28px\"},{\"Letter spacing\":\"1.92% / 1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4\"]}]"},"children":[]},{"type":"element","tag":"h4","props":{"id":"fixed"},"children":[{"type":"text","value":"Fixed"}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1 Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"36px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-fixed\"]},{\"style\":[\"Heading 1 Highlight Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"44px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight-fixed\"]},{\"style\":[\"Heading 2 Fixed\",{\"values\":[{\"Font size\":\"24px\"},{\"Line height\":\"32px\"},{\"Letter spacing\":\"1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2-fixed\"]},{\"style\":[\"Heading 3 Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-fixed\"]},{\"style\":[\"Heading 3 Highlight Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight-fixed\"]},{\"style\":[\"Heading 4 Fixed\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4-fixed\"]}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"paragraph"},"children":[{"type":"text","value":"Paragraph"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default paragraph font size is 16px on all screens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The majority of your body copy should use the standard 16px paragraph size."}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Paragraph Large\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large\"]},{\"style\":[\"Paragraph Large Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter Spacing\":\"1.8%\"}]},\"rpl-type-p-large-fixed\"]},{\"style\":[\"Paragraph Large Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large-highlight\"]},{\"style\":[\"Paragraph\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p\"]},{\"style\":[\"Paragraph Small\",{\"values\":[{\"Font size\":\"14px\"},{\"Line height\":\"20px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p-small\"]}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"lists"},"children":[{"type":"text","value":"Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use lists to make blocks of text easier to read, and to break information into manageable chunks."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"List styles are based on rpl-type-p with extra spacing."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Margin Top"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Paragraph Spacing"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Item Spacing"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Indent Amount"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-9"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"unordered-lists"},"children":[{"type":"text","value":"Unordered Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unordered lists allow for two nested levels which are styled as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 1 - bullet"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 2 - dash"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of an unordered list","src":"/assets/img/unordered-list.png"},"children":[]},{"type":"element","tag":"h4","props":{"id":"ordered-lists"},"children":[{"type":"text","value":"Ordered Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use numbered lists instead of bulleted lists when the order of the items is relevant."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ordered lists allow for three nested levels which are styled as"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 1 - numbers"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 2 - alphabet"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 3 - roman numerals."}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of an ordered list","src":"/assets/img/ordered-list.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"text-alignment"},"children":[{"type":"text","value":"Text Alignment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should usually left-align body copy that’s read left to right. Right-aligned body copy can be hard for users to find and read when they magnify their screen."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do not ‘justify’ blocks of body copy so that they’re aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read."}]},{"type":"element","tag":"h3","props":{"id":"font-weight"},"children":[{"type":"text","value":"Font weight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to avoid bold. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Acomparison between regular text and bold text","src":"/assets/img/font-weight.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"links"},"children":[{"type":"text","value":"Links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"A visual example of a link within regular text","src":"/assets/img/link.png"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"list-of-variables"},"children":[{"type":"text","value":"List of variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All values are stored as variables nested in the type variable."}]},{"type":"element","tag":"h3","props":{"id":"type-size"},"children":[{"type":"text","value":"Type size"}]},{"type":"element","tag":"docs-type-table","props":{"type":"size"},"children":[]},{"type":"element","tag":"h3","props":{"id":"line-height"},"children":[{"type":"text","value":"Line Height"}]},{"type":"element","tag":"docs-type-table","props":{"type":"lh"},"children":[]},{"type":"element","tag":"h3","props":{"id":"letter-spacing"},"children":[{"type":"text","value":"Letter Spacing"}]},{"type":"element","tag":"docs-type-table","props":{"type":"ls"},"children":[]},{"type":"element","tag":"h3","props":{"id":"font-weights"},"children":[{"type":"text","value":"Font Weights"}]},{"type":"element","tag":"docs-type-table","props":{"type":"weight"},"children":[]},{"type":"element","tag":"h3","props":{"id":"list-styling"},"children":[{"type":"text","value":"List Styling"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Style"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Level 1"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Level 2"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Level 3"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Unordered list"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"• (filled circle)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"- (dash)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Ordered List"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1. (numbers)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"a. (letters)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"i. (roman numerals)"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"font","depth":2,"text":"Font"},{"id":"type-styles","depth":2,"text":"Type Styles","children":[{"id":"headings","depth":3,"text":"Headings"},{"id":"paragraph","depth":3,"text":"Paragraph"},{"id":"lists","depth":3,"text":"Lists"},{"id":"text-alignment","depth":3,"text":"Text Alignment"},{"id":"font-weight","depth":3,"text":"Font weight"},{"id":"links","depth":3,"text":"Links"}]},{"id":"list-of-variables","depth":2,"text":"List of variables","children":[{"id":"type-size","depth":3,"text":"Type size"},{"id":"line-height","depth":3,"text":"Line Height"},{"id":"letter-spacing","depth":3,"text":"Letter Spacing"},{"id":"font-weights","depth":3,"text":"Font Weights"},{"id":"list-styling","depth":3,"text":"List Styling"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:typography.md","_source":"content","_file":"design-system/4.styles/typography.md","_extension":"md"},{"_path":"/design-system/components/accordion","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Accordion","description":"The Accordion component is a panel designed to save space by hiding and revealing content as required.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use accordions only if it will benefit the user. You should have evidence of this."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using accordions will allow users to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"view related sections of content quickly"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"choose which content isn’t relevant to them by showing or hiding sections."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always test accordions with users first. Depending on what the user needs, hiding content could present problems."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill the entire width of the content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Embed into the body content area of any landing page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the 'numbered' variant when a sequential order is important."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include links and format text in accordions, as required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to conceal content that may only apply to specific users who can choose to show or hide content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make sure accordion headings are descriptive and succinct."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a single accordion."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid putting all page content into accordions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use accordions for important information all users need to read."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Putting accordions in accordions can confuse the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use an accordion if doing so will slow the page load time."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't disable sections."}]}]},{"type":"element","tag":"h3","props":{"id":"collapse-allexpand-all"},"children":[{"type":"text","value":"Collapse all/Expand all"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The other option is to remove the accordions and display the content without them."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The accordion has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"numbered."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]},{"type":"element","tag":"h3","props":{"id":"numbered"},"children":[{"type":"text","value":"Numbered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the numbered variant when it is important the content is read in sequential order."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion&args=numbered:true"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Accordions use colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"represent interactions such as hover and active states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"give prominence to the active displayed content section."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"},{"id":"collapse-allexpand-all","depth":3,"text":"Collapse all/Expand all"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"numbered","depth":3,"text":"Numbered"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:accordion.md","_source":"content","_file":"design-system/5.components/accordion.md","_extension":"md"},{"_path":"/design-system/components/acknowledgment","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Acknowledgement","description":"The Acknowledgement component pays respect to the First Peoples of Victoria.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Acknowledgement of Traditional Owners message:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"displays alongside the Aboriginal and Torres Strait Islander flags"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is used in the footer."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-acknowledgement--acknowledgement"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use this component to display the Acknowledgement of Traditional Owners message."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do not change the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Aboriginal and Torres Strait Islander flags"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Acknowledgement of Traditional Owners wording."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:acknowledgment.md","_source":"content","_file":"design-system/5.components/acknowledgment.md","_extension":"md"},{"_path":"/design-system/components/alert","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Alert","description":"The Alert component display required actions or important messages to users.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts attract a user's attention with important messages or required actions. They appear at the top of pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts are:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"intrusive by design"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"created on purpose"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dismissible by a user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"not triggered by user action or back-end event."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--information"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use an alert if its message or action applies to an entire product or site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write the alert in plain language that's clean and concise to minimise a user's cognitive load."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If the user needs more information or to complete an action, use link text for the call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place the alert at the top of the screen before the header."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use the critical alert setting for messages or actions that warrant it."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit actions to one per alert banner."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use an alert if its message applies only to that feature or page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alerts shouldn't cover other components, only pushing down page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use alerts for actions initiated by the user or backend."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An alert’s styling is according to its meaning and uses semantic colours."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alert colours include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"grey for general information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"orange for a minor warning"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"red for a critical error or expected dangerous event."}]}]},{"type":"element","tag":"h3","props":{"id":"information"},"children":[{"type":"text","value":"Information"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate general information to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--information"},"children":[]},{"type":"element","tag":"h3","props":{"id":"warning"},"children":[{"type":"text","value":"Warning"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate a minor warnings to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--warning"},"children":[]},{"type":"element","tag":"h3","props":{"id":"critical"},"children":[{"type":"text","value":"Critical"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate a critical error has occurred or dangerous event is expected to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--danger"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"alert-ordering"},"children":[{"type":"text","value":"Alert ordering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So that users view alerts in order of importance, they appear in priority order:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Critical."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Warning."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Information."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--stacked"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"information","depth":3,"text":"Information"},{"id":"warning","depth":3,"text":"Warning"},{"id":"critical","depth":3,"text":"Critical"}]},{"id":"alert-ordering","depth":2,"text":"Alert ordering"}]}},"_type":"markdown","_id":"content:design-system:5.components:alert.md","_source":"content","_file":"design-system/5.components/alert.md","_extension":"md"},{"_path":"/design-system/components/block-quote","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Block quote","description":"The Block quote component adds emphasis to a quote.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use block quotes to emphasise:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"important information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"excerpts from a source."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--blockquote"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use text in block quotes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put all the quoted text inside opening and closing quotation marks (' ')."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include optional author metadata."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"You can feature more than one quote by a single author."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in content sections."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not repeat metadata across different quotes."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The block quote uses colour to add subtle visual prominence."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--blockquote"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:block-quote.md","_source":"content","_file":"design-system/5.components/block-quote.md","_extension":"md"},{"_path":"/design-system/components/breadcrumb","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Breadcrumb","description":"The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A breadcrumb displays the parent page, icons and the current page."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Parent page: this links to the page above the current page in the information architecture."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Current page: this is the page the user is currently on."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-breadcrumbs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display the breadcrumb at the top left of a page, below the main navigation but above the page title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always start the breadcrumb with the parent page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always end the breadcrumb with the current page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Truncate longer names if you've reached the maximum amount of links."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The breadcrumb does not replace primary navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use the breadcrumb to show progress through a linear journey."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"how-the-breadcrumb-works"},"children":[{"type":"text","value":"How the Breadcrumb works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On devices with a page resolution under 768px, the breadcrumb displays the parent link only."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Breadcrumb uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"represent possible interactions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-breadcrumbs--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"how-the-breadcrumb-works","depth":2,"text":"How the Breadcrumb works"},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:breadcrumb.md","_source":"content","_file":"design-system/5.components/breadcrumb.md","_extension":"md"},{"_path":"/design-system/components/button","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Button","description":"The Button component helps a user to carry out an action.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight a key call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"So long as it also helps users carry out its identified action, a button can link to internal and external pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add to any basic content component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc."}]}]},{"type":"element","tag":"h3","props":{"id":"when-not-to-use"},"children":[{"type":"text","value":"When not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit primary buttons to one per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 4 words in the button label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid using inactive buttons."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Limit using buttons to one per page. The more you use them, the less a user will notice them."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Buttons are styled for their specific purposes. Button variants include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"filled"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"outlined"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"white"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"elevated"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"destructive."}]}]},{"type":"element","tag":"h3","props":{"id":"filled"},"children":[{"type":"text","value":"Filled"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the filled variant for primary actions, known as calls to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the primary colour."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than one filled button per page."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A page should only have one call to action, otherwise they lose impact."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Having more than one also results in a dilemma of choice for the user."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"h3","props":{"id":"outlined"},"children":[{"type":"text","value":"Outlined"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The outlined variant is for secondary actions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Like the filled variant, don't use more than one outlined button."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you find you're adding lots of secondary buttons, you may need to simplify your content."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]},{"type":"element","tag":"h3","props":{"id":"white"},"children":[{"type":"text","value":"White"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The white variant is for tertiary actions when an action is less prominent."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It should be obvious that it is lower priority than primary or secondary buttons."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The white variant is styled with an underline by default, to align with links."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This helps meet accessibility requirements and is consistent with other link types."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-white"},"children":[]},{"type":"element","tag":"h3","props":{"id":"elevated"},"children":[{"type":"text","value":"Elevated"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The elevated variant acts as a 'back-to-the-top' button."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value)."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]},{"type":"element","tag":"h3","props":{"id":"destructive"},"children":[{"type":"text","value":"Destructive"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the destructive variant for destructive actions, such as permanently deleting information, across the site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The destructive variant has a semantic meaning and uses semantic colour."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Destructive buttons only work if not used often."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It’s uncommon for most sites to need one."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use the destructive variant if an action has destructive consequences because they are not easy to undo."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-destructive"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"loading-spinner"},"children":[{"type":"text","value":"Loading spinner"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A user may double-click a button because:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"their main operating system uses double click"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they have a slow connection which results in delayed action feedback"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they click the button by accident due to motor impairments like hand tremors."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Clicking a button twice can mean the information gets sent 2 times."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to show the user that their click has worked. For example, show a loading spinner once they've clicked."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--busy-state"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Buttons can be themed in the following 2 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette."}]}]},{"type":"element","tag":"h3","props":{"id":"site-theme"},"children":[{"type":"text","value":"Site theme"}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"https:www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https:www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"neutral-theme"},"children":[{"type":"text","value":"Neutral theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme."}]},{"type":"element","tag":"h4","props":{"id":"outlined-1"},"children":[{"type":"text","value":"Outlined"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-outlined"},"children":[]},{"type":"element","tag":"h4","props":{"id":"white-1"},"children":[{"type":"text","value":"White"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-white"},"children":[]},{"type":"element","tag":"h4","props":{"id":"elevated-1"},"children":[{"type":"text","value":"Elevated"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-elevated"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enhance visual weight and aim to confirm with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG 2.0 Criterion 1.4.1"}]},{"type":"text","value":", Ripple buttons use underlined text by default on white buttons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This underline shows users there is an interaction that they can perform."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-not-to-use","depth":3,"text":"When not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"filled","depth":3,"text":"Filled"},{"id":"outlined","depth":3,"text":"Outlined"},{"id":"white","depth":3,"text":"White"},{"id":"elevated","depth":3,"text":"Elevated"},{"id":"destructive","depth":3,"text":"Destructive"},{"id":"loading-spinner","depth":3,"text":"Loading spinner"}]},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"site-theme","depth":3,"text":"Site theme"},{"id":"neutral-theme","depth":3,"text":"Neutral theme"}]},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:button.md","_source":"content","_file":"design-system/5.components/button.md","_extension":"md"},{"_path":"/design-system/components/call-to-action","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Call to action","description":"The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure content is relevant to the action or destination."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Embed in any body content area of a content page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with a relevant image or graphic."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without an image or graphic."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload it with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use when a large amount of text is needed for more context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use other interactive elements, like links."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The call to action card adopts its theming from your button component’s settings."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose neutral button for your site, the call to action card will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:call-to-action.md","_source":"content","_file":"design-system/5.components/call-to-action.md","_extension":"md"},{"_path":"/design-system/components/callout","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Callout","description":"The Callout component is a text excerpt that draws attention to specific or important content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use callouts to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"draw a user's attention"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add emphasis to the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide a user with more information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight important information vital to the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place a callout in a prominent position on the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with text only."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only feature one callout per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use no more than 2 paragraphs per callout."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't put the callout at the bottom of the page."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To allow for different levels of emphasis, a callout has 2 styles:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accent"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral."}]}]},{"type":"element","tag":"h3","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout-neutral"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The accent variant uses the site accent colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add visual prominence to the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"aid hierarchy in the content area."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enhance visual weight and aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.0 Criterion 1.4.1"}]},{"type":"text","value":", Ripple callouts use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a thick left-hand border"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"background colours"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"padding."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"accent","depth":3,"text":"Accent"},{"id":"neutral","depth":3,"text":"Neutral"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:callout.md","_source":"content","_file":"design-system/5.components/callout.md","_extension":"md"},{"_path":"/design-system/components/campaign-banner","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Campaign banner","description":"The Campaign banner component draws a user's attention to promoted content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use campaign banners to promote content. They include a feature image and have an optional call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Campaign banners can be used at the top or bottom of a page, under the header or above the footer."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Promote a campaign or related page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional call to action."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use an unrelated image."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The campaign banner has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"featured, which appears at the top of the page, below the header"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image inset, which appears at the bottom of the page above the footer."}]}]},{"type":"element","tag":"h3","props":{"id":"featured"},"children":[{"type":"text","value":"Featured"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is an option to include metadata for the image if required."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"image-inset"},"children":[{"type":"text","value":"Image inset"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--secondary-image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The campaign banner adopts its theming from the button component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"featured","depth":3,"text":"Featured"},{"id":"image-inset","depth":3,"text":"Image inset"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:campaign-banner.md","_source":"content","_file":"design-system/5.components/campaign-banner.md","_extension":"md"},{"_path":"/design-system/components/card","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Card","description":"The Card component shows content about another page, event or topic. They help users find relevant information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use cards to help users find the right information quickly."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can combine a variety of content, including text, media and links."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure headings are direct and summaries are concise."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards can be made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"headline, to provide a snapshot of the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary, to provide further details"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual elements, to provide visual prominence."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs."}]},{"type":"element","tag":"h4","props":{"id":"metadata"},"children":[{"type":"text","value":"Metadata"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All cards have optional metadata. Use metadata to display a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date - how old the content is, for when this information is important to the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status - where a component or action is sitting within a process."}]}]},{"type":"element","tag":"h4","props":{"id":"visual-elements"},"children":[{"type":"text","value":"Visual elements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visual elements in cards allow for different content to stand out. They can also provide additional context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elements that can provide visual prominence include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a highlight border"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a blocked headline type."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use visual elements carefully. Only use a visual element if it:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is meaningful to the user journey"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"supports what is already in the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can help the user differentiate content from other content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can be easily identified"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is informative and not only decorative."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Group together cards with similar content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only a single style of card within a set of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the content clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use one piece of information per card."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't mix different card variants in a group."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a single card only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never repeat content in a group of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload cards with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include other interactive elements, like links, inside the card."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A card has 2 main variants and is styled for its purpose."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Promotion Cards, which is used to highlight important content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Navigation Cards, which is used for larger groups of content."}]}]},{"type":"element","tag":"h3","props":{"id":"promotion-cards"},"children":[{"type":"text","value":"Promotion cards"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards stack in a grid when used in a collection."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards have 4 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image full bleed"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar."}]}]},{"type":"element","tag":"h4","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h4","props":{"id":"highlight"},"children":[{"type":"text","value":"Highlight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The highlight variant gives the card more visual prominence. Use this to guide users to the content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:Highlight","theme":"docsTheme2"},"children":[]},{"type":"element","tag":"h4","props":{"id":"image-full-bleed"},"children":[{"type":"text","value":"Image full bleed"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image full bleed variant gives the option to add a relevant image to grab the user’s attention."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo"},"children":[]},{"type":"element","tag":"h4","props":{"id":"avatar"},"children":[{"type":"text","value":"Avatar"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--avatar"},"children":[]},{"type":"element","tag":"h3","props":{"id":"navigation-cards"},"children":[{"type":"text","value":"Navigation cards"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Navigation cards are useful for displaying and breaking down large groups of content options."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On landing pages, they are used to highlight all the different sections of that site."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Navigation cards fill the full width of the content area. They will always stack vertically."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 3 variants of navigation cards:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image inset"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heading highlight."}]}]},{"type":"element","tag":"h4","props":{"id":"standard-1"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h4","props":{"id":"image-inset"},"children":[{"type":"text","value":"Image inset"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A related image can increase a card's visual prominence."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav"},"children":[]},{"type":"element","tag":"h4","props":{"id":"heading-highlight"},"children":[{"type":"text","value":"Heading highlight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To draw attention to the heading and highlight the content, use a heading highlight."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:Heading+highlighted"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards use colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interaction states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"adding visual prominence to some elements."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:Highlight"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:Heading+highlighted"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"promotion-cards","depth":3,"text":"Promotion cards"},{"id":"navigation-cards","depth":3,"text":"Navigation cards"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:card.md","_source":"content","_file":"design-system/5.components/card.md","_extension":"md"},{"_path":"/design-system/components/carousel","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Carousel","description":"The Carousel component is a set of related cards that users can side-scroll through.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a carousel to let users browse through a set of up to 9 cards with pagination controls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The content in the carousel should be related in some way. This helps users to find related and relevant content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-card-carousel--breakpoints"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use a combination of promotion cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when wanting to display a collection of cards with related content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add to any page type."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include with an accompanying title to give context to users."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use more than 9 cards or fewer than 3."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with navigation or other card types."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The carousel adopts its theming from the card and pagination components."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-card-carousel--breakpoints"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:carousel.md","_source":"content","_file":"design-system/5.components/carousel.md","_extension":"md"},{"_path":"/design-system/components/category-grid","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Category grid","description":"The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--category-grid"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as a collection of cards only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with icons or pictograms."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Be careful not to include too many cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use unique media items per card."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use a single card only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t repeat content in the same a group of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include with other interactive elements like links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without a media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use on pages with a sidebar."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The category grid uses colour to indicate interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--category-grid"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:category-grid.md","_source":"content","_file":"design-system/5.components/category-grid.md","_extension":"md"},{"_path":"/design-system/components/checkbox","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Checkbox","description":"The Checkbox component lets users select one or more options from a list.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use checkboxes to allow users to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"select one or more list options"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"toggle one option on or off."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use checkboxes with a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"form label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"checkbox label."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkboxes should always have a form and checkbox label."}]},{"type":"element","tag":"h4","props":{"id":"single-checkbox"},"children":[{"type":"text","value":"Single checkbox"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented."}]},{"type":"element","tag":"h4","props":{"id":"checkbox-group"},"children":[{"type":"text","value":"Checkbox group"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use checkboxes for lists with more than one selectable option."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use checkboxes for a single selectable list option, use radio buttons for this."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkboxes have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: nothing is selected and the question has options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you like summer, winter, autumn, and/or spring'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: nothing is selected and the question does not have options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select your favourite season'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--invalid"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A checkbox uses colour for interactive states."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:checkbox.md","_source":"content","_file":"design-system/5.components/checkbox.md","_extension":"md"},{"_path":"/design-system/components/chip","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Chip","description":"The Chip component is an interactive element to draw a user’s user attention to a category.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying multiple chips together, place them in a row."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include keywords."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any content page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Link through to the topic page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use as a heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include more than 4 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without an interaction or link."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"chips-or-buttons"},"children":[{"type":"text","value":"Chips or buttons?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While chips and buttons both prompt calls to action, they are different."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Multiple chips should all sit together. Buttons should sit separately from each other."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chips react to their context, but buttons are fixed and remain static."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chips convey forking paths in a user experience, while buttons show a linear step."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chip has a default and reverse variant, allowing flexible use across a range of backgrounds."}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--reversed"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"chips-or-buttons","depth":2,"text":"Chips or buttons?"},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:chip.md","_source":"content","_file":"design-system/5.components/chip.md","_extension":"md"},{"_path":"/design-system/components/contact-us","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Contact us","description":"The Contact us component is a list of contact details and links to help the user get in touch with you.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contact us details can include a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contact person"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"phone number"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"social media account."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-contact-us--contact-us"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Provide users with additional contact details relevant to the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display in the sidebar of the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you add social media accounts to the contact us component, don’t add the social share component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use unrelated contact details or social media accounts."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contact us uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual prominence for key information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"link icons."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-contact-us--contact-us"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:contact-us.md","_source":"content","_file":"design-system/5.components/contact-us.md","_extension":"md"},{"_path":"/design-system/components/date-input","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Date input","description":"The Date input component helps users enter a date.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Date input has 3 fields: day, month and year."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-to-use-this-component"},"children":[{"type":"text","value":"How to use this component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use an date input with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include specific formatting examples or requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use date inputs with a label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write short and concise labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to show the expected date format, for example, ‘07 11 2022’."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If it’s not likely users will know the exact date, don’t use date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without a form label or hint text specifying the expected date format."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions or important examples."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The date input has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for a date input, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: whole date field is empty"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Enter your dog’s birthday'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: some of date field is empty or incomplete"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must include a [name of empty or incomplete field]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s birthday must include a month'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: impossible date entered"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be a real date’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s birthday must be a real date'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: future date given when past date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be in the past’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s first playdate must be in the past'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: future date given when today or past date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be today or in the past’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s first beach visit must be today or in the past'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: past date given when future date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be in the future’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next raincoat purchase must be in the future'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: past date given when today or future date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be today or in the future’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next zoomies must be today or in the future'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not on or after another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not after another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be after [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not the same as or before another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be on or before [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next hike must be on or before 2 January 2025'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not before another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be before [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not between 2 other dates"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘The date must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘The date must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘The date must only include numbers'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--invalid"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-to-use-this-component","depth":3,"text":"How to use this component"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:date-input.md","_source":"content","_file":"design-system/5.components/date-input.md","_extension":"md"},{"_path":"/design-system/components/detail-list","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Detail list","description":"The Detail list component shows a list of key information to users.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each row of the detail list comprises a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"label, a descriptive or informative label for your content, for example, 'Location'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"content, the piece of information itself, for example, 'East Gippsland'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The detail list is used to display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata, for example, ‘Published date' (which shows as '22 March 2023’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status, for example of a program or grant."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the detail list for simple information. For data or complex information, consider using a table."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-description-list--with-link"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use single words only for the label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a link if you need to."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the summary content and labels clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align all summary content to the longest label."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use labels for unrelated summary content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it to surface information that is not important to users."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with complex or long form content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a link is present, the detail list uses the link colour for interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-description-list--with-link"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:detail-list.md","_source":"content","_file":"design-system/5.components/detail-list.md","_extension":"md"},{"_path":"/design-system/components/dropdown","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Dropdown","description":"The Dropdown component lets users see a list of available options and then select one or more options.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use this component to let users select one or more items from a dropdown list of available items."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A dropdown is often called a 'select'."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--single-select-many-items"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a dropdown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use a dropdown with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"h4","props":{"id":"single-select"},"children":[{"type":"text","value":"Single select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single select dropdown is used when users can select only a single option."}]},{"type":"element","tag":"h4","props":{"id":"multi-select"},"children":[{"type":"text","value":"Multi select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a dropdown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the dropdown"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"placeholder-text"},"children":[{"type":"text","value":"Placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose."}]},{"type":"element","tag":"h4","props":{"id":"selected-value"},"children":[{"type":"text","value":"Selected value"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The selected value shows the option a user has selected."}]},{"type":"element","tag":"h4","props":{"id":"text-overflow"},"children":[{"type":"text","value":"Text overflow"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When the field label and menu text are too long for the available horizontal space, they wrap to form another line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The field text itself truncates at the end, but the text can be shown in full in the menu."}]},{"type":"element","tag":"h4","props":{"id":"menu-height"},"children":[{"type":"text","value":"Menu height"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The dropdown menu has a maximum height of 288px or 6 single text-line options."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as a last resort component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A label must be used with a dropdown."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure dropdown item descriptions are short and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never set the form to submit when a dropdown item is selected."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write long menu option descriptions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Descriptions should not wrap over a single line."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Icons or decorative images should never be used in dropdowns."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use a dropdown without a label as it confuses users and is not accessible."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdown has 2 main variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"single select"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"multi select."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both variants have default and reverse sub-variants."}]},{"type":"element","tag":"h3","props":{"id":"single-select-1"},"children":[{"type":"text","value":"Single select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single select dropdown is used when users can select only a single option."}]},{"type":"element","tag":"h4","props":{"id":"making-a-selection"},"children":[{"type":"text","value":"Making a selection"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Placeholder text is shown by default in the field when the dropdown is closed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interacting with a closed field opens a menu of options."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The dropdown closes when an option is chosen."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selection option replaces the placeholder text, but also remains in place if the menus is opened."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value."}]}]},{"type":"element","tag":"h4","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--single-select-many-items"},"children":[]},{"type":"element","tag":"h4","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"multi-select-1"},"children":[{"type":"text","value":"Multi select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can choose multiple items in a list or to filter information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If using a multi select dropdown, always tell the user how many menu options they can select."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'."}]},{"type":"element","tag":"h4","props":{"id":"making-a-selection-1"},"children":[{"type":"text","value":"Making a selection"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Placeholder text is shown by default in the field when the dropdown is closed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When the menu is opened, each option shows a checkbox input to the left of its text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When options are being selected, the menu stays open."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu."}]}]},{"type":"element","tag":"h4","props":{"id":"default-1"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--multi-select-many-items"},"children":[]},{"type":"element","tag":"h4","props":{"id":"reverse-1"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--reverse-variant&args=multiple:true"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for a dropdown, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"If nothing is selected and the question has options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you like summer, winter, autumn, and/or spring.'"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"If nothing is selected and the question does not have options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select "},{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":"’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select your favourite season'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"add storybook"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdown uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--multi-select-many-items"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"single-select-1","depth":3,"text":"Single select"},{"id":"multi-select-1","depth":3,"text":"Multi select"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:dropdown.md","_source":"content","_file":"design-system/5.components/dropdown.md","_extension":"md"},{"_path":"/design-system/components/file","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"File","description":"The File component shows a link, with additional metadata, and lets a user download a file attachment.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"File is made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the file name"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata including file type, size and updated date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a document description."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-file--with-caption"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any page type."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include in page content areas only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional description."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add optional updated data if it’s relevant to users."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include metadata."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with a non-descriptive file name."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"File uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating to users that they may have an action to complete"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--file"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:file.md","_source":"content","_file":"design-system/5.components/file.md","_extension":"md"},{"_path":"/design-system/components/footer","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Footer","description":"The Footer component helps help users find information at the bottom of a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"copyright"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contact information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"links to other pages within the website"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"social media links."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer is made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional section links, which help avoid dead ends by giving users a way to continue their journey through:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"additional links (internal and external)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bypassing main navigation"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional social links, which can be used to link to social media accounts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"core site links, which must always be used and include the privacy statement, contact information and terms of use"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an Acknowledgement of Traditional Owners message (an acknowledgement component)."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional supporting logo relevant to the site content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use a consistently-themed footer across all pages of your site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the optional neutral theme."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional image credit for the header image."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t alter the required links in the core section of the footer."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t change the text in the acknowledgement component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with links that are not relevant to your organisation."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can theme the footer in 3 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom colour palette (see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"h3","props":{"id":"site-colour-palette"},"children":[{"type":"text","value":"Site colour palette"}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"neutral-colour-palette"},"children":[{"type":"text","value":"Neutral colour palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--neutral"},"children":[]},{"type":"element","tag":"h3","props":{"id":"custom-colour-palette"},"children":[{"type":"text","value":"Custom colour palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is only recommended as a last resort."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"component specific theming guidance for designers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story","theme":"docsTheme3"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"site-colour-palette","depth":3,"text":"Site colour palette"},{"id":"neutral-colour-palette","depth":3,"text":"Neutral colour palette"},{"id":"custom-colour-palette","depth":3,"text":"Custom colour palette"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:footer.md","_source":"content","_file":"design-system/5.components/footer.md","_extension":"md"},{"_path":"/design-system/components/form-alert","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Form alert","description":"The Form alert component shows the user the outcome of a form submission or validation.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The form alert appears at the top of the form and the user is automatically scrolled to it on submission."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 types of alerts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"error."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--error"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Show the validation outcome of a form submission."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If successful, use with relevant success message."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a custom error summary if required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make your error messages clear and concise."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use the form alert without providing a summary of errors (if a submission is invalid)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not restyle with other colours or icons."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Form alert has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"error."}]}]},{"type":"element","tag":"h3","props":{"id":"success"},"children":[{"type":"text","value":"Success"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--success"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If one or more form validation errors occur, they must always be presented using:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the error summary alert"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"individual error messages next to each form field with an error (inline)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make your error messages clear and concise."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Inline error messages show a user where the errors happened."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On submission of the form, you must:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"move the keyboard focus to the error summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"include the heading ‘There is a problem’ in the error summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"link to all answers with validation errors"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"write error messages for the summary alert exactly the same way they are worded for inline error messages."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page so screen readers read it out as soon as possible."}]},{"type":"element","tag":"h4","props":{"id":"linking-from-the-error-summary-to-each-answer"},"children":[{"type":"text","value":"Linking from the error summary to each answer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each error must be linked in the error summary to the form field (answer) causing it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--error"},"children":[]},{"type":"element","tag":"h4","props":{"id":"error-messages"},"children":[{"type":"text","value":"Error messages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/input-field/"},"children":[{"type":"text","value":"input field"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/text-area/"},"children":[{"type":"text","value":"text area"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/date-input/"},"children":[{"type":"text","value":"date input"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/checkbox/"},"children":[{"type":"text","value":"checkbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/radio-button/"},"children":[{"type":"text","value":"radio button"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/dropdown/"},"children":[{"type":"text","value":"dropdown"}]},{"type":"text","value":"."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"success","depth":3,"text":"Success"},{"id":"error","depth":3,"text":"Error"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:form-alert.md","_source":"content","_file":"design-system/5.components/form-alert.md","_extension":"md"},{"_path":"/design-system/components/form","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Form","description":"The Form component guides users to give information and consists of a group of related inputs or controls.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Common form components include the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/input-field/"},"children":[{"type":"text","value":"input field component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/text-area/"},"children":[{"type":"text","value":"text area component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/date-input/"},"children":[{"type":"text","value":"date input component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/radio-button/"},"children":[{"type":"text","value":"radio button component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/checkbox/"},"children":[{"type":"text","value":"checkbox component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/dropdown/"},"children":[{"type":"text","value":"dropdown component"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An input field) is for short (single-line) text entry. A text area is for longer text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The user can submit a form when all fields are valid (see "},{"type":"element","tag":"a","props":{"href":"/design-system/components/form-alert/"},"children":[{"type":"text","value":"form alert"}]},{"type":"text","value":")."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"layout"},"children":[{"type":"text","value":"Layout"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give."}]},{"type":"element","tag":"h4","props":{"id":"labels"},"children":[{"type":"text","value":"Labels"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each input must have a label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Placeholder text should not be used as a label."}]},{"type":"element","tag":"h4","props":{"id":"requirement-optional-vs-mandatory"},"children":[{"type":"text","value":"Requirement - optional vs. mandatory"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most fields on a simple form will be required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where possible, don’t include a large number of optional fields."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete an input or text field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the input field"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"placeholder-text"},"children":[{"type":"text","value":"Placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/form/#accessibility"},"children":[{"type":"text","value":"See accessibility"}]},{"type":"text","value":" (below)."}]},{"type":"element","tag":"h4","props":{"id":"error-messages"},"children":[{"type":"text","value":"Error messages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages."}]},{"type":"element","tag":"h4","props":{"id":"buttons"},"children":[{"type":"text","value":"Buttons"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Button labels should say what the button will do when a user interacts with it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure the main action button tells the user when the form is being submitted (see "},{"type":"element","tag":"a","props":{"href":"/design-system/components/button/#loading-spinner"},"children":[{"type":"text","value":"button loading spinner"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button."}]},{"type":"element","tag":"h4","props":{"id":"validation"},"children":[{"type":"text","value":"Validation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Form alert is used to tell the user the outcome of the form validation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the form has been submitted successfully, the success alert will replace the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions."}]},{"type":"element","tag":"h4","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use autocomplete to reduce typing for users."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep to one column."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use top-align labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always mark form fields as ‘required’ or ‘optional’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make calls to action descriptive - state the intent of the action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write short, clear headings and form input labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text (instead of labels) to explain any specifications."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use field length input constraints - for fields with a defined character count like phone numbers and postcodes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t create a form without a submit button."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use an input or control without a form label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid using all caps."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forms use colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-form--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:form.md","_source":"content","_file":"design-system/5.components/form.md","_extension":"md"},{"_path":"/design-system/components/header","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Header","description":"The Header component introduces the purpose and content of a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers include optional content such as introduction text, journey links, a call to action and an introduction banner."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The header can also support a campaign logo if required. This will display above the page title."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-journey-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the header simple and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear calls to action that align with the message or task."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use images that add value to the content and support the message."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include with featured links and buttons to help users perform key tasks."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include an optional campaign logo."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use a mix of reverse and default page title and introduction text styling."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include the same links in the main and introduction banners."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with more than 6 journey links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The header has 3 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All variants can be used with the introduction banner."}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-story"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-journey-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"image"},"children":[{"type":"text","value":"Image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images should not be stretched or too low in resolution. They should also not be complex or include text."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--image-reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"introduction-banner"},"children":[{"type":"text","value":"Introduction banner"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The introduction banner:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can be used to add content and journey links under the page title and introduction section in the main header banner"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"has an optional icon and journey links"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"should contain content relating to the content in the main header."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--intro-with-links"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"interaction-with-other-components"},"children":[{"type":"text","value":"Interaction with other components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The bottom corner shape won't hide if an introduction banner is between the header and campaign banner."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header.","src":"/assets/img/campaign-banner-behaviour.png"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers can be themed in 2 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will also adopt theming from the button component when displaying the call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose neutral button for your site, the header will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-call-to-action"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-journey-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--intro-with-links"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"neutral-theme"},"children":[{"type":"text","value":"Neutral theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--image-neutral"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"image","depth":3,"text":"Image"},{"id":"introduction-banner","depth":3,"text":"Introduction banner"}]},{"id":"interaction-with-other-components","depth":2,"text":"Interaction with other components"},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"neutral-theme","depth":3,"text":"Neutral theme"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:header.md","_source":"content","_file":"design-system/5.components/header.md","_extension":"md"},{"_path":"/design-system/components/in-page-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"In-page navigation","description":"The In-page navigation component sits above a page’s main content and shows a set of links.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The left-hand highlight bar:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separates the component from the page content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"groups the navigation."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-in-page-navigation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use subheadings as indented navigation links from the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't link to other pages, including on external sites."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use colons in the heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it if you have less than 2 navigation links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it with component headings, such as accordion item headings."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple’s theming applies colour to in-page navigation so that the user understands:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"its links and navigation heading relate to each other"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they are deliberately separated from the main content."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-in-page-navigation"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:in-page-navigation.md","_source":"content","_file":"design-system/5.components/in-page-navigation.md","_extension":"md"},{"_path":"/design-system/components/input-field","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Input field","description":"The Input field component lets users input a short amount of text.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use an input field for users to enter text shorter than a single line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input fields can have multiple input types, depending on the need and use case. They have a text input type by default."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input fields can be used for entering:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text: basic text or search terms"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"phone: a telephone number"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"email: an email address"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with an input field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use an input field with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"prefix or suffix text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"prefix or suffix icon."}]}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete an input field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the input field"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"prefix-and-suffixes"},"children":[{"type":"text","value":"Prefix and suffixes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use prefixes and suffixes to help users enter things like currencies and measurements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t rely on prefixes or suffixes alone. Screen readers will not read them out."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a label for input fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to specify helpful information such as:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"expected number format, for example ‘Must be 6 to 8 digits long’"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"minimum and maximum number values, for example ‘Minimum of # and maximum of #’."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the prefix to indicate measurements and categories like currency, for example, '$'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use an input field without a label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t set a minimum or maximum input limit without explicitly saying this in the hint text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The input field has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for an input field, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: empty input"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Enter your name'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or less'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Delivery address must be 56 characters or less'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or more'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Previous employer must be 3 characters or more'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long or too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be between [number] and [number] characters'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Justification must be between 3 and 56 characters'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Reasons must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must only include [list of allowed characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Explanations must only include letters, numbers and commas'."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input field uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:input-field.md","_source":"content","_file":"design-system/5.components/input-field.md","_extension":"md"},{"_path":"/design-system/components/key-dates","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Key dates","description":"The Key dates component shows users a card promoting key dates or events.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--key-dates"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only on landing pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include in a grid of promo cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use once per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use as the last card in the grid."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a summary."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with navigation cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use the key dates card by itself."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with other interactive elements like links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use it to replace a call to action."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The key date card uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add visual prominence to key information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicate an interaction to users."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--key-dates"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:key-dates.md","_source":"content","_file":"design-system/5.components/key-dates.md","_extension":"md"},{"_path":"/design-system/components/media-embed","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Media embed","description":"The Media embed component shows an image or video within the page content, with optional text to give context.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media can be an image or video. Images can display as small, medium or large."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-landscape"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use it with videos, images or complex images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add data when using the complex image variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure the media is the right size so that it displays without error."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only add it to the content section of a page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional image caption and metadata."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include media unrelated to the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid adding interactive elements, like links, to the caption or metadata sections."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a video without closed captions and a transcript."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed has 3 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex media."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on the variant used, you can display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a caption"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a transcript link"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accompanying data."}]}]},{"type":"element","tag":"h3","props":{"id":"image"},"children":[{"type":"text","value":"Image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image variant has 4 display options:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"landscape / 16:9 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"portrait / 3:4 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"square / 1:1 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar / circle."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item."}]},{"type":"element","tag":"h4","props":{"id":"landscape"},"children":[{"type":"text","value":"Landscape"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-landscape"},"children":[]},{"type":"element","tag":"h4","props":{"id":"portrait"},"children":[{"type":"text","value":"Portrait"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-portrait"},"children":[]},{"type":"element","tag":"h4","props":{"id":"square"},"children":[{"type":"text","value":"Square"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-square"},"children":[]},{"type":"element","tag":"h4","props":{"id":"avatar"},"children":[{"type":"text","value":"Avatar"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-avatar"},"children":[]},{"type":"element","tag":"h3","props":{"id":"video"},"children":[{"type":"text","value":"Video"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Videos will always display at a 16:9 ratio."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A 'view transcript' link displays by default. Videos must have both closed captions and a transcript."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include a supporting caption to give extra context to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--video"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex-media"},"children":[{"type":"text","value":"Complex media"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Complex media items contain detail. They include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"infographics"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"graphs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"flowchart"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"maps."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can support media by including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional supporting data such as content or tables"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a view fullscreen link"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a download media link."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Complex media will always display the full image. The media item will display at a predefined max height or width."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When the media is fullscreen, it displays in the media fullscreen component."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--complex-image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--complex-image"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"image","depth":3,"text":"Image"},{"id":"video","depth":3,"text":"Video"},{"id":"complex-media","depth":3,"text":"Complex media"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-embed.md","_source":"content","_file":"design-system/5.components/media-embed.md","_extension":"md"},{"_path":"/design-system/components/media-fullscreen","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Media fullscreen","description":"The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fullscreen view includes the media item's title and caption."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always display the media item max height or width of the content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a title for the media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display the media title and caption if used in the base component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when you need to display a media item fullscreen."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with items that aren't media."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with a completely opaque background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use pagination for one media item only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't crop or hide the media item."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media fullscreen adopts its theming from the pagination component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-fullscreen.md","_source":"content","_file":"design-system/5.components/media-fullscreen.md","_extension":"md"},{"_path":"/design-system/components/media-gallery","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Media gallery","description":"The Media gallery component is a series of images users can side-scroll through.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media gallery combines images and text to give users context within the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media items inside a media gallery will display as either landscape or portrait, at predefined ratios."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include related images only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use at least 2 images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a media title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include an optional caption to help users understand images' context and relevance to the page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any page type."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for decorative purposes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use sensory images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for a single image, instead use the media embed component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with media unrelated to page content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an interaction to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also adopts its theming from the pagination component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-gallery.md","_source":"content","_file":"design-system/5.components/media-gallery.md","_extension":"md"},{"_path":"/design-system/components/media","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Media","description":"The Media component is a container that houses media items to use in other components on a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media to communicate and differentiate specific information through visuals."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media items sit within other components such as cards, or a media gallery."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use images if they help users complete a task. Images can make it easier for some people to understand information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media to combine visual elements with text. This gives your content context and alignment."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-image--image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always get copyright for all media used."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Nest media in other components."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose diverse images that reflect and support the diversity of Victoria."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only media that's relevant to the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text for each media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use appropriate resolution for the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a transcription for all audio content."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use a media item without alt text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use video content without captions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't crop an image without a clear focal point."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The ratios you can use for media include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1:1"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"4:3"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"16:9"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"21:9"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"3:1"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar (circle)."}]}]},{"type":"element","tag":"h3","props":{"id":"copyright-requirements"},"children":[{"type":"text","value":"Copyright requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must get permission (a licence) to use copyright material. This includes images and text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some images are available under an open access licence, such as "},{"type":"element","tag":"a","props":{"href":"https://au.creativecommons.net/","rel":["nofollow"]},"children":[{"type":"text","value":"Creative Commons"}]},{"type":"text","value":". Alt text is also licensed under copyright."}]},{"type":"element","tag":"h3","props":{"id":"file-resolution"},"children":[{"type":"text","value":"File resolution"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image resolution must be appropriate for the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it."}]},{"type":"element","tag":"h3","props":{"id":"focal-point"},"children":[{"type":"text","value":"Focal point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider cropping smaller images more to keep the impact of the original image."}]},{"type":"element","tag":"h3","props":{"id":"media-types"},"children":[{"type":"text","value":"Media types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Multiple types of media can are supported and used to add meaning to content. These include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"photographs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"decorative images"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"charts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"graphs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"maps"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"illustrations or drawings"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audio."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make sure you use the correct media type for the content it is supporting."}]},{"type":"element","tag":"h3","props":{"id":"file-types"},"children":[{"type":"text","value":"File types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following file types are recommended:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"photographs"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"charts/graphs"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"mp4"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audio"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"wav."}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"alternative-text"},"children":[{"type":"text","value":"Alternative text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG 2.0 Criterion 1.1.1"}]},{"type":"text","value":" or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-guidelines-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Brand Victoria guidelines"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/tutorials/images/decision-tree/","rel":["nofollow"]},"children":[{"type":"text","value":"Web Accessibility initiative alt decision tree"}]},{"type":"text","value":" also guides you on whether your image needs alt text or not."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For purely descriptive images, the alt text attribute instead reads: alt=””."}]},{"type":"element","tag":"h4","props":{"id":"what-alt-text-does"},"children":[{"type":"text","value":"What alt text does"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a screen reader can read the alt text aloud"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alt text is shown in the place of ‘broken’ or unloaded images on the page."}]}]},{"type":"element","tag":"h4","props":{"id":"how-to-write-alt-text"},"children":[{"type":"text","value":"How to write alt text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alt text must serve the equivalent purpose of the image itself, by:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using normal punctuation that helps users understand the text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"including the image text in the alt text (for images with text)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more guidance on writing alt text, refer to "},{"type":"element","tag":"a","props":{"href":"https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images","rel":["nofollow"]},"children":[{"type":"text","value":"Alt text, captions and titles for images"}]},{"type":"text","value":" in the Australian Government Style Manual."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"copyright-requirements","depth":3,"text":"Copyright requirements"},{"id":"file-resolution","depth":3,"text":"File resolution"},{"id":"focal-point","depth":3,"text":"Focal point"},{"id":"media-types","depth":3,"text":"Media types"},{"id":"file-types","depth":3,"text":"File types"},{"id":"alternative-text","depth":3,"text":"Alternative text"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:media.md","_source":"content","_file":"design-system/5.components/media.md","_extension":"md"},{"_path":"/design-system/components/option-button","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Option button","description":"The Option button component is a set of buttons to help users filter content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use option buttons to show a set of options a user can choose from to filter content or results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The option button component contains labels showing a user how the filter will work."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never preselect an option button on default. Users might miss that a filter has been automatically applied."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Help users filter content or results."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use short labels only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Order labels in alphabetical order to help users scan quickly."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an ‘apply filter’ button if the option button will be used together with other form elements."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use for a call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with long content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use without a form label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never preselect an individual option button."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Option buttons have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default uses the alphabet as a filter in the option buttons."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]},{"type":"element","tag":"h3","props":{"id":"custom"},"children":[{"type":"text","value":"Custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The custom variant lets you create your own button labels as a filter."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These labels must clearly tell the user what filter will be applied."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--fluid-widths"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"custom","depth":3,"text":"Custom"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:option-button.md","_source":"content","_file":"design-system/5.components/option-button.md","_extension":"md"},{"_path":"/design-system/components/page-action","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Page action","description":"The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Page action component to let users print or download pages and content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The component displays a combination of page-level actions."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Print page: prints the page a user is on."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Print full document: prints all pages in a publication or document, not only the page the user is on."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use page actions for anything other than the above. Don't use it for links."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-page-action--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in a page's sidebar section."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as the first component in the sidebar, above the vertical navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with or without one or more documents."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include metadata with uploaded documents."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"in the content area of a page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"with a document that has content different to the page's content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"for any other user actions."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Page action uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons, to indicate a possible action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-page-action--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:page-action.md","_source":"content","_file":"design-system/5.components/page-action.md","_extension":"md"},{"_path":"/design-system/components/pagination","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Pagination","description":"The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use pagination to help users navigate forwards and backwards through your content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Examples include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search results or guidance divided into multiple website pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a collection of cards or media items."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination helps users to identify:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"how many pages or items they can navigate through"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"where the page or item they are viewing sits in the order of other pages or items"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"how they can immediately navigate to other pages or items."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use pagination if your list has 10 or more results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination identifies the page each result sits on. This makes it convenient for users to find again."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Stack standard pagination variant links vertically."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use standard and complex variants at the bottom of the body content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the simple variant nested in components, for example, the "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media-gallery/"},"children":[{"type":"text","value":"media gallery"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/components/carousel/"},"children":[{"type":"text","value":"carousel"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use ellipses to replace any skipped pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use pagination for one page only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only choose one pagination variant, never mix or combine them."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put the user first, so don't break up content if it reduces usability or performance."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use for linear user journeys such as form completion."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination has 3 main variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple, for a small number of items or used in other components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard, to navigate through a small number of pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex, when there is a large number of pages to navigate through."}]}]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--simple-tally"},"children":[]},{"type":"element","tag":"h3","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The standard variant is for navigating through a small number of pages. It has 2 options for label display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page titles."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page numbers."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use page titles to give more context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page."}]},{"type":"element","tag":"h4","props":{"id":"page-title"},"children":[{"type":"text","value":"Page Title"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"h4","props":{"id":"page-number"},"children":[{"type":"text","value":"Page Number"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--example-count"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex"},"children":[{"type":"text","value":"Complex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 3 pages that should always remain highlighted:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The first page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The current page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The last page."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Display page numbers for the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"current page on all screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"previous and next pages on smaller screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page immediately before and after the current page on larger screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"first and final pages on all screen sizes."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"simple","depth":3,"text":"Simple"},{"id":"standard","depth":3,"text":"Standard"},{"id":"complex","depth":3,"text":"Complex"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:pagination.md","_source":"content","_file":"design-system/5.components/pagination.md","_extension":"md"},{"_path":"/design-system/components/primary-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Primary navigation","description":"The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation contains:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a site logo"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigation links"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional search link."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The navigation and search links expand to either a fullscreen menu or search bar."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation always sits at the top of the page. It displays above all page content and components."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-primary-nav--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"logo"},"children":[{"type":"text","value":"Logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Within the primary navigation component, the logo is centred vertically."}]},{"type":"element","tag":"h4","props":{"id":"co-branding-logos"},"children":[{"type":"text","value":"Co-branding logos"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/logo/"},"children":[{"type":"text","value":"logo"}]},{"type":"text","value":" for guidance and requirements including co-branding."}]},{"type":"element","tag":"h4","props":{"id":"navigation-links"},"children":[{"type":"text","value":"Navigation links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When there are no child pages, there is no chevron and it takes users to the page."}]},{"type":"element","tag":"h4","props":{"id":"mega-menu"},"children":[{"type":"text","value":"Mega menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages."}]},{"type":"element","tag":"h4","props":{"id":"search-menu"},"children":[{"type":"text","value":"Search menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The menu can display a search bar to provide users the option to perform a site search."}]},{"type":"element","tag":"h4","props":{"id":"smaller-devices"},"children":[{"type":"text","value":"Smaller devices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.0 Criterion 1.1.1"}]},{"type":"text","value":", and for increased consistency across screens sizes, the primary navigation:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"uses the menu label and a chevron"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"doesn't use the 3 bar, or 'hamburger', menu icon."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."}]}]},{"type":"element","tag":"h4","props":{"id":"responsive-behaviour"},"children":[{"type":"text","value":"Responsive behaviour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation supports only a small number of items. This is because it is a horizontal list."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Take this into account when defining your site's IA."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A maximum number of links can display before the navigation bar will respond to the collapsed menu display."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When used with a single logo:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"992-1199px breakpoint can display 6 links (including search)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1200+ breakpoint can display 7 links (including search)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When used with a co-branded logo:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"992-1199px breakpoint can display 5 links (including search)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1200+ breakpoint can display 6 links (including search)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version."}]},{"type":"element","tag":"h4","props":{"id":"scroll-behaviour"},"children":[{"type":"text","value":"Scroll behaviour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation has show and hide behaviour on user scroll."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Scroll down: the primary navigation hides from view."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Scroll up: the primary navigation shows at the top of the viewport."}]}]},{"type":"element","tag":"h4","props":{"id":"interaction-with-other-components"},"children":[{"type":"text","value":"Interaction with other components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use across all pages of your site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use descriptive, recognisable link labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display links in priority order: move from left (for most-used links) to right (for least-used links)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Base your navigation's structure on user research."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Structure navigation to prioritise tasks and information your research says users need the most."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with optional user action, such as login, if required."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t label links with jargon or unfamiliar terms."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 150 characters per menu item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"An organisational structure should not be used as a navigation stucture."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual prominence and brand recognition"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation also adopts its theming from the search bar component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-primary-nav--default-story"},"children":[]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.2 Criterion 2.5.8"}]},{"type":"text","value":", the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.5.8 Target Size (Minimum) The size of the "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target","rel":["nofollow"]},"children":[{"type":"text","value":"target"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input","rel":["nofollow"]},"children":[{"type":"text","value":"pointer inputs"}]},{"type":"text","value":" is at least 24 by 24 "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel","rel":["nofollow"]},"children":[{"type":"text","value":"CSS pixels"}]},{"type":"text","value":","}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"accessibility","depth":2,"text":"Accessibility"}]}},"_type":"markdown","_id":"content:design-system:5.components:primary-navigation.md","_source":"content","_file":"design-system/5.components/primary-navigation.md","_extension":"md"},{"_path":"/design-system/components/profile","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Profile","description":"The Profile component shows an avatar (image) on your page, with supporting text to display key information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each row of content includes a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It's used to display key information, including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"category."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the profile component for displaying simple information. For data or complex information, consider using a table."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-profile--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep label as short as possible (under 2 words, like a name)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep all content clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display at the top of profile pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always add alt text to the image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use an image that's relevant to the summary."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a label that doesn't match the summary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use unimportant, complex or longform content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use full URLs in the label or summary."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:profile.md","_source":"content","_file":"design-system/5.components/profile.md","_extension":"md"},{"_path":"/design-system/components/radio-button","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Radio button","description":"The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use radio buttons to let users select one option from a list."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They help users make a single selection from a list of available items."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use radio buttons if a user may select multiple options. Use a checkbox component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use radio buttons with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"form label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"radio label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional hint text."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons should always have a form and radio label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use if only one options needs selecting from a list."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the reverse variant on grey backgrounds."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always write clear and concise radio label descriptions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure you list options in a logical and unbiased manner."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If unsure about the list order, place from most common, to least common."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hints to tell users they can only select one option."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for lists with more than one possible option. Use checkboxes for these."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use a radio group with an horizontal alignment for displaying more than 2 options."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't list all possible options. Add an option for 'other'."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for radio buttons, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a yes/no question"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user understand why they would say yes."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select yes if [the information is true]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select yes if you drive a car'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a choice (other than yes/no) from 2 options"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user choose the option that applies to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [the choice you are asking the user to make].'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you drive a car or truck’."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a choice from 3 or more options"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose a single option from 3 or more options."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select the [singular piece of information you are seeking from the user].'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select the day of the week you drive the most.'"}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons use colour for interactive states."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:radio-button.md","_source":"content","_file":"design-system/5.components/radio-button.md","_extension":"md"},{"_path":"/design-system/components/related-links","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Related links","description":"The Related links component is a list of links to help users discover related content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use if you’re presenting the user with related information or actions to help them deep dive into content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use related links for linking to unrelated content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-related-links--related-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to help users discover related content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in the sidebar section pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use at least 2 links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use no more than 8 links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep description clear, concise and specific to each link."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add unrelated links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload each link with too many words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't link to documents or videos - instead, embed them."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include other interactive elements, like buttons."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:related-links.md","_source":"content","_file":"design-system/5.components/related-links.md","_extension":"md"},{"_path":"/design-system/components/results-listing","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Results listing","description":"The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A results listing shows multiple results items, each with their own:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"title, telling the user the name of the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary, summing up the result’s content for the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"URL, telling the user the website address for the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"featured content, visually highlighting key content from the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"topic/category, putting the result into its context within a broader page or site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date, showing a result’s published (simple variant) or updated (default variant) date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"keyword term bold styling, showing the search term(s) in bold in the result displayed."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Put the search term in bold."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Test results so they are correct and relevant to the search term."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep descriptions under 150 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display up to 10 results."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display the result title only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t make only the title interactive, ensure the entire result is interactive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use both updated date and published date, choose one only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display more than 10 results."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A result listing's 2 main variants are:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default results listing has the option of surfacing key information when required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Key information can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audience"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"grants metadata such as grant value."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default variant users the updated date by default."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-details"},"children":[]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The simple variant displays the page title with accompanying metadata."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It uses the published date by default, which is automatically pulled in from the metadata."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend using this variant when displaying simple results, like news items."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-meta"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Results listing uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating to the user there is an interaction possible"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying key information such as status, the icon should adopt the relevant semantic colour."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-details"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"simple","depth":3,"text":"Simple"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:results-listing.md","_source":"content","_file":"design-system/5.components/results-listing.md","_extension":"md"},{"_path":"/design-system/components/search-bar","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Search bar","description":"The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the search bar to help users find what they are looking for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search bar includes:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text - placeholder and input text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search button label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search button icon"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional predictive list - present suggested keywords to the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional refine search link - expand to present advanced filters to the user."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"input-text"},"children":[{"type":"text","value":"Input text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include short, descriptive placeholder text. This tells the user what they can search for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The text the user inputs replaces the placeholder text."}]},{"type":"element","tag":"h4","props":{"id":"search-button"},"children":[{"type":"text","value":"Search button"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search button contains a button label and search icon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Smaller devices show a responsive variant with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"only a search icon"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"no button label."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This gives the user more space to write search text. Users know that a magnifying glass represents a search function."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The word ‘Search’ must appear in the alt text for screen readers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The button type should be a submit button. This lets a user conduct a search:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using the enter/return key"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using fewer keystrokes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"by choosing a suggestion (if applicable)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"that afterwards, still displays the search keyword."}]}]},{"type":"element","tag":"h4","props":{"id":"predictive-keyword-list"},"children":[{"type":"text","value":"Predictive keyword list"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a short, ordered list of no more than 10 keyword suggestions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They should appear after only a few keystrokes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the search bar to let users search your site (site search)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use default search field on white page background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use reverse search field on grey background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use menu variant in the mega menu only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only default and reverse variants with predictive list suggestions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Even if it's hidden from view, always use a form label for screen readers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep placeholder text concise and descriptive."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use default or reverse variants in the mega menu."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use filters or refine search with the menu variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use multiline search inputs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Revised search shouldn't be by default."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with the refine search link if no filters are available."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 3 search variants include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"menu."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is standard search. The button initiates search based on the text input."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when on a neutral background and you can't use the default variant."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"menu"},"children":[{"type":"text","value":"Menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use this in the mega menu. See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/primary-navigation/"},"children":[{"type":"text","value":"Primary Navigation"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--menu"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search bar uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interaction states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--menu"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"menu","depth":3,"text":"Menu"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:search-bar.md","_source":"content","_file":"design-system/5.components/search-bar.md","_extension":"md"},{"_path":"/design-system/components/skip-link","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Skip link","description":"The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use skip links to let users:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigate quickly through links and form elements"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigate your page when interacting only through the keyboard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"let users navigate directly to the main page content."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Until the user activates it through a keyboard press, a skip link won’t display."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When visible, it's always the first item on a page and pushes down all page content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-layout-skip-links--stand-alone"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It must be on every page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When visible, it must be the first element on the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use at the top of the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't edit the styling."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overlay page content. It must push down the page content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-layout-skip-links--stand-alone"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:skip-link.md","_source":"content","_file":"design-system/5.components/skip-link.md","_extension":"md"},{"_path":"/design-system/components/social-share","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Social share","description":"The Social share component shows a list of links to help users to share pages to social media.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use social share to let users share pages to their own social media channels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It uses the social media icons to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide extra context"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"distinguish between the different social media channels."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The link labels should clearly indicate the platform the user is sharing the page to."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-social-share--social-share"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use it to enable users to share pages to social media."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place in sidebar section of pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Link labels should be the social media platform name."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for links to sites that aren't social media channels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placing in a page's body section."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with labels that aren't social media platform names."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Social share uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-social-share--social-share"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:social-share.md","_source":"content","_file":"design-system/5.components/social-share.md","_extension":"md"},{"_path":"/design-system/components/statistics-grid","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Statistics grid","description":"The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each cell features:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a key statistic"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"content to give the statistic context."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A statistics grid can act as a summary to help users view multiple related pieces of content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-light"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use text or numbers in the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Give a high-level summary of key information."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The grid will always span the full available width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place in the body section of pages."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with under 2 or over 8 statistics."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use when you need a large amount of text for context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use images or graphics."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add links."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The statistic grid has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, for white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, for neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-light"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-dark"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:statistics-grid.md","_source":"content","_file":"design-system/5.components/statistics-grid.md","_extension":"md"},{"_path":"/design-system/components/table","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Table","description":"The Table component makes it easier for users to scan and compare data and content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users tend to read tables one row or column at a time. So, it's important that content is simple and logical."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A table can include a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"row and/or column headings that help users know what the rows and columns represent"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"body rows that display data or content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a table caption describing its content and helping users find, navigate and understand its information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a table footer that provides additional details, if required"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an expandable section with expandable rows, which can show extra related or supplementary information or data."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--structured-content"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table content should be left-aligned because we read from left to right. However, tables with financial figures should have columns that contain numerals set to right-aligned."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a caption or footer, if required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use for complex content and data sets."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align numbers to the right (except nominal numbers)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align headers according to their column data."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't repeat the same content in both the caption and summary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with long form content. Cell content should be brief and scannable."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use without zebra-stripe styling.."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't centre-align content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple, best used for simple data."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex, best used for complex data."}]}]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--table-scrollable"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex"},"children":[{"type":"text","value":"Complex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant is best used to display complex data sets."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--structured-content"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table data uses colour to indicate an action to the user."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--custom-content"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"simple","depth":3,"text":"Simple"},{"id":"complex","depth":3,"text":"Complex"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:table.md","_source":"content","_file":"design-system/5.components/table.md","_extension":"md"},{"_path":"/design-system/components/tabs","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Tabs","description":"The Tab component lets you organise related content so that users can switch between related information on the same page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tabs to let users stay on the same page, but access more content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"you can split, categorise and clearly label the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"there is a section more relevant for most users, which is placed first"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"seeing the all sections at the same time is not needed"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"you have a minimum of 2 tabs."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use tabs if your content is sequential. Use it to present related content together, as a group."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"labels"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an optional icon."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Order your tabs according to importance."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Labels should clearly and succinctly describe the content within the tab."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use tabs to group content that all sits at the same level of hierarchy."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit labels to one word and ensure they are unique."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use tabs within tabs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display disabled tabs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display more than one row of tabs when using the horizontal variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use if your content is short, instead use lists or paragraph text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Tabs are not a substitute for primary navigation, so never use tabs as primary navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use tabs to tell the user about their progress through a page or content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use tabs when the user needs to compare information, since only one tab is visible at a time."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs have 2 display variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"vertical."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default variant sets the tab group bottom border to span the full available content width."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"vertical"},"children":[{"type":"text","value":"Vertical"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vertical variant sets the tab group left border to span the height of the tab group."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--vertical"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs use colour to represent interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"vertical","depth":3,"text":"Vertical"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:tabs.md","_source":"content","_file":"design-system/5.components/tabs.md","_extension":"md"},{"_path":"/design-system/components/tag","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Tag","description":"The Tag component adds, and draws attention to, a category name for your content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tags to help categorise content. Tags help users to scan and find content that's relevant to them."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content can have more than one category or theme. Using the tag component helps indicate this to the user."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--neutral"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use keywords."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to draw attention to a category of content or information."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use nouns or adjectives."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overuse tags."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use icons in the tags."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use as a heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 2 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use as a link or action."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tags have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, for use on neutral backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral, for use on white backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--neutral"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"neutral","depth":3,"text":"Neutral"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:tag.md","_source":"content","_file":"design-system/5.components/tag.md","_extension":"md"},{"_path":"/design-system/components/text-area","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Text area","description":"The Text area component lets users select one option from a list.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use text area so users can enter multiple lines of text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text area is used when information longer than a single line of text is needed or expected. For example, comments fields."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text areas can be resized and can be used with a character counter."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a text area component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use text area with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px."}]},{"type":"element","tag":"h4","props":{"id":"resize-handle"},"children":[{"type":"text","value":"Resize handle"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can change the text area height (but not width) with the resize handle. They can also scroll within the container."}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a text area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the text area"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"character-count"},"children":[{"type":"text","value":"Character count"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A character count can sit below the text area field. It tells users the maximum characters and their input’s current count."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a label for text areas."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to specify helpful information such as specific formatting or information requirements."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify character counts when required."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use without a label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t set a minimum or maximum input limit without explicitly saying this in the character count."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use hint text if it isn’t relevant or meaningful to the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The text area has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for an input field, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: empty input"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Enter your name'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or less'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Delivery address must be 56 characters or less'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or more'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Previous employer must be 3 characters or more'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long or to short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be between [number] and [number] characters'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Justification must be between 3 and 56 characters'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Reasons must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must only include [list of allowed characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Explanations must only include letters, numbers and commas'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--error"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:text-area.md","_source":"content","_file":"design-system/5.components/text-area.md","_extension":"md"},{"_path":"/design-system/components/timeline","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Timeline","description":"The Timeline component contains blocks of content displayed in a linear order.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A timeline can include a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"subheading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some examples include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dates"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"stages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"actions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"outcomes."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The timeline component is ordered from top to bottom."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use between 3 to 8 discrete sections of content, so the user is not overwhelmed."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a title for the entire timeline."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a heading, subheading, short summary and optional image for each block."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only include 3 to 8 blocks per timeline."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a link if you're providing more details on another page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add fewer than 3 or more than 8 blocks."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use without a heading for each block."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never include unrelated content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Timeline has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"progressive."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"progressive"},"children":[{"type":"text","value":"Progressive"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the progressive variant to show the progress or status of the content to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--progressive-active-2"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Timeline uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show progress"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--progressive-active-2"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"progressive","depth":3,"text":"Progressive"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:timeline.md","_source":"content","_file":"design-system/5.components/timeline.md","_extension":"md"},{"_path":"/design-system/components/vertical-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Vertical navigation","description":"The Vertical navigation component displays a list of links to help users navigate a section of related pages.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use vertical navigation to help users navigate a section of related pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use vertical navigation to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"let users find and navigate to relevant information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show the user where, within your site’s content hierarchy, the page they are viewing is located"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show 4 nested content sections (parent sections) and a heading for the names of each section."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vertical navigation is placed next to your page’s body content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-vertical-navigation--vertical-navigation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use in a page's sidebar."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always keep the navigation links short. You can use a shorter version of the page title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display up to 4 levels of navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a link for the section's 'home' page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with at least 4 links."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't embed on a page that doesn't have a sidebar."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use on a site with fewer than 5 pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with icons."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use it to link to other sites."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vertical navigation uses colour and active state focus to highlight the current page the user is on."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-vertical-navigation--vertical-navigation"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color","rel":["nofollow"]},"children":[{"type":"text","value":"1.4.1"}]},{"type":"text","value":" Use of Color:"}]},{"type":"text","value":" Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:vertical-navigation.md","_source":"content","_file":"design-system/5.components/vertical-navigation.md","_extension":"md"},{"_path":"/framework","_dir":"","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Ripple Framework","description":"Ripple framework contains the tools for building SDP sites using the Ripple design system components.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Ripple Framework","src":"/assets/img/ripple-header.png","style":"margin-top: -20px; padding-bottom: 50px; "},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"what-is-it"},"children":[{"type":"text","value":"What is it?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple design system consists of the design elements and components used to build "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"any"}]},{"type":"text","value":" web application using the Victorian government brand. Ripple "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"framework"}]},{"type":"text","value":" is a collection of "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt"},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" modules and "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt-layers"},"children":[{"type":"text","value":"layers"}]},{"type":"text","value":" primarily used to create headless SDP websites using the Tide Drupal CMS."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","src":"/assets/img/modules/rpl-modules.png","class":"rpl-u-padding-t-4"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"whos-it-for"},"children":[{"type":"text","value":"Who's it for?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Whilst the Ripple UI components can be used in non SDP projects, Ripple framework assumes a Tide Drupal backend in most cases."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the Ripple framework, developers are able to build headless frontend websites that derive content from the Tide Drupal CMS via it's JSON API."}]},{"type":"element","tag":"h3","props":{"id":"sdp-architecture"},"children":[{"type":"text","value":"SDP architecture"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"SDP Architecture","src":"/assets/img/modules/sdp-architecture.png","class":"rpl-u-padding-12"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To find out more about Single Digital Presence please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"what-is-it","depth":2,"text":"What is it?"},{"id":"whos-it-for","depth":2,"text":"Who's it for?","children":[{"id":"sdp-architecture","depth":3,"text":"SDP architecture"}]}]}},"_type":"markdown","_id":"content:framework:1.index.md","_source":"content","_file":"framework/1.index.md","_extension":"md"},{"_path":"/framework/key-concepts/nuxt","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Nuxt","description":"Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.","layout":"page","links":[{"text":"Nuxt documentation","url":"https://nuxt.com/"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt is a framework for building web applications that can be rendered both server side using Node.js and client side with Vue.js components. Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"\"Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best practices while maintaining excellent Vue.js DX\""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Addy Osmani - Chief Engineer of Chrome"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is recommended that developers new to Ripple familiarise themselves with Nuxt by reading the documentation site, in particular, the following sections:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/introduction","rel":["nofollow"]},"children":[{"type":"text","value":"Introduction · Get Started with Nuxt "}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/concepts/vuejs-development","rel":["nofollow"]},"children":[{"type":"text","value":"Vue.js Development · Nuxt Concepts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/concepts/server-engine","rel":["nofollow"]},"children":[{"type":"text","value":" Server Engine · Nuxt Concepts "}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/directory-structure/nuxt","rel":["nofollow"]},"children":[{"type":"text","value":".nuxt/ · Nuxt Directory Structure"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/going-further/layers","rel":["nofollow"]},"children":[{"type":"text","value":"Authoring Nuxt Layers · Nuxt Advanced"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For support and help working with Nuxt please see "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/community/getting-help","rel":["nofollow"]},"children":[{"type":"text","value":"https://nuxt.com/docs/community/getting-help"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/support/solutions","rel":["nofollow"]},"children":[{"type":"text","value":"https://nuxt.com/support/solutions"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are a number of recommended resources for learning Nuxt 3 including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://masteringnuxt.com/nuxt3","rel":["nofollow"]},"children":[{"type":"text","value":"https://masteringnuxt.com/nuxt3"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://frontendmasters.com/courses/nuxt/","rel":["nofollow"]},"children":[{"type":"text","value":"https://frontendmasters.com/courses/nuxt/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=ww94Jvi8JJo","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.youtube.com/watch?v=ww94Jvi8JJo"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:1.nuxt.md","_source":"content","_file":"framework/2.key-concepts/1.nuxt.md","_extension":"md"},{"_path":"/framework/key-concepts/nuxt-layers","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Layers","description":"Nuxt layers are used to encapsulate Ripple functionality to share and reuse","layout":"page","links":[{"text":"Nuxt layers documentation","url":"https://nuxt.com/docs/getting-started/layers"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"nuxt"},"children":[{"type":"text","value":"Nuxt"}]},{"type":"text","value":" 3 provides a way to encapsulate part of a Nuxt project into what they call a Layer."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain."}]}]},{"type":"element","tag":"iframe","props":{"width":800,"height":500,"className":["rpl-u-padding-t-8","rpl-u-padding-b-8"],"style":"width: 100%","src":"https://www.youtube.com/embed/lnFCM7c9f7I","title":"YouTube video player","frameBorder":"0","allow":"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share","allowFullScreen":true},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2, we utilise Nuxt Layers extensively to share isolated features between SDP sites. A good example is a content type. Using a Nuxt Layer we are able to add the components, API endpoints, composables, etc needed to implement the feature, without having the overhead of a Nuxt Module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A great feature of Nuxt Layers is that you can reference them from any public or private Git repo in addition to publishing via an NPM module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is a diagram showing how Ripple 2 features are distributed through Nuxt layers and used within projects."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Ripple layers architecture diagram. Shows how modules can be shared between projects","src":"/assets/img/modules/layers.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:2.nuxt-layers.md","_source":"content","_file":"framework/2.key-concepts/2.nuxt-layers.md","_extension":"md"},{"_path":"/framework/key-concepts/api-endpoints","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"API endpoints","description":"Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.","layout":"page","links":[{"text":"Nuxt API routes documentation","url":"https://nuxt.com/docs/guide/directory-structure/server#api-routes"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2 we use API routes to create a "},{"type":"element","tag":"a","props":{"href":"https://medium.com/mobilepeople/backend-for-frontend-pattern-why-you-need-to-know-it-46f94ce420b0","rel":["nofollow"]},"children":[{"type":"text","value":"backend for frontend"}]},{"type":"text","value":" API that handles communicating with the Drupal Tide JSON API and maps the response to only what is required to render the page in Ripple."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"API routes diagram","src":"/assets/img/modules/api-routes.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"nitro-server-routes"},"children":[{"type":"text","value":"Nitro server routes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt 3 introduces the concept of "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/directory-structure/server#api-routes","rel":["nofollow"]},"children":[{"type":"text","value":"server API routes"}]},{"type":"text","value":" powered by the "},{"type":"element","tag":"a","props":{"href":"https://nitro.unjs.io/","rel":["nofollow"]},"children":[{"type":"text","value":"Nitro rendering engine"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/h3","rel":["nofollow"]},"children":[{"type":"text","value":"H3"}]},{"type":"text","value":" server."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nitro is the server layer that creates API routes in a Nuxt application. Nitro plugins run at build time and we use them to add the mapping needed to tell Ripple-tide-api package how to respond to a Drupal JSON API request for a content type node"}]},{"type":"element","tag":"h2","props":{"id":"ripple-tide-api"},"children":[{"type":"text","value":"Ripple Tide API"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple Tide API is the module that handles communication with Tide Drupal JSON API. It provides a wrapper service for API calls to Tide and provides an interface for adding mapping functions which transform the response from Drupal into only what's needed for rendering the website. This makes creating pages easier and improves performance by moving all data transformation into the server bundle where it can be easily cached."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"API routes diagram","src":"/assets/img/modules/ripple-tide-api.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"nitro-server-routes","depth":2,"text":"Nitro server routes"},{"id":"ripple-tide-api","depth":2,"text":"Ripple Tide API"}]}},"_type":"markdown","_id":"content:framework:2.key-concepts:3.API-endpoints.md","_source":"content","_file":"framework/2.key-concepts/3.API-endpoints.md","_extension":"md"},{"_path":"/framework/key-concepts/content-types","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Content types","description":"Implementing content type specific page layouts","layout":"page","links":[{"text":"Drupal content types","url":"https://www.drupal.org/docs/7/understanding-drupal/content-types"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are a Drupal concept that allow for modelling content using fields to describe the data structure. See the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/7/understanding-drupal/content-types","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal documentation"}]},{"type":"text","value":" for more details."}]},{"type":"element","tag":"h2","props":{"id":"ripple-content-types"},"children":[{"type":"text","value":"Ripple content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As SDP is a "},{"type":"element","tag":"a","props":{"href":"https://salsa.digital/insights/dissecting-the-single-digital-presence-platform","rel":["nofollow"]},"children":[{"type":"text","value":"headless CMS using a decoupled architecture"}]},{"type":"text","value":" once we have modelled content in Tide, we need a way to render it into a template that can be delivered to end users. Ripple content types allow you to support custom templates for new content types."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple content types consist of the following parts:"}]},{"type":"element","tag":"h3","props":{"id":"api-mapping"},"children":[{"type":"text","value":"API Mapping"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/api-endpoints"},"children":[{"type":"text","value":"API Endpoints"}]},{"type":"text","value":" for more information the Tide API translation layer. For each content type we supply a function that maps the Tide Drupal API response into more concise fields that match the data needed for"}]},{"type":"element","tag":"h3","props":{"id":"template"},"children":[{"type":"text","value":"Template"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To render the page using Ripple UI components, we need to create a Vue component that is passed the data from the API request and, using Ripple UI components, creates a layout that matches your intended design."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/framework/guides/creating-content-types"},"children":[{"type":"text","value":"Content type guide"}]},{"type":"text","value":" for more information on creating new content types."}]}]},{"type":"element","tag":"h2","props":{"id":"core-content-types"},"children":[{"type":"text","value":"Core content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Tide we have a number of content types which are part of the core distribution and are initially included in SDP sites"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Landing page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Event"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"News"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Publication (page)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alert"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"ripple-content-types","depth":2,"text":"Ripple content types","children":[{"id":"api-mapping","depth":3,"text":"API Mapping"},{"id":"template","depth":3,"text":"Template"}]},{"id":"core-content-types","depth":2,"text":"Core content types"}]}},"_type":"markdown","_id":"content:framework:2.key-concepts:4.content-types.md","_source":"content","_file":"framework/2.key-concepts/4.content-types.md","_extension":"md"},{"_path":"/framework/key-concepts/dynamic-components","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Dynamic components","description":null,"layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components are a concept in Ripple that is closely tied to the concept of 'Paragraphs' in Drupal. See the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal documentation for Paragraphs"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components/paragraphs can be added to pages in drupal (see "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Key concepts - content types"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple the raw paragraphs from the Drupal JSON API and 'mapped' to a Vue component, along with the props required for that component to render. This Vue component, along with the associated mapping is what is referred to as the 'Dynamic component'."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Illustration of hows how dynamic components are mapped from drupal paragraphs to vue components","src":"/assets/img/modules/dynamic-components.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:5.dynamic-components.md","_source":"content","_file":"framework/2.key-concepts/5.dynamic-components.md","_extension":"md"},{"_path":"/framework/guides/migrating","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Migrating from Ripple 1.x","description":"This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"background"},"children":[{"type":"text","value":"Background"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is a complete rewrite of both the design system and the Nuxt modules used to create SDP sites with it. It is a breaking change with the processes used to create sites and functionality used in Ripple 1. This was required due to the following reasons:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Latest versions of Vue and Nuxt 3 introducing breaking changes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Deprecation of IE11 support allowing us to support modern browser features"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Opportunity to adopt best practices such as Typescript and modern CSS"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Build up of technical and design debt"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Improvements to the design allowing better theming and accessibility"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Due to breaking changes between versions 2 and 3 of both Vue and Nuxt there is no automated way to upgrade Ripple components and sites.\n"},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Custom functionality built on Ripple 1 will need to be rewritten to use Ripple 2 API’s and design."}]}]}]},{"type":"element","tag":"h2","props":{"id":"migrating-your-site"},"children":[{"type":"text","value":"Migrating your site"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your site is supported by the SDP team for upgrades, the initial site upgrade will be handled by the SDP team. The process will be as follows:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a new empty V2 branch will be created in the site repository"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a fresh install of Ripple 2 will be added to the site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"all required environment variables will be added to the project to connect the site to the Tide content backend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the V2 branch will be setup to be served from behind the Section.io CDN"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The migration of the following will be out of scope for sites without an MoU for SDP support:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom content types"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom user facing components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Extensive theme customisation outside of those documented in the theming guide"}]}]},{"type":"element","tag":"h2","props":{"id":"migrating-features-from-ripple-1x"},"children":[{"type":"text","value":"Migrating features from Ripple 1.x"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please review the following concepts before proceeding:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/content-types"},"children":[{"type":"text","value":"Content types"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/api-endpoints"},"children":[{"type":"text","value":"API mapping"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/dynamic-components"},"children":[{"type":"text","value":"Dynamic components"}]}]}]},{"type":"element","tag":"h3","props":{"id":"content-types"},"children":[{"type":"text","value":"Content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types in Tide allow for defining custom fields that can be returned via the Drupal JSON API. Because SDP sites are headless, we need to tell Ripple how to render each custom content type on the front end."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1.x, each content type was added through the convention of adding a folder named tide and each content type as a subfolder. See "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/tree/develop/examples/basic-examples/tide/modules/example-content-type","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 1 example"}]},{"type":"text","value":".\nThe mapping of the tide API response was done through "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/modules/news/tide.config.j","rel":["nofollow"]},"children":[{"type":"text","value":"tide.config.js"}]},{"type":"text","value":". The JSON API response was returned in its entirety and mapping the Drupal fields to Ripple components was done through the Page component."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2.x we move the mapping of data to the Nuxt server layer. This allows us to only return the necessary data needed to the end user, reducing the JSON payload from Drupal."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more information on creating new content types see the guide on "},{"type":"element","tag":"a","props":{"href":"creating-content-types"},"children":[{"type":"text","value":"creating content types"}]}]},{"type":"element","tag":"h3","props":{"id":"dynamic-components"},"children":[{"type":"text","value":"Dynamic components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tide CMS makes use of "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal paragraphs"}]},{"type":"text","value":" to structure content types to allow content creators flexibility when composing content. Creating new paragraph types that can be reused for the landing page content or across others is a common customisation task."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1, new paragraph support was added through custom mappings "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/blob/develop/examples/basic-examples/tide/modules/example-override-mapping/tide.config.js","rel":["nofollow"]},"children":[{"type":"text","value":"See Ripple 1"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2, we need to add similar support - See "},{"type":"element","tag":"a","props":{"href":"dynamic-components"},"children":[{"type":"text","value":"Guide to creating dynamic components"}]}]},{"type":"element","tag":"h3","props":{"id":"search-listing-pages"},"children":[{"type":"text","value":"Search listing pages"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is still in Beta, please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/660","rel":["nofollow"]},"children":[{"type":"text","value":"feature proposal"}]},{"type":"text","value":" for more information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Listing pages are pages that contain dynamic lists of links to other pages. These are typically used to generate index pages when there are large amounts of similar items. See "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/grants","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/grants"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/victorian-honour-roll-of-women","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/victorian-honour-roll-of-women"}]},{"type":"text","value":" for example."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1 there was no dedicated content type for creating listing pages and hence these pages were usually created as static pages in the frontend."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2 we intend to move to a standard content type that allows configuring the search experience from the backend. Please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/660","rel":["nofollow"]},"children":[{"type":"text","value":"feature proposal"}]},{"type":"text","value":" for more info."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"background","depth":2,"text":"Background"},{"id":"migrating-your-site","depth":2,"text":"Migrating your site"},{"id":"migrating-features-from-ripple-1x","depth":2,"text":"Migrating features from Ripple 1.x","children":[{"id":"content-types","depth":3,"text":"Content types"},{"id":"dynamic-components","depth":3,"text":"Dynamic components"},{"id":"search-listing-pages","depth":3,"text":"Search listing pages"}]}]}},"_type":"markdown","_id":"content:framework:3.guides:1.migrating.md","_source":"content","_file":"framework/3.guides/1.migrating.md","_extension":"md"},{"_path":"/framework/guides/new-sites","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Setting up a new site","description":"A guide to setting up new SDP frontend sites using Ripple framework.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Setting up new sites with Ripple 2 is made easy with our CLI tool and provisioning process. Before you do so though please ensure you have got in touch with the SDP engagement manager ("},{"type":"element","tag":"a","props":{"href":"mailto:digital@dpc.vic.gov.au"},"children":[{"type":"text","value":"digital@dpc.vic.gov.au"}]},{"type":"text","value":") prior and have submitted a support request to the Digital Victoria Help Centre "},{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portals","rel":["nofollow"]},"children":[{"type":"text","value":"https://digital-vic.atlassian.net/servicedesk/customer/portals"}]}]},{"type":"element","tag":"h2","props":{"id":"requirements"},"children":[{"type":"text","value":"Requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When onboarding a new project to SDP the following will be provisioned for you:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Git repo created"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Required platform files added to repo, required Dockerfile, etc"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Bay hosting environment configured"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Section.io CDN setup and configured"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Environment variables set to your project specific requirements"}]}]},{"type":"element","tag":"h2","props":{"id":"local-development-dependencies"},"children":[{"type":"text","value":"Local development dependencies"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please make sure you have the following dependencies installed before proceeding. Typically local development is not performed through a docker container on the front end."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Node version 16.11.0 or greater (We recommend installing Node through Node Version Manager - See "},{"type":"element","tag":"a","props":{"href":"https://github.com/nvm-sh/nvm","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/nvm-sh/nvm"}]},{"type":"text","value":" for install guide)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"NPM version 8.1.0 or greater"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please see the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"engines"}]},{"type":"text","value":" key in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":" for most accurate versions."}]},{"type":"element","tag":"h2","props":{"id":"installing-ripple"},"children":[{"type":"text","value":"Installing Ripple"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For SDP sites, this will also be applied. However, if you wish to create a local install of Ripple outside of a project see below."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Installing Ripple is easy with the included CLI tool:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\"\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will copy the required files needed to setup your site into "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/path/to/site"}]}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"cd ~/path/to/site && npm install\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"cd ~/path/to/site && npm install"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will install all dependencies with NPM, you can then run the development server with"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"npm run dev\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npm run dev"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"requirements","depth":2,"text":"Requirements"},{"id":"local-development-dependencies","depth":2,"text":"Local development dependencies"},{"id":"installing-ripple","depth":2,"text":"Installing Ripple"}]}},"_type":"markdown","_id":"content:framework:3.guides:2.new-sites.md","_source":"content","_file":"framework/3.guides/2.new-sites.md","_extension":"md"},{"_path":"/framework/guides/brand-application","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Applying theme and brand","description":"A guide to applying theme and brand assets to Ripple sites.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theming with brand colours is embedded deeply into Ripple, using "},{"type":"element","tag":"a","props":{"href":"https://amzn.github.io/style-dictionary/#/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"design tokens"}]},{"type":"text","value":". Global and component styles are built on a base level of tokens, that can be adjusted at a "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site"}]},{"type":"text","value":" level by modifying a few key properties."}]},{"type":"element","tag":"h2","props":{"id":"token-naming"},"children":[{"type":"text","value":"Token naming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple uses a naming scheme for tokens, and the CSS custom properties are derived with this pattern:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"--rpl(-<module>)-<attribute>(-<level>)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl(-<module>)-<attribute>(-<level>)"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some example props:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"--rpl-clr-primary\n--rpl-clr-success-light\n--rpl-type-size-5\n--rpl-sp-3\n--rpl-border-4\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-success-light\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-type-size-5\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-sp-3\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-border-4"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And a worked example:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":".example-block {\n border-color: var(--rpl-clr-primary);\n border-style: solid;\n border-width: var(--rpl-border-4);\n colour: var(--rpl-clr-primary);\n padding: var(--rpl-sp-3);\n}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":".example-block {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" border-color: var(--rpl-clr-primary);\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" border-style: solid;\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" border-width: var(--rpl-border-4);\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" colour: var(--rpl-clr-primary);\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" padding: var(--rpl-sp-3);\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"theme-properties"},"children":[{"type":"text","value":"Theme properties"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The minimum set of required properties are listed below:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"--rpl-clr-primary\n--rpl-clr-footer-alt\n--rpl-clr-link\n--rpl-clr-type-primary-accessible\n--rpl-clr-primary-alt\n--rpl-clr-type-primary-alt-accessible\n--rpl-clr-footer\n--rpl-clr-type-footer-accessible\n--rpl-clr-primary-alpha\n--rpl-clr-accent\n--rpl-clr-accent-alt\n--rpl-clr-focus\n--rpl-clr-gradient-horizontal\n--rpl-clr-gradient-vertical\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-footer-alt\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-link\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-type-primary-accessible\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-primary-alt\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-type-primary-alt-accessible\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-footer\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-type-footer-accessible\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-primary-alpha\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-accent\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-accent-alt\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-focus\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-gradient-horizontal\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-gradient-vertical"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"sdp"},"children":[{"type":"text","value":"SDP"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In SDP, the theme is managed in the back-end system via the Site Taxonomy. Site entries have a collection of key-value "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site theme values"}]},{"type":"text","value":", and also "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site feature flag values"}]},{"type":"text","value":" to define site-specific settings, e.g."}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"Key\nrpl-clr-primary\nValue\n#1c4f9c\n\nKey\nfooterTheme\nValue\nneutral\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Key\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"rpl-clr-primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Value\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"#1c4f9c\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Key\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"footerTheme\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Value\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"neutral"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both these collections are exposed to the front-end through the Site API, and can immediately update production sites without requiring a code change or deployment."}]},{"type":"element","tag":"h2","props":{"id":"secondary-logo"},"children":[{"type":"text","value":"Secondary logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The secondary logo is also content managed, and can be set on the same Site Taxonomy page in the back-end under "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Logo"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"appconfig"},"children":[{"type":"text","value":"app.config"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme and feature flag properties may also be defined in the Nuxt "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.config.ts"}]},{"type":"text","value":" for the site. This matches the naming used in the Site API (note the difference in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--"}]},{"type":"text","value":" for theme, since these are Javascript config props, not CSS custom props):"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"export default defineAppConfig({\n ripple: {\n featureFlags: {\n contentCollectionSearchConnector: 'elasticsearch'\n },\n theme: {\n 'rpl-clr-primary': '#6B19A3',\n 'rpl-clr-footer-alt': '#6B19A3',\n 'rpl-clr-link': '#6B19A3',\n 'rpl-clr-type-primary-accessible': '#6B19A3',\n 'rpl-clr-primary-alt': '#3F006B',\n 'rpl-clr-type-primary-alt-accessible': '#3F006B',\n 'rpl-clr-footer': '#3F006B',\n 'rpl-clr-type-footer-accessible': '#3F006B',\n 'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n 'rpl-clr-accent': '#6DDD97',\n 'rpl-clr-accent-alt': '#EAFAF0',\n 'rpl-clr-focus': '#9DEF65',\n 'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n 'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n }\n }\n})\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"export default defineAppConfig({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" ripple: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" featureFlags: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" contentCollectionSearchConnector: 'elasticsearch'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" theme: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-primary': '#6B19A3',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-footer-alt': '#6B19A3',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-link': '#6B19A3',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-type-primary-accessible': '#6B19A3',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-primary-alt': '#3F006B',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-type-primary-alt-accessible': '#3F006B',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-footer': '#3F006B',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-type-footer-accessible': '#3F006B',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-accent': '#6DDD97',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-accent-alt': '#EAFAF0',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-focus': '#9DEF65',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"light-on-dark"}]},{"type":"text","value":" and "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"dark-on-light"}]},{"type":"text","value":" theming options."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"token-naming","depth":2,"text":"Token naming"},{"id":"theme-properties","depth":2,"text":"Theme properties"},{"id":"sdp","depth":2,"text":"SDP"},{"id":"secondary-logo","depth":2,"text":"Secondary logo"},{"id":"appconfig","depth":2,"text":"app.config"}]}},"_type":"markdown","_id":"content:framework:3.guides:3.brand-application.md","_source":"content","_file":"framework/3.guides/3.brand-application.md","_extension":"md"},{"_path":"/framework/guides/creating-content-types","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Creating content types","description":"How to create new content types for the SDP platform","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/content-types"},"children":[{"type":"text","value":"key concepts - content types"}]},{"type":"text","value":" for an overview of what content types are and the core content types used within the SDP platform."}]}]},{"type":"element","tag":"h2","props":{"id":"anatomy"},"children":[{"type":"text","value":"Anatomy"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are comprised of three main parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-mapping-object"},"children":[{"type":"text","value":"A mapping object"}]},{"type":"text","value":" - maps API data to pass to a Vue component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-server-plugin"},"children":[{"type":"text","value":"A server plugin"}]},{"type":"text","value":" - registers the content type with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@dpc-sdp/ripple-tide-api"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-vue-component"},"children":[{"type":"text","value":"And Vue components"}]},{"type":"text","value":" - takes the mapped data and renders the content type"}]}]},{"type":"element","tag":"h2","props":{"id":"creating-a-content-type"},"children":[{"type":"text","value":"Creating a content type"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Nuxt Ripple CLI provides a simple way to add new content types, to get started just run the following command:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[DIRECTORY]"}]},{"type":"text","value":" is the location to output the content type scaffolding, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{NAME}"}]},{"type":"text","value":" is the name of the new content type, and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{CYPRESSPATH}"}]},{"type":"text","value":" is the relative path to be used for the cypress tests folder."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the CLI is the preferred way to create new content types as it will ensure the correct file structure and naming conventions are used. It will also scaffold the mapping object, server plugin, and Vue component for you."}]}]},{"type":"element","tag":"h2","props":{"id":"the-mapping-object"},"children":[{"type":"text","value":"The mapping object"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mapping object is responsible for supplying the data mapping and includes."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Data mapping"}]},{"type":"text","value":": the data mapping is responsible for mapping the Tide API response data (i.e. Drupal JSON) into a clean format that can be used within the Vue component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Includes"}]},{"type":"text","value":": the includes are an array of fields that need to be added to the API request so Drupal knows what referenced entities to include in the API response, for more on Drupal includes see "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes","rel":["nofollow"]},"children":[{"type":"text","value":"JSON API includes"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is an example mapping object."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"import type { IRplTideModuleMapping } from '@dpc-sdp/ripple-tide-api/types'\nimport { tidePageBaseMapping, tidePageBaseIncludes } from '@dpc-sdp/nuxt-ripple/mapping'\nimport { getField, getImageFromField } from '@dpc-sdp/ripple-tide-api'\n\nconst tideMyConentTypeModule: IRplTideModuleMapping = {\n mapping: {\n // The base mapping is used to add common fields\n // See the tidePageBaseMapping function for details \n ...tidePageBaseMapping({ withTopicTags: true }),\n \n content: 'field_my_content_type_content',\n \n // Can be nested as needed\n header: {\n intro: 'field_landing_page_intro_text',\n },\n \n // Use a function to transform the data\n files: (src) => getField(src, 'field_node_files').map((file) => ({\n name: file.name,\n url: file.field_media_file.url\n })),\n\n // Or when using helper functions\n image: (src) => getImageFromField(src, 'field_featured_image.field_media_image')\n },\n includes: [\n // The base includes are used to include common fields\n // See the tidePageBaseIncludes function for details \n ...tidePageBaseIncludes({ withTopicTags: true }),\n \n 'field_featured_image',\n 'field_featured_image.field_media_image'\n ]\n}\n\nexport default tideMyConentTypeModule\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { IRplTideModuleMapping } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { tidePageBaseMapping, tidePageBaseIncludes } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/nuxt-ripple/mapping'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { getField, getImageFromField } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-api'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"tideMyConentTypeModule"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"IRplTideModuleMapping"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" mapping: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// The base mapping is used to add common fields\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// See the tidePageBaseMapping function for details \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"tidePageBaseMapping"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"({ withTopicTags: "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" content: "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_my_content_type_content'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Can be nested as needed\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" header: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" intro: "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_landing_page_intro_text'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Use a function to transform the data\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"files"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"getField"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"(src, "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_node_files'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" name: file.name,\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" url: file.field_media_file.url\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" })),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Or when using helper functions\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"getImageFromField"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"(src, "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_featured_image.field_media_image'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" includes: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// The base includes are used to include common fields\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// See the tidePageBaseIncludes function for details \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"tidePageBaseIncludes"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"({ withTopicTags: "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_featured_image'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_featured_image.field_media_image'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"tideMyConentTypeModule"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-server-plugin"},"children":[{"type":"text","value":"The server plugin"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The server plugin is responsible for registering the new content type with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@dpc-sdp/ripple-tide-api"}]},{"type":"text","value":", this file needs to live within the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server/plugins"}]},{"type":"text","value":" directory of the content type."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The content type can then be registered by calling the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setContentType"}]},{"type":"text","value":" method on the Tide page API. This method takes two arguments, the first is the name of the content type, and the second is the mapping object. If you have used the CLI to create the content type this will already be done for you."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"import type { NitroApp } from 'nitropack'\nimport { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'\nimport tideMyContentTypeModule from '../../mapping'\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n nitroApp.tide?.pageApi.setContentType('my-content-type', tideMyContentTypeModule)\n})\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { NitroApp } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'nitropack'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { defineNitroPlugin } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'nitropack/dist/runtime/plugin'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" tideMyContentTypeModule "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'../../mapping'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" (nitroApp"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" NitroApp) "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"{\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" nitroApp.tide?.pageApi."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"setContentType"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'my-content-type'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", tideMyContentTypeModule)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-component"},"children":[{"type":"text","value":"The Vue component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A Vue component is needed to render the content type. This component will receive a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"page"}]},{"type":"text","value":" prop, it's this prop that contains the mapped data from the Tide API response."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important note"}]},{"type":"text","value":": The component needs to be registered globally, this can be done by adding the component to a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/components/global"}]},{"type":"text","value":" folder within the content type. Because this is global the name needs to be unique, it must also be prefixed with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Tide"}]},{"type":"text","value":" i.e. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TideMyContentType"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component should use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":" component to render the shell of the site, from there slots are used to render the content types content in the right locations. If you're using the CLI it will take care of scaffolding a global component that uses "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":" for you."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is an example component using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-vue"],"code":"<template>\n <TideBaseLayout\n :site=\"site\"\n :page=\"page\"\n :siteSection=\"page.siteSection\"\n :pageTitle=\"page.title\"\n :pageLanguage=\"page.lang\"\n :updatedDate=\"page.changed || page.created\"\n :showContentRating=\"page.showContentRating\"\n >\n <template #aboveHeader>\n <slot name=\"aboveHeader\"></slot>\n </template>\n <template #primaryNav>\n <slot name=\"primaryNav\"></slot>\n </template>\n <template #breadcrumbs>\n <slot name=\"breadcrumbs\"></slot>\n </template>\n <template #aboveBody>\n <slot name=\"aboveBody\"></slot>\n </template>\n <template #body>\n <!-- Add content within the relevant slot -->\n <TideMyContentTypeContent :content=\"page.content\" />\n </template>\n <template #sidebar>\n <slot name=\"sidebar\"></slot>\n </template>\n <template #footer>\n <slot name=\"footer\"></slot>\n </template>\n </TideBaseLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { TideSiteData } from '@dpc-sdp/ripple-tide-api/types'\nimport type { TideMediaPage } from '../../types'\n\ninterface Props {\n site: TideSiteData\n page: TideMediaPage\n}\n\ndefineProps<Props>()\n</script>\n","language":"vue","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-892505"},"children":[{"type":"text","value":"TideBaseLayout\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":site"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"site\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":page"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":siteSection"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.siteSection\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":pageTitle"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.title\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":pageLanguage"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.lang\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":updatedDate"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.changed || page.created\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":showContentRating"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.showContentRating\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" >\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"aboveHeader"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"aboveHeader\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"primaryNav"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"primaryNav\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"breadcrumbs"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"breadcrumbs\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"aboveBody"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"aboveBody\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"<!-- Add content within the relevant slot -->\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-892505"},"children":[{"type":"text","value":"TideMyContentTypeContent"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":content"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.content\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"sidebar"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"sidebar\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"footer"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"footer\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-892505"},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { TideSiteData } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":38},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { TideMediaPage } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'../../types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":39},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":40},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":41},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"site"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"TideSiteData\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":42},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"page"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"TideMediaPage\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":43},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":44},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":45},"children":[{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":46},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"using-the-content-type"},"children":[{"type":"text","value":"Using the content type"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are actually "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/layers","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt layers"}]},{"type":"text","value":" so these are added in the same way as any other layer through the extends property of the main applications "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"export default defineNuxtConfig({\n extends: [\n '@dpc-sdp/ripple-tide-news', // An npm installed package\n 'github:dpc-sdp/ripple-tide-news#1.0.0', // A tagged git repository\n './layers/tide-my-content-type', // A local layer\n ]\n})\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"extends: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-news'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// An npm installed package\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'github:dpc-sdp/ripple-tide-news#1.0.0'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// A tagged git repository\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'./layers/tide-my-content-type'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// A local layer\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-186825{color:#CF222E;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-109545{color:#0550AE;}\n.ct-082380{color:#953800;}\n.ct-690235{color:#6E7781;}\n.ct-319862{color:#8250DF;}\n.ct-872567{color:#116329;}\n.ct-892505{color:#82071E;font-style:italic;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"anatomy","depth":2,"text":"Anatomy"},{"id":"creating-a-content-type","depth":2,"text":"Creating a content type"},{"id":"the-mapping-object","depth":2,"text":"The mapping object"},{"id":"the-server-plugin","depth":2,"text":"The server plugin"},{"id":"the-vue-component","depth":2,"text":"The Vue component"},{"id":"using-the-content-type","depth":2,"text":"Using the content type"}]}},"_type":"markdown","_id":"content:framework:3.guides:4.creating-content-types.md","_source":"content","_file":"framework/3.guides/4.creating-content-types.md","_extension":"md"},{"_path":"/framework/guides/creating-new-layers","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Creating new layers","description":"Implementing custom functionality through layers","layout":"page","links":[{"text":"Nuxt layers documentation","url":"https://nuxt.com/docs/getting-started/layers"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers are used to encapsulate Ripple functionality, so it can easily be shared and reused across projects, see "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt-layers"},"children":[{"type":"text","value":"key concepts - layers"}]},{"type":"text","value":" for a conceptual overview of what layers are and how they are used within Ripple."}]},{"type":"element","tag":"h2","props":{"id":"creating-a-new-layer"},"children":[{"type":"text","value":"Creating a new layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Nuxt Ripple CLI provides a simple way to initialise new layers, to create a new layer just run the following command:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[DIRECTORY]"}]},{"type":"text","value":" is the location to output the layer scaffolding and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{NAME}"}]},{"type":"text","value":" is the name of the new layer. This command will scaffold everything you need to get started developing a new layer."}]},{"type":"element","tag":"h2","props":{"id":"developing-the-layer"},"children":[{"type":"text","value":"Developing the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once the layer has been created you can start working with it by running the command below from the new layers directory. This will start a development server and allow you to start working on the layer."}]},{"type":"element","tag":"code","props":{"className":["language-bash"],"code":"npm run dev\n","language":"bash","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"run"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"dev"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"playground"}]},{"type":"text","value":" folder contains the essentials to get a test Nuxt application up and running, it includes a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.config.js"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file. The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" includes a core set of layers used by Ripple to get a reference sdp site up and running, it also includes the new layer itself."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"playground"}]},{"type":"text","value":" folder is a fully functional Nuxt application and can be used to test the new layer in isolation."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The layers structure is almost identical to a normal Nuxt app, meaning you can utilise the same features and conventions as a standard Nuxt application. i.e. create a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pages"}]},{"type":"text","value":" folder for new pages, create a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" folder for new components, etc."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other useful commands:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm run build"}]},{"type":"text","value":" to do a production build of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".preview"}]},{"type":"text","value":" application (for testing purposes)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm run lint"}]},{"type":"text","value":" to lint the layer code with "},{"type":"element","tag":"a","props":{"href":"https://eslint.org/","rel":["nofollow"]},"children":[{"type":"text","value":"eslint"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm run test"}]},{"type":"text","value":" to run any unit tests with "},{"type":"element","tag":"a","props":{"href":"https://jestjs.io/","rel":["nofollow"]},"children":[{"type":"text","value":"jest"}]}]}]},{"type":"element","tag":"h2","props":{"id":"publishing-the-layer"},"children":[{"type":"text","value":"Publishing the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once the layer is ready to be published it can be published to npm or pushed to a remote git repository, "},{"type":"element","tag":"a","props":{"href":"https://github.com/","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://about.gitlab.com/","rel":["nofollow"]},"children":[{"type":"text","value":"GitLab"}]},{"type":"text","value":", and "},{"type":"element","tag":"a","props":{"href":"https://bitbucket.org/","rel":["nofollow"]},"children":[{"type":"text","value":"Bitbucket"}]},{"type":"text","value":" are supported.\nFor more on publishing to npm see "},{"type":"element","tag":"a","props":{"href":"https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry","rel":["nofollow"]},"children":[{"type":"text","value":"contributing packages to the npm registry"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"using-the-layer"},"children":[{"type":"text","value":"Using the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers can be added to any Nuxt site by including the layer in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" file under extends. If the layer is published to npm don't forget to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install"}]},{"type":"text","value":" it first."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"export default defineNuxtConfig({\n extends: [\n '@dpc-sdp/nuxt-ripple', // An npm installed package\n 'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0' // A tagged git repository\n ]\n})\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"extends: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/nuxt-ripple'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// An npm installed package\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// A tagged git repository\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also, make sure to check the layers documentation for any additional configuration that may be required."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To extend from a private repository, you need to add a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GIGET_AUTH=<token>"}]},{"type":"text","value":" environment variable, with an auth token from your git provider."}]}]},{"type":"element","tag":"h3","props":{"id":"caveats-when-using-layers-from-a-git-repository"},"children":[{"type":"text","value":"Caveats when using layers from a git repository"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a layer is added via a git repository and that layer has npm dependencies, you will need to manually install them within the Nuxt application utilising the layer. The Nuxt team are looking at auto-installing layer dependencies in the future, see "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/nuxt/issues/13367","rel":["nofollow"]},"children":[{"type":"text","value":"issue #13367"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You will also need to alias the dependencies in the Nuxt application, so they can be resolved to the correct package location. This can be done by adding an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alias"}]},{"type":"text","value":" object to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"export default defineNuxtConfig({\n alias: {\n 'date-fns': require.resolve('date-fns')\n }\n})\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"alias: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'date-fns'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": require."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'date-fns'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-082380{color:#953800;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-186825{color:#CF222E;}\n.ct-319862{color:#8250DF;}\n.ct-690235{color:#6E7781;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"creating-a-new-layer","depth":2,"text":"Creating a new layer"},{"id":"developing-the-layer","depth":2,"text":"Developing the layer"},{"id":"publishing-the-layer","depth":2,"text":"Publishing the layer"},{"id":"using-the-layer","depth":2,"text":"Using the layer","children":[{"id":"caveats-when-using-layers-from-a-git-repository","depth":3,"text":"Caveats when using layers from a git repository"}]}]}},"_type":"markdown","_id":"content:framework:3.guides:5.creating-new-layers.md","_source":"content","_file":"framework/3.guides/5.creating-new-layers.md","_extension":"md"},{"_path":"/framework/guides/dynamic-components","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Adding a new dynamic component","description":"Learn how to add a new dynamic page component to a content type","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/dynamic-components"},"children":[{"type":"text","value":"key concepts - dynamic components"}]},{"type":"text","value":" for a conceptual overview of what dynamic components are and how they are used within the SDP platform."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components comprise of the following elements:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A mapping function that will map the raw drupal api response to a Vue component and the props to pass to that Vue component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A Vue component that will render the component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A list of 'includes' to send to Drupal JSON API (See drupal docs for "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes","rel":["nofollow"]},"children":[{"type":"text","value":"Includes"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A list of content types that the dynamic component can be added to"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component then needs to be registered against the name of the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"paragraph"}]},{"type":"text","value":" in Drupal."}]},{"type":"element","tag":"h2","props":{"id":"registering-the-dynamic-component"},"children":[{"type":"text","value":"Registering the dynamic component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components need to registered inside a "},{"type":"element","tag":"a","props":{"href":"https://nitro.unjs.io/guide/plugins","rel":["nofollow"]},"children":[{"type":"text","value":"Nitro Plugins"}]},{"type":"text","value":". Nitro is the server engine used in Nuxt 3."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nitro Plugins can be added in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/server/plugins"}]},{"type":"text","value":" folder in your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"text","value":" method to register your component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"text","value":" takes the following parameters:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"name of the component in Drupal (paragraph name)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the mapping function, includes and list of content types"}]}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"// /server/plugins/my-content-type.ts\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n nitroApp.tide?.pageApi.setDynamicComponent('paragraph--my_dynamic_component', {\n mapping: (field) => { ... },\n includes: [ ... ],\n contentTypes: [ ... ]\n })\n})\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// /server/plugins/my-content-type.ts\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" (nitroApp"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" NitroApp) "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"{\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" nitroApp.tide?.pageApi."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'paragraph--my_dynamic_component'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"mapping"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"field"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" includes: [ "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" contentTypes: [ "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" })\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The individual elements of a dynamic component are covered below."}]},{"type":"element","tag":"h2","props":{"id":"the-mapping-function"},"children":[{"type":"text","value":"The mapping function"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mapping function takes the raw response from the drupal JSON API and returns a standard structure that ultimately ties the dynamic component with a Vue component."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'\n\ninterface IMyDynamicComponentProps {\n someProp1: boolean,\n someProp2: string\n}\n\nconst mappingFunction = (field): TideDynamicPageComponent<IMyDynamicComponentProps> => {\n return {\n // This should be the name to the Vue component you created\n component: 'MyDynamicComponent',\n\n // Always include a unique id\n id: field.drupal_internal__id.toString(),\n\n // Some components have titles above them, which you can add here. This is optional\n title: field.field_paragraph_title,\n\n // These props will be passed to `MyDynamicComponent`\n props: {\n someProp1: false,\n someProp2: field.field_paragraph_description\n }\n }\n}\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { TideDynamicPageComponent } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"IMyDynamicComponentProps"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"someProp1"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"someProp2"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"string\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"mappingFunction"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"field"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"TideDynamicPageComponent"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"IMyDynamicComponentProps"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// This should be the name to the Vue component you created\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" component: "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'MyDynamicComponent'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Always include a unique id\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" id: field.drupal_internal__id."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"(),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Some components have titles above them, which you can add here. This is optional\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" title: field.field_paragraph_title,\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// These props will be passed to `MyDynamicComponent`\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" props: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" someProp1: "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" someProp2: field.field_paragraph_description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-component"},"children":[{"type":"text","value":"The Vue component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a Vue component that will render your dynamic component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will be rendered each time your component appears on a page and will receive any props that were specified from the mapping function."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important note"}]},{"type":"text","value":": For this to work, your component needs to be registered globally. The simplest way to do this is to add the component to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/components/global"}]},{"type":"text","value":" folder in your layer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Because they are global it's also important to choose non generic names so that they don't clash and overwrite other dynamic components"}]}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"// /components/global/MyDynamicComponent.vue\n\n<script setup lang=\"ts\">\ndefineProps<{\n someProp1: boolean,\n someProp2: string\n}>()\n</script>\n\n<template>\n <div>\n {{someProp2}}\n </div>\n</template>\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// /components/global/MyDynamicComponent.vue\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"script setup lang"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<{\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"someProp1"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"someProp2"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"string\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}>()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {{someProp2}}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-list-of-includes"},"children":[{"type":"text","value":"The list of includes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component should specify an array of 'includes' that it needs in order to function properly."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"const includes = [\n 'field_landing_page_component.field_paragraph_accordion'\n]\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"includes"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_landing_page_component.field_paragraph_accordion'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"]"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-list-of-content-types"},"children":[{"type":"text","value":"The list of content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component should specify an array of 'content types' that the dynamic component can appear on."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"const contentTypes = [\n 'landing_page',\n 'some_content_type'\n]\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"contentTypes"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'landing_page'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'some_content_type'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"]"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-690235{color:#6E7781;}\n.ct-186825{color:#CF222E;}\n.ct-082380{color:#953800;}\n.ct-319862{color:#8250DF;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-109545{color:#0550AE;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"registering-the-dynamic-component","depth":2,"text":"Registering the dynamic component"},{"id":"the-mapping-function","depth":2,"text":"The mapping function"},{"id":"the-vue-component","depth":2,"text":"The Vue component"},{"id":"the-list-of-includes","depth":2,"text":"The list of includes"},{"id":"the-list-of-content-types","depth":2,"text":"The list of content types"}]}},"_type":"markdown","_id":"content:framework:3.guides:5.dynamic-components.md","_source":"content","_file":"framework/3.guides/5.dynamic-components.md","_extension":"md"},{"_path":"/framework/core-modules","_dir":"framework","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Core modules","description":"A listing of all current core Ripple layers and packages","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"View each package on NPM for their individual READMEs."}]},{"type":"element","tag":"h2","props":{"id":"core-ui-libraries"},"children":[{"type":"text","value":"Core UI Libraries"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-core","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-core"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-forms","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-forms"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"tide-api"},"children":[{"type":"text","value":"Tide API"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-api","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-api"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"nuxt-ripple-base-layer"},"children":[{"type":"text","value":"Nuxt-ripple base layer"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-ripple"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"core-content-types"},"children":[{"type":"text","value":"Core content types"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-landing-page","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-landing-page"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-event","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-event"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-grant","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-grant"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-media","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-media"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-news","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-news"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-publication","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-publication"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"other-core-modules"},"children":[{"type":"text","value":"Other core modules"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-search","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-search"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-analytics","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-ripple-analytics"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-preview","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-ripple-preview"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"scaffolding-testing-and-supporting-packages"},"children":[{"type":"text","value":"Scaffolding, testing and supporting packages"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-cli","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-ripple-cli"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-test-utils","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-test-utils"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"core-ui-libraries","depth":2,"text":"Core UI Libraries"},{"id":"tide-api","depth":2,"text":"Tide API"},{"id":"nuxt-ripple-base-layer","depth":2,"text":"Nuxt-ripple base layer"},{"id":"core-content-types","depth":2,"text":"Core content types"},{"id":"other-core-modules","depth":2,"text":"Other core modules"},{"id":"scaffolding-testing-and-supporting-packages","depth":2,"text":"Scaffolding, testing and supporting packages"}]}},"_type":"markdown","_id":"content:framework:4.core-modules.md","_source":"content","_file":"framework/4.core-modules.md","_extension":"md"}],"navigation":[{"title":"Ripple Design System","_path":"/","icon":"carbon:home","layout":"home"},{"title":"Design System","_path":"/design-system","children":[{"title":"About","_path":"/design-system/about","children":[{"title":"What is Ripple?","_path":"/design-system/about/what-is-ripple","layout":"page"},{"title":"Who's it for?","_path":"/design-system/about/whos-it-for","layout":"page"},{"title":"Support","_path":"/design-system/about/getting-support","layout":"page"},{"title":"Contributing","_path":"/design-system/about/contributing","layout":"page"}]},{"title":"Design","_path":"/design-system/design","children":[{"title":"Getting started","_path":"/design-system/design/getting-started","layout":"page"},{"title":"Our design principles","_path":"/design-system/design/our-design-principles","layout":"page"},{"title":"Design tokens","_path":"/design-system/design/design-tokens","layout":"page"},{"title":"Theming guidance for designers","_path":"/design-system/design/theming-guidance-for-designers","layout":"page"}]},{"title":"Develop","_path":"/design-system/develop","children":[{"title":"Getting started","_path":"/design-system/develop/getting-started","layout":"page"},{"title":"Contributing","_path":"/design-system/develop/contributing","layout":"page"},{"title":"Theme and brand application","_path":"/design-system/develop/theming","layout":"page"},{"title":"Usage","_path":"/design-system/develop/usage","children":[{"title":"Access to Github Packages","_path":"/design-system/develop/usage/access-to-github-packages","layout":"page"},{"title":"Vue","_path":"/design-system/develop/usage/vue","layout":"page"},{"title":"Nuxt","_path":"/design-system/develop/usage/nuxt","layout":"page"},{"title":"Web components","_path":"/design-system/develop/usage/webcomponents","layout":"page"},{"title":"Styles only","_path":"/design-system/develop/usage/css-only","layout":"page"}],"layout":"page"}]},{"title":"Styles","_path":"/design-system/styles","children":[{"title":"Colour","_path":"/design-system/styles/colour","layout":"page"},{"title":"Focus state","_path":"/design-system/styles/focus-state","layout":"page"},{"title":"Grid","_path":"/design-system/styles/grid","layout":"page"},{"title":"Icons","_path":"/design-system/styles/icons","layout":"page"},{"title":"Layer styles","_path":"/design-system/styles/layer-styles","layout":"page"},{"title":"Layout","_path":"/design-system/styles/layout","layout":"page"},{"title":"Logo","_path":"/design-system/styles/logo","layout":"page"},{"title":"Motion","_path":"/design-system/styles/motion","layout":"page"},{"title":"Spacing","_path":"/design-system/styles/spacing","layout":"page"},{"title":"Typography","_path":"/design-system/styles/typography","layout":"page"}]},{"title":"Components","_path":"/design-system/components","children":[{"title":"Accordion","_path":"/design-system/components/accordion","layout":"page"},{"title":"Acknowledgement","_path":"/design-system/components/acknowledgment","layout":"page"},{"title":"Alert","_path":"/design-system/components/alert","layout":"page"},{"title":"Block quote","_path":"/design-system/components/block-quote","layout":"page"},{"title":"Breadcrumb","_path":"/design-system/components/breadcrumb","layout":"page"},{"title":"Button","_path":"/design-system/components/button","layout":"page"},{"title":"Call to action","_path":"/design-system/components/call-to-action","layout":"page"},{"title":"Callout","_path":"/design-system/components/callout","layout":"page"},{"title":"Campaign banner","_path":"/design-system/components/campaign-banner","layout":"page"},{"title":"Card","_path":"/design-system/components/card","layout":"page"},{"title":"Carousel","_path":"/design-system/components/carousel","layout":"page"},{"title":"Category grid","_path":"/design-system/components/category-grid","layout":"page"},{"title":"Checkbox","_path":"/design-system/components/checkbox","layout":"page"},{"title":"Chip","_path":"/design-system/components/chip","layout":"page"},{"title":"Contact us","_path":"/design-system/components/contact-us","layout":"page"},{"title":"Date input","_path":"/design-system/components/date-input","layout":"page"},{"title":"Detail list","_path":"/design-system/components/detail-list","layout":"page"},{"title":"Dropdown","_path":"/design-system/components/dropdown","layout":"page"},{"title":"File","_path":"/design-system/components/file","layout":"page"},{"title":"Footer","_path":"/design-system/components/footer","layout":"page"},{"title":"Form alert","_path":"/design-system/components/form-alert","layout":"page"},{"title":"Form","_path":"/design-system/components/form","layout":"page"},{"title":"Header","_path":"/design-system/components/header","layout":"page"},{"title":"In-page navigation","_path":"/design-system/components/in-page-navigation","layout":"page"},{"title":"Input field","_path":"/design-system/components/input-field","layout":"page"},{"title":"Key dates","_path":"/design-system/components/key-dates","layout":"page"},{"title":"Media embed","_path":"/design-system/components/media-embed","layout":"page"},{"title":"Media fullscreen","_path":"/design-system/components/media-fullscreen","layout":"page"},{"title":"Media gallery","_path":"/design-system/components/media-gallery","layout":"page"},{"title":"Media","_path":"/design-system/components/media","layout":"page"},{"title":"Option button","_path":"/design-system/components/option-button","layout":"page"},{"title":"Page action","_path":"/design-system/components/page-action","layout":"page"},{"title":"Pagination","_path":"/design-system/components/pagination","layout":"page"},{"title":"Primary navigation","_path":"/design-system/components/primary-navigation","layout":"page"},{"title":"Profile","_path":"/design-system/components/profile","layout":"page"},{"title":"Radio button","_path":"/design-system/components/radio-button","layout":"page"},{"title":"Related links","_path":"/design-system/components/related-links","layout":"page"},{"title":"Results listing","_path":"/design-system/components/results-listing","layout":"page"},{"title":"Search bar","_path":"/design-system/components/search-bar","layout":"page"},{"title":"Skip link","_path":"/design-system/components/skip-link","layout":"page"},{"title":"Social share","_path":"/design-system/components/social-share","layout":"page"},{"title":"Statistics grid","_path":"/design-system/components/statistics-grid","layout":"page"},{"title":"Table","_path":"/design-system/components/table","layout":"page"},{"title":"Tabs","_path":"/design-system/components/tabs","layout":"page"},{"title":"Tag","_path":"/design-system/components/tag","layout":"page"},{"title":"Text area","_path":"/design-system/components/text-area","layout":"page"},{"title":"Timeline","_path":"/design-system/components/timeline","layout":"page"},{"title":"Vertical navigation","_path":"/design-system/components/vertical-navigation","layout":"page"}]}]},{"title":"Ripple Framework","_path":"/framework","children":[{"title":"Ripple Framework","_path":"/framework","layout":"page"},{"title":"Key Concepts","_path":"/framework/key-concepts","children":[{"title":"Nuxt","_path":"/framework/key-concepts/nuxt","layout":"page"},{"title":"Layers","_path":"/framework/key-concepts/nuxt-layers","layout":"page"},{"title":"API endpoints","_path":"/framework/key-concepts/api-endpoints","layout":"page"},{"title":"Content types","_path":"/framework/key-concepts/content-types","layout":"page"},{"title":"Dynamic components","_path":"/framework/key-concepts/dynamic-components","layout":"page"}]},{"title":"Guides","_path":"/framework/guides","children":[{"title":"Migrating from Ripple 1.x","_path":"/framework/guides/migrating","layout":"page"},{"title":"Setting up a new site","_path":"/framework/guides/new-sites","layout":"page"},{"title":"Applying theme and brand","_path":"/framework/guides/brand-application","layout":"page"},{"title":"Creating content types","_path":"/framework/guides/creating-content-types","layout":"page"},{"title":"Creating new layers","_path":"/framework/guides/creating-new-layers","layout":"page"},{"title":"Adding a new dynamic component","_path":"/framework/guides/dynamic-components","layout":"page"}]},{"title":"Core modules","_path":"/framework/core-modules","layout":"page"}],"layout":"page"}]} \ No newline at end of file +{"generatedAt":1710889916427,"generateTime":5156,"contents":[{"_path":"/","_dir":"","_draft":false,"_partial":false,"_locale":"","_empty":true,"title":"Ripple Design System","description":"Ripple is the design system for Victorian government digital products","icon":"carbon:home","layout":"home","primaryCTA":{"title":"For Designers","description":"Information for designers using Ripple to create brand Victoria compliant digital experiences.","image":{"src":"/assets/img/for-designers.png"},"url":"/design-system/design/getting-started"},"secondaryCTA":{"title":"For Developers","description":"How to get started implementing Ripple UI components in digital products.","image":{"src":"/assets/img/for-developers.png"},"url":"/design-system/develop/getting-started"},"modulesCTA":{"title":"Modules","description":"Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","url":"/framework"},"quickLink1":{"title":"About Ripple","description":"Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.","url":"/design-system/about/what-is-ripple"},"quickLink2":{"title":"Who should use it","description":"Ripple is built by government for government to deliver services Victorians trust and rely on.","url":"/design-system/about/whos-it-for"},"quickLink3":{"title":"Design principles","description":"The guiding principles that are the foundation of the Ripple Design System.","url":"/design-system/design/our-design-principles"},"framework":{"title":"Ripple framework","description":"Ripple framework contains the tools for building SDP sites using Ripple design system components.","url":"/framework"},"body":{"type":"root","children":[],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:1.index.md","_source":"content","_file":"1.index.md","_extension":"md"},{"_path":"/design-system/_markdown-reference-file","_dir":"design-system","_draft":false,"_partial":true,"_locale":"","_empty":false,"title":"Markdown Kitchen Sink (DEV ONLY)","description":"This is an example page to demonstrate and document the markdown features available in the docs site","draft":true,"layout":"page","links":[{"text":"Vic gov","url":"https://www.vic.gov.au/"},{"text":"Single Digital Presence","url":"https://www.vic.gov.au/single-digital-presence"}],"body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a more detailed markdown editing guide, see here "},{"type":"element","tag":"a","props":{"href":"https://www.markdownguide.org/basic-syntax/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.markdownguide.org/basic-syntax/"}]}]}]},{"type":"element","tag":"h2","props":{"id":"front-matter"},"children":[{"type":"text","value":"Front matter"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Front matter sits at the very top of a markdown file and contains metadata about a page. In our case, it contains things like the page title and description."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is the frontmatter for the page you are currently reading."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"---\ntitle: Kitchen sink\ndescription: Here's everything\nlayout: page\nlinks:\n - text: Vic gov\n url: https://www.vic.gov.au/\n - text: Single Digital Presence\n url: https://www.vic.gov.au/single-digital-presence\n---\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Kitchen sink\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Here's everything\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"layout"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"page\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"links"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Vic gov\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"https://www.vic.gov.au/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Single Digital Presence\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"headings"},"children":[{"type":"text","value":"Headings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headings are added using hash marks before text. The number of hash marks specifies the heading level (e.g. '##' = H2). Please don't use H1s in markdown, these are reserved for the page title, which is set in the front matter."}]},{"type":"element","tag":"h3","props":{"id":"example"},"children":[{"type":"text","value":"Example"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"## Heading level 2\n\n### Heading level 3\n\n#### Heading level 4\n\n##### Heading level 5\n\n###### Heading level 6\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"## Heading level 2\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"### Heading level 3\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"#### Heading level 4\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"##### Heading level 5\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"###### Heading level 6"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"heading-level-2"},"children":[{"type":"text","value":"Heading level 2"}]},{"type":"element","tag":"h3","props":{"id":"heading-level-3"},"children":[{"type":"text","value":"Heading level 3"}]},{"type":"element","tag":"h4","props":{"id":"heading-level-4"},"children":[{"type":"text","value":"Heading level 4"}]},{"type":"element","tag":"h5","props":{"id":"heading-level-5"},"children":[{"type":"text","value":"Heading level 5"}]},{"type":"element","tag":"h6","props":{"id":"heading-level-6"},"children":[{"type":"text","value":"Heading level 6"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"paragraph-text"},"children":[{"type":"text","value":"Paragraph text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Paragraphs are simply text seperated by an empty line."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"This is a paragraph\n\nThis is another paragraph\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"This is a paragraph\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"This is another paragraph"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a paragraph"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is another paragraph"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"emphasis"},"children":[{"type":"text","value":"Emphasis"}]},{"type":"element","tag":"h3","props":{"id":"italics"},"children":[{"type":"text","value":"Italics"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Here is *italic text*\n\nHere is also _italic text_\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"class":"ct-996367"},"children":[{"type":"text","value":"*italic text*\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is also "}]},{"type":"element","tag":"span","props":{"class":"ct-996367"},"children":[{"type":"text","value":"_italic text_"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"italic text"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is also "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"italic text"}]}]},{"type":"element","tag":"h3","props":{"id":"bold"},"children":[{"type":"text","value":"Bold"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Here is **bold text**\n\nHere is also __bold text__\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"class":"ct-996366"},"children":[{"type":"text","value":"**bold text**\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is also "}]},{"type":"element","tag":"span","props":{"class":"ct-996366"},"children":[{"type":"text","value":"__bold text__"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"bold text"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is also "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"bold text"}]}]},{"type":"element","tag":"h3","props":{"id":"strikethrough"},"children":[{"type":"text","value":"Strikethrough"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Here is ~~strikethrough text~~\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"~~strikethrough text~~"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"del","props":{},"children":[{"type":"text","value":"strikethrough text"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"horizontal-rules"},"children":[{"type":"text","value":"Horizontal Rules"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add a horizontal rule by using at least three of either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"_"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"These are all equivalent:\n---\n___\n***\n\nSo are these:\n------\n______\n******\n\nBut these won't work:\n--\n__\n**\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"These are all equivalent:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"___\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"***\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"So are these:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"------\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"______\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-109547"},"children":[{"type":"text","value":"******\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"But these won't work:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"--\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"__\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"**"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"blockquotes"},"children":[{"type":"text","value":"Blockquotes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Blockquotes are added with a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":">"}]},{"type":"text","value":" before the text."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"lists"},"children":[{"type":"text","value":"Lists"}]},{"type":"element","tag":"h3","props":{"id":"unordered"},"children":[{"type":"text","value":"Unordered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unordered lists are created by starting a line with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"+"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-"}]},{"type":"text","value":", or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"*"}]},{"type":"text","value":". Nested lists can be achieved through indentation, with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"2 spaces"}]},{"type":"text","value":" for each additional level."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"* Fruit\n * Berries\n - Strawberry\n - Blueberry\n * Classics\n - Apple\n - Banana\n* Vegetables\n + Broccoli\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Fruit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Berries\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Strawberry\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Blueberry\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Classics\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Apple\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Banana\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Vegetables\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Broccoli"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fruit"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Berries"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Strawberry"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Blueberry"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Classics"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Apple"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Banana"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Vegetables"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Broccoli"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"ordered"},"children":[{"type":"text","value":"Ordered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ordered lists are created by starting a line with a number and period (e.g. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1."}]},{"type":"text","value":"). Nested lists can be achieved through indentation, with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"4 spaces"}]},{"type":"text","value":" (different to the unordered list) for each additional level."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use any numbers, but it's more convenient to just use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"1."}]},{"type":"text","value":" for each item, the numbering will work automatically."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"This works:\n\n1. Lorem ipsum dolor sit amet\n 1. Lorem at massa\n 2. Adipiscing\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\nBut just do this, it's the same thing:\n\n1. Lorem ipsum dolor sit amet\n 1. Lorem at massa\n 1. Adipiscing\n1. Consectetur adipiscing elit\n1. Integer molestie lorem at massa\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"This works:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Lorem ipsum dolor sit amet\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"2."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Adipiscing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"2."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Consectetur adipiscing elit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"3."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Integer molestie lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"But just do this, it's the same thing:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Lorem ipsum dolor sit amet\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Adipiscing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Consectetur adipiscing elit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Integer molestie lorem at massa"}]}]}]}]}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lorem ipsum dolor sit amet"},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lorem at massa"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Adipiscing"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Consectetur adipiscing elit"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Integer molestie lorem at massa"}]}]},{"type":"element","tag":"h4","props":{"id":"starting-point"},"children":[{"type":"text","value":"Starting point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can start the list at any number like this:"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"64. foo\n1. bar\n1. blah\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"64."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" foo\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" bar\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" blah"}]}]}]}]}]},{"type":"element","tag":"ol","props":{"start":64},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"blah"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"links"},"children":[{"type":"text","value":"Links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hyperlinks can be added with the following syntax, the link text goes in the square brackets, followed by the url in round brackets."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Visit the [Victorian government website](https://www.vic.gov.au/)\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Visit the ["}]},{"type":"element","tag":"span","props":{"class":"ct-165920"},"children":[{"type":"text","value":"Victorian government website"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"](https://www.vic.gov.au/)"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/","rel":["nofollow"]},"children":[{"type":"text","value":"Victorian government website"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alternatively, if you don't need different link text you can just write the url directly"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"Here is the link to vic gov https://www.vic.gov.au/.\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here is the link to vic gov https://www.vic.gov.au/."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is the link to vic gov "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"code"},"children":[{"type":"text","value":"Code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's some "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"code inline"}]},{"type":"text","value":" in context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's some "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"codeInline"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'highlighted code inline'"}]}]},{"type":"text","value":" in context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Indented code"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"// Some comments\nline 1 of code\nline 2 of code\nline 3 of code\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"// Some comments\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"line 1 of code\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"line 2 of code\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"line 3 of code"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Block code \"fences\""}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"Sample text here...\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Sample text here..."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax highlighting"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"var foo = function (bar) {\n return bar++;\n};\n\nconsole.log(foo(5));\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" bar"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"};\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"));"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"tables"},"children":[{"type":"text","value":"Tables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tables can be added using a special format. More info here:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables","rel":["nofollow"]},"children":[{"type":"text","value":"Github markdown tables guide"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An example of a simple table"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"| Name | Description |\n| ------ | ---------------------------- |\n| Banana | Yellow, elongated, edible. |\n| Apple | 84% water, 15% carbohydrates |\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"| Name | Description |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"| ------ | ---------------------------- |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"| Banana | Yellow, elongated, edible. |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"| Apple | 84% water, 15% carbohydrates |"}]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Description"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Banana"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Yellow, elongated, edible."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Apple"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"84% water, 15% carbohydrates"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"images"},"children":[{"type":"text","value":"Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images can be added like this:"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"![Nils Olav - This is the alt text](/assets/img/temp/Nils_Olav_wide.jpg)\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"!["}]},{"type":"element","tag":"span","props":{"class":"ct-165920"},"children":[{"type":"text","value":"Nils Olav - This is the alt text"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"class":"ct-996364"},"children":[{"type":"text","value":"/assets/img/temp/Nils_Olav_wide.jpg"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Nils Olav - This is the alt text","src":"/assets/img/temp/Nils_Olav_wide.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By Lee Carson on Flickr - Nils Olav on Flickr, CC BY-SA 2.0, "},{"type":"element","tag":"a","props":{"href":"https://commons.wikimedia.org/w/index.php?curid=5080064","rel":["nofollow"]},"children":[{"type":"text","value":"https://commons.wikimedia.org/w/index.php?curid=5080064"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"custom-components"},"children":[{"type":"text","value":"Custom components"}]},{"type":"element","tag":"h3","props":{"id":"docsexample"},"children":[{"type":"text","value":"DocsExample"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsExample"}]},{"type":"text","value":" will display an component example from storybook, you will need to give it the id of the story you want to display."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are additional options you can use for this component:"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\nwithPadding: false\nhideNewTab: false\nhideCode: true\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"withPadding"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"hideNewTab"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"hideCode"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled",":hideCode":"true",":hideNewTab":"false",":withPadding":"true"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add toggle values in storybook and copy the the value of the args parameter in the URL to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"argsString"}]},{"type":"text","value":" option in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsExample"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Storybook controls","src":"/assets/img/temp/storybook-toggles.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Browser url bar","src":"/assets/img/temp/url-args.png"},"children":[]}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsExample\n---\nid: core-navigation-pagination--complex\nargsString: 'totalPages:50;currentPage:30;showTally:true'\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-pagination--complex\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"argsString"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'totalPages:50;currentPage:30;showTally:true'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex","argsString":"totalPages:50;currentPage:30;showTally:true"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also the theme and whether or not neutral buttons should be used."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\ntheme: 'light'\n---\n::\n\n::DocsExample\n---\nid: core-navigation-card--call-to-action\nuseNeutralButtons: true\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'light'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-card--call-to-action\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"useNeutralButtons"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled","theme":"docsTheme3"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action",":useNeutralButtons":"true"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsthemechooser"},"children":[{"type":"text","value":"DocsThemeChooser"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can wrap "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsExample"}]},{"type":"text","value":" components with a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsThemeChooser"}]},{"type":"text","value":" component. This will allow the user to choose which theme the examples inside the theme chooser will display with."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsThemeChooser\n ::DocsExample\n ---\n id: core-navigation-button--default-filled\n ---\n ::\n ::DocsExample\n ---\n id: core-navigation-button--default-outlined\n ---\n ::\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsThemeChooser\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"core-navigation-button--default-outlined\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"docsimageexample"},"children":[{"type":"text","value":"DocsImageExample"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsImageExample"}]},{"type":"text","value":" will display an image in a way this is visually similar to the component examples, you will need to give it the url (src) of the image, the alt text (alt) and an optional caption."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsImageExample\n---\nsrc: /assets/img/InlineLink-Focus.png\nalt: An example of focus state colour contrast\n---\nHere's the **rich** text `caption`\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsImageExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"/assets/img/InlineLink-Focus.png\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"alt"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"An example of focus state colour contrast\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"Here's the "}]},{"type":"element","tag":"span","props":{"class":"ct-996366"},"children":[{"type":"text","value":"**rich**"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" text "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"`caption`\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/InlineLink-Focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" text "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"caption"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example without caption:"}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsImageExample\n---\nsrc: /assets/img/InlineLink-Focus.png\nalt: An example of focus state colour contrast\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsImageExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"/assets/img/InlineLink-Focus.png\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"alt"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"An example of focus state colour contrast\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/InlineLink-Focus.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docscard-docscardgrid"},"children":[{"type":"text","value":"DocsCard && DocsCardGrid"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards can also be added. Ensure that you wrap them with DocsCardGrid so that they are layout out correctly. DocsCard use the 'promo' type card under the hood."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsCardGrid\n ::DocsCard\n ---\n title: Button\n url: /design-system/components/button\n ---\n Here's the summary text\n ::\n\n ::DocsCard\n ---\n title: Vic gov\n url: https://www.vic.gov.au/\n ---\n Here's the summary text\n ::\n\n ::DocsCard\n ---\n title: Code standards\n url: /framework/code-standards\n ---\n Here's the summary text\n ::\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsCardGrid\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Button\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"/design-system/components/button\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Vic gov\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"https://www.vic.gov.au/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Code standards\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"/framework/code-standards\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-card-grid","props":{},"children":[{"type":"element","tag":"docs-card","props":{"title":"Button","url":"/design-system/components/button"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]},{"type":"element","tag":"docs-card","props":{"title":"Vic gov","url":"https://www.vic.gov.au/"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]},{"type":"element","tag":"docs-card","props":{"title":"Code standards","url":"/framework/code-standards"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]}]},{"type":"element","tag":"h3","props":{"id":"docscolourtable"},"children":[{"type":"text","value":"DocsColourTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsColourTable"}]},{"type":"text","value":" will display a table of themed colours, you just need to specify which colours to show.\nThis can be either direct colours like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clr.type.primary.contrast"}]},{"type":"text","value":", colour groups like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clr.type.primary"}]},{"type":"text","value":" or a mix of both."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"\n::DocsColourTable\n---\ncolours:\n - clr.primary\n - clr.link\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsColourTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"colours"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"clr.primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"clr.link\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.primary\",\"clr.link\"]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsgradienttable"},"children":[{"type":"text","value":"DocsGradientTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsGradientTable"}]},{"type":"text","value":" will display the themed horizontal and vertical gradients."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsGradientTable\n:::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsGradientTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":::"}]}]}]}]}]},{"type":"element","tag":"docs-gradient-table","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsicontable"},"children":[{"type":"text","value":"DocsIconTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsIconsTable"}]},{"type":"text","value":" will display a table of icons, you just need to specify which icon group to show, this will be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alert"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"social"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsIconTable\n---\ngroup: alert\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsIconTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"group"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"alert\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-icon-table","props":{"group":"alert"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsiconsizingtable"},"children":[{"type":"text","value":"DocsIconSizingTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsIconSizingTable"}]},{"type":"text","value":" will display a table of icons with a preview of the icon at the specified size."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsIconSizingTable\n---\nsizes:\n- s : 16px\n- m : 24px\n- l : 32px\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsIconSizingTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"s"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" : "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"16px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"m"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" : "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"24px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"l"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" : "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"32px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-icon-sizing-table","props":{":sizes":"[{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docslayerstyletable"},"children":[{"type":"text","value":"DocsLayerStyleTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsLayerStyleTable"}]},{"type":"text","value":" will display a table of layer styles with a preview of that style in action, you just need to specify the type of style to show, this will be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"border"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"border.radius"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"elevation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsLayerStyleTable\n---\ntype: border.radius\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsLayerStyleTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"border.radius\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border.radius"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docstypetable"},"children":[{"type":"text","value":"DocsTypeTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsTypeTable"}]},{"type":"text","value":" will display a table of type styles, you just need to specify the type of type style to show. This will be either "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"weight"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"size"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"lh"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ls"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsTypeTable\n---\ntype: size\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsTypeTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"size\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-type-table","props":{"type":"size"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docstypeclasstable"},"children":[{"type":"text","value":"DocsTypeClassTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"DocsTypeClassTable"}]},{"type":"text","value":" will display a table of type styles, with a preview of that style in action."}]},{"type":"element","tag":"code","props":{"className":["language-md"],"code":"::DocsTypeClassTable\n---\ntype:\n- style :\n - Heading 1\n - values :\n - Font size: 32px / 56px\n - Line height: 36px / 60px\n - Letter spacing: 1.4% / 0.8%\n - Font weight: Bold (700)\n - rpl-type-h1\n- style :\n - Heading 1 Highlight\n - values :\n - Font size: 32px / 56px\n - Line height: 36px / 60px\n - Letter spacing: 1.4% / 0.8%\n - Font weight: Bold (700)\n - rpl-type-h1-highlight\n---\n::\n","language":"md","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"DocsTypeClassTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Heading 1\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"values"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Font size"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"32px / 56px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Line height"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"36px / 60px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Letter spacing"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"1.4% / 0.8%\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Font weight"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Bold (700)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"rpl-type-h1\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"- "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Heading 1 Highlight\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"values"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Font size"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"32px / 56px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Line height"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"36px / 60px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Letter spacing"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"1.4% / 0.8%\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"Font weight"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"Bold (700)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" - "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"rpl-type-h1-highlight\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]}]"},"children":[]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-996368{color:#24292F;}\n.ct-872567{color:#116329;}\n.ct-165924{color:#0A3069;}\n.ct-109547{color:#0550AE;font-weight:bold;}\n.ct-996367{color:#24292F;font-style:italic;}\n.ct-996366{color:#24292F;font-weight:bold;}\n.ct-082380{color:#953800;}\n.ct-165920{color:#0A3069;text-decoration:bold;}\n.ct-186825{color:#CF222E;}\n.ct-319862{color:#8250DF;}\n.ct-109545{color:#0550AE;}\n.ct-996364{color:#24292F;text-decoration:bold;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"front-matter","depth":2,"text":"Front matter"},{"id":"headings","depth":2,"text":"Headings","children":[{"id":"example","depth":3,"text":"Example"}]},{"id":"heading-level-2","depth":2,"text":"Heading level 2","children":[{"id":"heading-level-3","depth":3,"text":"Heading level 3"}]},{"id":"paragraph-text","depth":2,"text":"Paragraph text"},{"id":"emphasis","depth":2,"text":"Emphasis","children":[{"id":"italics","depth":3,"text":"Italics"},{"id":"bold","depth":3,"text":"Bold"},{"id":"strikethrough","depth":3,"text":"Strikethrough"}]},{"id":"horizontal-rules","depth":2,"text":"Horizontal Rules"},{"id":"blockquotes","depth":2,"text":"Blockquotes"},{"id":"lists","depth":2,"text":"Lists","children":[{"id":"unordered","depth":3,"text":"Unordered"},{"id":"ordered","depth":3,"text":"Ordered"}]},{"id":"links","depth":2,"text":"Links"},{"id":"code","depth":2,"text":"Code"},{"id":"tables","depth":2,"text":"Tables"},{"id":"images","depth":2,"text":"Images"},{"id":"custom-components","depth":2,"text":"Custom components","children":[{"id":"docsexample","depth":3,"text":"DocsExample"},{"id":"docsthemechooser","depth":3,"text":"DocsThemeChooser"},{"id":"docsimageexample","depth":3,"text":"DocsImageExample"},{"id":"docscard-docscardgrid","depth":3,"text":"DocsCard && DocsCardGrid"},{"id":"docscolourtable","depth":3,"text":"DocsColourTable"},{"id":"docsgradienttable","depth":3,"text":"DocsGradientTable"},{"id":"docsicontable","depth":3,"text":"DocsIconTable"},{"id":"docsiconsizingtable","depth":3,"text":"DocsIconSizingTable"},{"id":"docslayerstyletable","depth":3,"text":"DocsLayerStyleTable"},{"id":"docstypetable","depth":3,"text":"DocsTypeTable"},{"id":"docstypeclasstable","depth":3,"text":"DocsTypeClassTable"}]}]}},"_type":"markdown","_id":"content:design-system:_markdown-reference-file.md","_source":"content","_file":"design-system/_markdown-reference-file.md","_extension":"md"},{"_path":"/design-system/about/_5.accessibility-statement","_dir":"about","_draft":false,"_partial":true,"_locale":"","_empty":false,"title":"Accessibility statement","description":"Page description","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"content-goes-here"},"children":[{"type":"text","value":"Content goes here"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"content-goes-here","depth":2,"text":"Content goes here"}]}},"_type":"markdown","_id":"content:design-system:1.about:_5.accessibility-statement.md","_source":"content","_file":"design-system/1.about/_5.accessibility-statement.md","_extension":"md"},{"_path":"/design-system/about/what-is-ripple","_dir":"about","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"What is Ripple?","description":"Ripple is the digital design system of the Victorian government","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes it easier for citizens to "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"find"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"understand"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" government information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes creating Brand Victoria approved content, assets and sites easy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"increases delivery speed for digital products and services."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Over 50 government websites use Ripple, including our main "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"vic.gov.au"}]},{"type":"text","value":" platform. These sites attract millions of views per month."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au","class":"docs-center-img","src":"/assets/img/sites.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"why-use-ripple"},"children":[{"type":"text","value":"Why use Ripple?"}]},{"type":"element","tag":"h3","props":{"id":"ripple-solves-the-hard-problems-so-you-dont-have-to"},"children":[{"type":"text","value":"Ripple solves the hard problems so you don’t have to"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We spent the past 5 years refining Ripple based on user feedback to ensure it:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"meets the publishing needs of government users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes it easier for citizens to interact with government services."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple users can be confident their site’s design and development is based on industry standards and best practices for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accessibility"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"SEO"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"security"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"performance."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can easily navigate sites regardless of technical ability, location or device."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Designers and developers can create consistent digital experiences across Victorian Government sites."}]},{"type":"element","tag":"h3","props":{"id":"ripple-gives-you-efficient-and-reusable-digital-resources"},"children":[{"type":"text","value":"Ripple gives you efficient and reusable digital resources"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple promotes efficiency and reuse by providing reusable styles, components and patterns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It provides a set of standards to manage design at scale, to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reduce redundancy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"create a shared language"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide visual consistency."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense."}]},{"type":"element","tag":"h3","props":{"id":"ripple-is-by-government-for-government"},"children":[{"type":"text","value":"Ripple is by government, for government"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise."}]},{"type":"element","tag":"h2","props":{"id":"who-can-use-ripple"},"children":[{"type":"text","value":"Who can use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is open to all departments or agencies that use Victorian Government branding. Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/about/whos-it-for"},"children":[{"type":"text","value":"Who's it for?"}]},{"type":"text","value":" page for more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"text","value":" page for more information."}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-find-out-more"},"children":[{"type":"text","value":"How do I find out more?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/work-sdp","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/work-sdp"}]},{"type":"text","value":" or contact "},{"type":"element","tag":"a","props":{"href":"mailto:digital@dpc.vic.gov.au"},"children":[{"type":"text","value":"digital@dpc.vic.gov.au"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To find out more about the Single Digital Presence program, please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"why-use-ripple","depth":2,"text":"Why use Ripple?","children":[{"id":"ripple-solves-the-hard-problems-so-you-dont-have-to","depth":3,"text":"Ripple solves the hard problems so you don’t have to"},{"id":"ripple-gives-you-efficient-and-reusable-digital-resources","depth":3,"text":"Ripple gives you efficient and reusable digital resources"},{"id":"ripple-is-by-government-for-government","depth":3,"text":"Ripple is by government, for government"}]},{"id":"who-can-use-ripple","depth":2,"text":"Who can use Ripple?"},{"id":"how-do-i-find-out-more","depth":2,"text":"How do I find out more?"}]}},"_type":"markdown","_id":"content:design-system:1.about:1.what-is-ripple.md","_source":"content","_file":"design-system/1.about/1.what-is-ripple.md","_extension":"md"},{"_path":"/design-system/about/whos-it-for","_dir":"about","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Who's it for?","description":"Built by government, for government.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"who-can-use-ripple"},"children":[{"type":"text","value":"Who can use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is available to all departments and agencies that use Victorian Government branding."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Designers"}]},{"type":"text","value":" can easily and quickly create wireframes, high-fidelity designs and prototypes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Developers"}]},{"type":"text","value":" can access technical specifications to create pixel-perfect code."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Content creators"}]},{"type":"text","value":" can design page concepts, knowing their layouts will accurately reflect the finished product."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Product owners"}]},{"type":"text","value":" and stakeholders can review designs and provide feedback."}]}]},{"type":"element","tag":"h2","props":{"id":"what-should-i-use-ripple-for"},"children":[{"type":"text","value":"What should I use Ripple for?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" platform."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also means Ripple is not a general purpose design system for use outside of Brand Victoria."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand."}]}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-use-ripple"},"children":[{"type":"text","value":"How do I use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"building your own components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"referencing the Ripple styles"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"importing the Ripple components."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"text","value":" page for instructions."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"who-can-use-ripple","depth":2,"text":"Who can use Ripple?"},{"id":"what-should-i-use-ripple-for","depth":2,"text":"What should I use Ripple for?"},{"id":"how-do-i-use-ripple","depth":2,"text":"How do I use Ripple?"}]}},"_type":"markdown","_id":"content:design-system:1.about:2.whos-it-for.md","_source":"content","_file":"design-system/1.about/2.whos-it-for.md","_extension":"md"},{"_path":"/design-system/about/getting-support","_dir":"about","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Support","description":"How to get help","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple design system"}]},{"type":"text","value":" is maintained by the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" team at the Victorian Department of Government Services."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can reach out to us via the following channels:"}]},{"type":"element","tag":"h3","props":{"id":"for-technical-and-project-support"},"children":[{"type":"text","value":"For technical and project support"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"join the discussion on "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"log a request through our "},{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portals","rel":["nofollow"]},"children":[{"type":"text","value":"helpdesk"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"sign up to the "},{"type":"element","tag":"a","props":{"href":"https://vic-sdp.slack.com","rel":["nofollow"]},"children":[{"type":"text","value":"SDP Slack"}]},{"type":"text","value":" (Open to projects with an MoU for application support)"}]}]},{"type":"element","tag":"h2","props":{"id":"design-enquiries"},"children":[{"type":"text","value":"Design enquiries"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Email: "},{"type":"element","tag":"a","props":{"href":"mailto:design@dpc.vic.gov.au"},"children":[{"type":"text","value":"design@dpc.vic.gov.au"}]}]},{"type":"element","tag":"h2","props":{"id":"general-enquiries"},"children":[{"type":"text","value":"General enquiries"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497","rel":["nofollow"]},"children":[{"type":"text","value":"Raise a request"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"for-technical-and-project-support","depth":3,"text":"For technical and project support"},{"id":"design-enquiries","depth":2,"text":"Design enquiries"},{"id":"general-enquiries","depth":2,"text":"General enquiries"}]}},"_type":"markdown","_id":"content:design-system:1.about:3.getting-support.md","_source":"content","_file":"design-system/1.about/3.getting-support.md","_extension":"md"},{"_path":"/design-system/about/contributing","_dir":"about","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Contributing","description":"Found an issue?","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple design system"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple framework"}]},{"type":"text","value":" are open source and released under an Apache 2.0 License."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is maintained by the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" team at the Victorian Department of Government Services.\nIf you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To propose a change, you will need to have a free GitHub account. Please see the "},{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub docs"}]},{"type":"text","value":" to create one if you haven't already."}]},{"type":"element","tag":"h2","props":{"id":"submit-a-bug-report"},"children":[{"type":"text","value":"Submit a bug report"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Check existing the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"discussions"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"issues"}]},{"type":"text","value":" to see if the issue has already been discussed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill out the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D","rel":["nofollow"]},"children":[{"type":"text","value":"bug report issue template"}]}]}]},{"type":"element","tag":"h2","props":{"id":"documentation-changes"},"children":[{"type":"text","value":"Documentation changes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change."}]},{"type":"element","tag":"h3","props":{"id":"to-create-an-issue"},"children":[{"type":"text","value":"To create an issue:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To log a docs site issue please do the following"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Log in to GitHub"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D","rel":["nofollow"]},"children":[{"type":"text","value":"Log an issue on the GitHub Repository"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill in the form, providing as much detail as possible"}]}]},{"type":"element","tag":"h3","props":{"id":"to-propose-an-edit-directly"},"children":[{"type":"text","value":"To propose an edit directly"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub docs"}]},{"type":"text","value":" for more information about creating a pull request."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Log in to GitHub"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Click the \"Propose a change to this page on GitHub\" link at the bottom of each content page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make a change to the markdown in the editor. See "},{"type":"element","tag":"a","props":{"href":"https://www.markdownguide.org/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.markdownguide.org/"}]},{"type":"text","value":" for information on syntax"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Describe the change in the commit message"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new pull request from the \"forked\" version of the repository"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This pull request will be reviewed by the SDP development team and we may ask for changes or revisions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If the Pull Request is approved it will be merged and included in the next Ripple release."}]}]},{"type":"element","tag":"h2","props":{"id":"propose-a-new-feature"},"children":[{"type":"text","value":"Propose a new feature"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have a proposal for a new feature to the Ripple design system please see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#enquiries-and-support","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/ripple-design-system#enquiries-and-support"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For development partners wishing to propose a new feature to Ripple Framework please do the following:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Check existing the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc","rel":["nofollow"]},"children":[{"type":"text","value":"discussions"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"issues"}]},{"type":"text","value":" to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you are confident that the feature is something worth progressing, please fill out the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D","rel":["nofollow"]},"children":[{"type":"text","value":"New feature proposal"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"submit-a-bug-report","depth":2,"text":"Submit a bug report"},{"id":"documentation-changes","depth":2,"text":"Documentation changes","children":[{"id":"to-create-an-issue","depth":3,"text":"To create an issue:"},{"id":"to-propose-an-edit-directly","depth":3,"text":"To propose an edit directly"}]},{"id":"propose-a-new-feature","depth":2,"text":"Propose a new feature"}]}},"_type":"markdown","_id":"content:design-system:1.about:4.contributing.md","_source":"content","_file":"design-system/1.about/4.contributing.md","_extension":"md"},{"_path":"/design-system/design/getting-started","_dir":"design","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Getting started","description":null,"layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"styles"}]},{"type":"text","value":" - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"guidance"}]},{"type":"text","value":" - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences."}]}]},{"type":"element","tag":"h2","props":{"id":"first-steps"},"children":[{"type":"text","value":"First steps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some key areas of the Ripple Design System that will help you create your digital product."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/design-tokens/"},"children":[{"type":"text","value":"Design tokens"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Sign up for access to the Ripple 2.0 Figma file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"Theming"}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-ripple-20-figma-file"},"children":[{"type":"text","value":"The Ripple 2.0 Figma file"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 Design System is available in "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/","rel":["nofollow"]},"children":[{"type":"text","value":"Figma"}]},{"type":"text","value":". It contains all the design assets needed to design, prototype and share."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"To create quality user experiences, do not use the Figma file in isolation."}]},{"type":"text","value":" This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality."}]},{"type":"element","tag":"h3","props":{"id":"figma-file-access"},"children":[{"type":"text","value":"Figma file access"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Sign up to Figma"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Create a free "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/pricing/","rel":["nofollow"]},"children":[{"type":"text","value":"Figma Starter account"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Install Ripple font"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Ripple uses the VIC font family."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-fonts","rel":["nofollow"]},"children":[{"type":"text","value":"Download and install VIC"}]},{"type":"text","value":" to use this typeface in Figma."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Request access to Ripple Figma file"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Ripple has been built as a Figma project."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Request access to the Ripple 2.0 Design System"}]},{"type":"text","value":"."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"You will receive access to the Ripple Design System Figma file."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Add Ripple to your Figma account"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Add the Ripple 2.0 Design System Figma file to your Figma account."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Set up Asset Library"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"In your Figma account, go to the Getting Started page."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Follow these instructions to set up the Asset Library."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"first-steps","depth":2,"text":"First steps"},{"id":"the-ripple-20-figma-file","depth":2,"text":"The Ripple 2.0 Figma file","children":[{"id":"figma-file-access","depth":3,"text":"Figma file access"}]}]}},"_type":"markdown","_id":"content:design-system:2.design:1.getting-started.md","_source":"content","_file":"design-system/2.design/1.getting-started.md","_extension":"md"},{"_path":"/design-system/design/our-design-principles","_dir":"design","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Our design principles","description":"There are 4 design principles that are the foundation of the Ripple Design System.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 4 design principles that underpin the Ripple Design System:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Inclusive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Efficient."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Flexible."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Easy."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System uses these principles when making design decisions."}]},{"type":"element","tag":"h2","props":{"id":"inclusive"},"children":[{"type":"text","value":"Inclusive"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Accessibility is top priority."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Collaborative in design."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Transparent documentation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Friendly, helpful and trustworthy."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include all users, abilities and backgrounds in the process and design intent."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Support best practices, provide guidance and build trust with the community."}]},{"type":"element","tag":"h2","props":{"id":"efficient"},"children":[{"type":"text","value":"Efficient"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Less is more."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Clean and clear."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Considered."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Economic design."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Think holistically to create considered sustainable outcomes that make sense to all users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Increase efficiencies while reducing complexities and risks."}]},{"type":"element","tag":"h2","props":{"id":"flexible"},"children":[{"type":"text","value":"Flexible"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Responsive to data."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Responsive to sub-brands."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Considers context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Iterative improvements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use meaningful evidence to improve impact and add value."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Find improvement opportunities that elevate the experience for multiple contexts and end users."}]},{"type":"element","tag":"h2","props":{"id":"easy"},"children":[{"type":"text","value":"Easy"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Easy to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contribute to"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"learn and understand"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"create and recreate"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"find information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider the needs and experiences of end users of Victorian digital products."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"inclusive","depth":2,"text":"Inclusive"},{"id":"efficient","depth":2,"text":"Efficient"},{"id":"flexible","depth":2,"text":"Flexible"},{"id":"easy","depth":2,"text":"Easy"}]}},"_type":"markdown","_id":"content:design-system:2.design:2.our-design-principles.md","_source":"content","_file":"design-system/2.design/2.our-design-principles.md","_extension":"md"},{"_path":"/design-system/design/design-tokens","_dir":"design","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Design tokens","description":"Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"what-is-a-design-token"},"children":[{"type":"text","value":"What is a Design token?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By storing design decisions, they replace the need to use static values (for example, hex code values for colour)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple Design System has tokens for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"colour"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"typography"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"spacing"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"elevation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"borders"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"motion values."}]}]},{"type":"element","tag":"h2","props":{"id":"why-use-design-tokens"},"children":[{"type":"text","value":"Why use design tokens?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using design tokens keeps your UI consistent across different platforms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens are the single source of truth. You can use them across designs and code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since design tokens let you make value changes at scale, design language changes are easier to make."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products."}]},{"type":"element","tag":"h2","props":{"id":"ripple-design-tokens"},"children":[{"type":"text","value":"Ripple design tokens"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A Ripple token has 2 parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a token name, such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an associated value, such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"#0052C2"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The token's value can be one of several things: colour, a typeface, a measurement or even another token."}]},{"type":"element","tag":"h2","props":{"id":"how-to-read-ripple-design-token-names"},"children":[{"type":"text","value":"How to read Ripple design token names"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Knowing how to read a token name helps you find the right token faster."}]},{"type":"element","tag":"h3","props":{"id":"parts-of-design-token-names"},"children":[{"type":"text","value":"Parts of design token names"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl"}]},{"type":"text","value":": design system"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"clr"}]},{"type":"text","value":" (colour) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" (typography) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sp"}]},{"type":"text","value":" (spacing) for example: token type"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"primary-accessible"}]},{"type":"text","value":" (a descriptive name) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"3"}]},{"type":"text","value":" (a number), for example: see below"}]}]},{"type":"element","tag":"h3","props":{"id":"examples"},"children":[{"type":"text","value":"Examples"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-clr-primary-accessible"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]}]}]},{"type":"element","tag":"h3","props":{"id":"steps-and-explanations"},"children":[{"type":"text","value":"Steps and explanations"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Start all design tokens with the system name: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl"}]},{"type":"text","value":" is for Ripple."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Then, place an abbreviation for the token type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"clr"}]},{"type":"text","value":" is for colour; type is for typography; "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sp"}]},{"type":"text","value":" is for spacing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"primary-accessible"}]},{"type":"text","value":" in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"4"}]},{"type":"text","value":" in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System."}]}]},{"type":"element","tag":"h2","props":{"id":"best-practices"},"children":[{"type":"text","value":"Best practices"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose tokens based on meaning rather than appearance only"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose the token with the most specific meaning that is available and applies to your content’s role on the site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not choose tokens based only how the end result looks on your site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later"}]}]},{"type":"element","tag":"h2","props":{"id":"why-are-tokens-important-for-design"},"children":[{"type":"text","value":"Why are tokens important for design?"}]},{"type":"element","tag":"h3","props":{"id":"purpose-driven"},"children":[{"type":"text","value":"Purpose-driven"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale."}]},{"type":"element","tag":"h3","props":{"id":"single-source-of-truth"},"children":[{"type":"text","value":"Single source of truth"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation."}]},{"type":"element","tag":"h3","props":{"id":"system-wide-updates"},"children":[{"type":"text","value":"System-wide updates"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They let developers and designers change system-wide themes and contexts, using only a single update."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code."}]},{"type":"element","tag":"h2","props":{"id":"for-developers"},"children":[{"type":"text","value":"For developers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For information for developers using tokens to theme Ripple components see the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guide"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"what-is-a-design-token","depth":2,"text":"What is a Design token?"},{"id":"why-use-design-tokens","depth":2,"text":"Why use design tokens?"},{"id":"ripple-design-tokens","depth":2,"text":"Ripple design tokens"},{"id":"how-to-read-ripple-design-token-names","depth":2,"text":"How to read Ripple design token names","children":[{"id":"parts-of-design-token-names","depth":3,"text":"Parts of design token names"},{"id":"examples","depth":3,"text":"Examples"},{"id":"steps-and-explanations","depth":3,"text":"Steps and explanations"}]},{"id":"best-practices","depth":2,"text":"Best practices"},{"id":"why-are-tokens-important-for-design","depth":2,"text":"Why are tokens important for design?","children":[{"id":"purpose-driven","depth":3,"text":"Purpose-driven"},{"id":"single-source-of-truth","depth":3,"text":"Single source of truth"},{"id":"system-wide-updates","depth":3,"text":"System-wide updates"}]},{"id":"for-developers","depth":2,"text":"For developers"}]}},"_type":"markdown","_id":"content:design-system:2.design:3.design-tokens.md","_source":"content","_file":"design-system/2.design/3.design-tokens.md","_extension":"md"},{"_path":"/design-system/design/theming-guidance-for-designers","_dir":"design","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Theming guidance for designers","description":null,"layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Jump to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#create-a-custom-theme"},"children":[{"type":"text","value":"Create a custom theme"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#component-specific-theming"},"children":[{"type":"text","value":"Component-specific theming"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#theme-accessibility"},"children":[{"type":"text","value":"Theme accessibility"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#automatic-colour-token-logic"},"children":[{"type":"text","value":"Automatic colour token logic"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"create-a-custom-theme"},"children":[{"type":"text","value":"Create a custom theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple has been designed with a primary and accent colour. These inform the colour framework."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A link colour, focus colour and optional gradient are also required when theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary, accent and focus colours can be either light or dark:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To classify your colour as light or dark, we recommend the use "},{"type":"element","tag":"a","props":{"href":"https://webaim.org/resources/contrastchecker/","rel":["nofollow"]},"children":[{"type":"text","value":"WebAim Colour Contrast Checker"}]},{"type":"text","value":" or the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/community/plugin/733159460536249875","rel":["nofollow"]},"children":[{"type":"text","value":"Figma plugin, A11y - Colour Contrast Checker"}]},{"type":"text","value":" to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Guidance for creating your own theme can be found on the Theming page of the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 2.0 Design System Figma file"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you don’t have access, you can "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"request access to view the Ripple 2.0 Design System"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"component-specific-theming"},"children":[{"type":"text","value":"Component-specific theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 options for component-specific styling:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom."}]}]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Neutral can be applied to the following components:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"buttons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"header (only reverse and image variants)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"footer."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised."}]},{"type":"element","tag":"h3","props":{"id":"custom"},"children":[{"type":"text","value":"Custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom component theming can only be applied to the footer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To learn more about custom styling please see the Theming page of the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 2.0 Design System Figma file"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theme-accessibility"},"children":[{"type":"text","value":"Theme accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-guidelines-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Brand Victoria guidelines"}]},{"type":"text","value":" for more information)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html","rel":["nofollow"]},"children":[{"type":"text","value":"1.4.3 Contrast Minimum (Level AA)"}]},{"type":"text","value":"\nThe visual presentation of "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-text","rel":["nofollow"]},"children":[{"type":"text","value":"text"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-images-of-text","rel":["nofollow"]},"children":[{"type":"text","value":"images of text"}]},{"type":"text","value":" has a "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio","rel":["nofollow"]},"children":[{"type":"text","value":"contrast ratio"}]},{"type":"text","value":" of at least 4.5:1, except for the following:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-large-scale","rel":["nofollow"]},"children":[{"type":"text","value":"Large-scale"}]},{"type":"text","value":" text and images of large-scale text have a contrast ratio of at least 3:1;"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text or images of text that are part of an inactive "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-user-interface-components","rel":["nofollow"]},"children":[{"type":"text","value":"user interface component"}]},{"type":"text","value":", that are "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-pure-decoration","rel":["nofollow"]},"children":[{"type":"text","value":"pure decoration"}]},{"type":"text","value":", that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that is part of a logo or brand name has no contrast requirement."}]}]},{"type":"element","tag":"h3","props":{"id":"accessibility-testing-requirements"},"children":[{"type":"text","value":"Accessibility testing requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html","rel":["nofollow"]},"children":[{"type":"text","value":"minimum contrast ratio of 4:5:1"}]},{"type":"text","value":" for normal text contrast, 3:1 for large text and non-text elements must be met."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Links are required to meet a ratio of 4.5:1 colour contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dark type / rpl-clr-dark / #1A1A1A"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light type / rpl-clr-light / #FFFFFF."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The link colour is tested against 3 colours:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light type / rpl-clr-light / #FFFFFF"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-neutral-100 / #F5F5F5"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-accent-alt / #E6F5FD (example hex only)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/community/plugin/733343906244951586","rel":["nofollow"]},"children":[{"type":"text","value":"Figma plugin 'Color Blind'"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"colour-token-automatic-logic"},"children":[{"type":"text","value":"Colour token automatic logic"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is a full list of colour tokens required to theme the Ripple 2.0 Design System."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements.\nFor example, if the primary colour is classified as dark:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast will automatically be rpl-clr-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible will automatically be rpl-clr-primary."}]}]},{"type":"element","tag":"h3","props":{"id":"core"},"children":[{"type":"text","value":"Core"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary-alt"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary-alpha"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary')"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-accent"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-accent-alt"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-focus"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-link"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient-horizontal"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient-vertical"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"typography-colour-tokens"},"children":[{"type":"text","value":"Typography colour tokens"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast-alpha"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-type-primary-contrast')"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-accent-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-accent’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-alt-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-focus-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-focus’ contrast requirements)"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"footer-specific-optional"},"children":[{"type":"text","value":"Footer-specific (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See: "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#component-specific-theming"},"children":[{"type":"text","value":"component-specific theming"}]},{"type":"text","value":"."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-footer"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom or automatic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-footer-alt"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom or automatic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-footer-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-footer’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-footer-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-footer’ contrast requirements)"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"automatic-colour-token-logic"},"children":[{"type":"text","value":"Automatic Colour Token Logic"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF)."}]}]},{"type":"element","tag":"h3","props":{"id":"primary-access-focus-and-link"},"children":[{"type":"text","value":"Primary, Access, Focus and Link"}]},{"type":"element","tag":"h4","props":{"id":"primary"},"children":[{"type":"text","value":"Primary"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary-alpha"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary at 50% opacity"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary at 50% opacity"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast-alpha"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast at 75% opacity"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast at 75% opacity"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-primary-alt-accessible"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rlpl-clr-primary-alt"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-accent-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"focus"},"children":[{"type":"text","value":"Focus"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-type-focus-contrast"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"link"},"children":[{"type":"text","value":"Link"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"If Primary ‘Dark’"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"If Primary ‘Light’"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-link"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Custom"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"gradient"},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Including a gradient is optional for theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a gradient is not used, 'rpl-clr-accent' will be used in its place."}]},{"type":"element","tag":"h4","props":{"id":"gradient-1"},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Accent"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient-horizontal"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient (90 degrees)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-accent"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient-vertical"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-gradient (180 degrees)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-accent"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"create-a-custom-theme","depth":2,"text":"Create a custom theme"},{"id":"component-specific-theming","depth":2,"text":"Component-specific theming","children":[{"id":"neutral","depth":3,"text":"Neutral"},{"id":"custom","depth":3,"text":"Custom"}]},{"id":"theme-accessibility","depth":2,"text":"Theme accessibility","children":[{"id":"accessibility-testing-requirements","depth":3,"text":"Accessibility testing requirements"}]},{"id":"colour-token-automatic-logic","depth":2,"text":"Colour token automatic logic","children":[{"id":"core","depth":3,"text":"Core"},{"id":"typography-colour-tokens","depth":3,"text":"Typography colour tokens"},{"id":"footer-specific-optional","depth":3,"text":"Footer-specific (optional)"}]},{"id":"automatic-colour-token-logic","depth":2,"text":"Automatic Colour Token Logic","children":[{"id":"primary-access-focus-and-link","depth":3,"text":"Primary, Access, Focus and Link"},{"id":"gradient","depth":3,"text":"Gradient"}]}]}},"_type":"markdown","_id":"content:design-system:2.design:4.theming-guidance-for-designers.md","_source":"content","_file":"design-system/2.design/4.theming-guidance-for-designers.md","_extension":"md"},{"_path":"/design-system/develop/getting-started","_dir":"develop","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Getting started","description":"Information for developers using the Ripple 2 UI libraries","layout":"page","links":[{"text":"Github","url":"https://github.com/dpc-sdp/ripple-framework"},{"text":"Storybook","url":"/storybook"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-core"}]},{"type":"text","value":": A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-forms"}]},{"type":"text","value":": A collection of form inputs and support for building complex forms via "},{"type":"element","tag":"a","props":{"href":"https://formkit.com/","rel":["nofollow"]},"children":[{"type":"text","value":"Formkit"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"These docs are for Ripple 2"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple","rel":["nofollow"]},"children":[{"type":"text","value":"original Ripple GitHub repo"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Are you developing a site on the SDP platform?"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For information about using Ripple in SDP sites, visit the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework for SDP documentation"}]}]}]},{"type":"element","tag":"h2","props":{"id":"accessing-the-source-code"},"children":[{"type":"text","value":"Accessing the Source code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is an open source project and the source code can be found in the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework","rel":["nofollow"]},"children":[{"type":"text","value":"ripple-framework monorepo on Github"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core","rel":["nofollow"]},"children":[{"type":"text","value":"View "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-core"}]},{"type":"text","value":" on Github"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms","rel":["nofollow"]},"children":[{"type":"text","value":"View "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-forms"}]},{"type":"text","value":" on Github"}]}]}]},{"type":"element","tag":"h2","props":{"id":"viewing-examples-in-storybook"},"children":[{"type":"text","value":"Viewing examples in Storybook"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Storybook has information about props and slots that each Vue component supports. "},{"type":"element","tag":"a","props":{"href":"/storybook"},"children":[{"type":"text","value":"View the Ripple storybook"}]},{"type":"text","value":" to start exploring the available components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most of the examples found on this documentation site link directly examples in storybook."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"usage"}]},{"type":"text","value":" guide for information about getting started with the different ways of implementing Ripple."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"accessing-the-source-code","depth":2,"text":"Accessing the Source code"},{"id":"viewing-examples-in-storybook","depth":2,"text":"Viewing examples in Storybook"},{"id":"usage","depth":2,"text":"Usage"}]}},"_type":"markdown","_id":"content:design-system:3.develop:1.getting-started.md","_source":"content","_file":"design-system/3.develop/1.getting-started.md","_extension":"md"},{"_path":"/design-system/develop/contributing","_dir":"develop","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Contributing","description":"Information for developers wishing to contribute to the Ripple 2 UI libraries","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When contributing or participating in discussions, ensure that you are following our "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md","rel":["nofollow"]},"children":[{"type":"text","value":"contributor code of conduct"}]}]}]},{"type":"element","tag":"h2","props":{"id":"report-an-issue"},"children":[{"type":"text","value":"Report an issue"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you find an issue in Ripple, you can create an issue in github here "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/dpc-sdp/ripple-framework/issues"}]},{"type":"text","value":". Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue."}]},{"type":"element","tag":"h2","props":{"id":"join-the-discussion"},"children":[{"type":"text","value":"Join the discussion"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do you have an idea for a new component or feature? Use the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"Discussions"}]},{"type":"text","value":" feature in Ripple Github repo to start the conversation."}]},{"type":"element","tag":"h2","props":{"id":"writing-code"},"children":[{"type":"text","value":"Writing code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are ready to write some code in the Ripple git repo, please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md","rel":["nofollow"]},"children":[{"type":"text","value":"Contributing guide"}]},{"type":"text","value":" in Github."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"report-an-issue","depth":2,"text":"Report an issue"},{"id":"join-the-discussion","depth":2,"text":"Join the discussion"},{"id":"writing-code","depth":2,"text":"Writing code"}]}},"_type":"markdown","_id":"content:design-system:3.develop:2.contributing.md","_source":"content","_file":"design-system/3.develop/2.contributing.md","_extension":"md"},{"_path":"/design-system/develop/theming","_dir":"develop","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Theme and brand application","description":"Information for developers using Ripple 2 UI libraries","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple allows for customisation of it's components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]}]},{"type":"element","tag":"h2","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS Variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is fully theme-able using "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties","rel":["nofollow"]},"children":[{"type":"text","value":"CSS variables"}]},{"type":"text","value":", this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site."}]},{"type":"element","tag":"h2","props":{"id":"example"},"children":[{"type":"text","value":"Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To override theme values, simply set the css variable at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" or an element that wraps elements you want to theme."}]},{"type":"element","tag":"code","props":{"className":["language-css"],"code":":root {\n --rpl-clr-primary: #6B19A3;\n}\n","language":"css","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":root"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"--rpl-clr-primary"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"#6B19A3"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/colour"},"children":[{"type":"text","value":"colour"}]},{"type":"text","value":" page for a list of theme-able colours."}]},{"type":"element","tag":"h2","props":{"id":"assets"},"children":[{"type":"text","value":"Assets"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the following components for guidance on providing graphic elements to theme your site:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/styles/logo"},"children":[{"type":"text","value":"Logos"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/header"},"children":[{"type":"text","value":"Header"}]}]}]},{"type":"element","tag":"h2","props":{"id":"brand-application-in-sdp-sites"},"children":[{"type":"text","value":"Brand application in SDP sites"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"SDP Ripple framework"}]},{"type":"text","value":" section for more information on customising SDP websites and applying brand."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-109545{color:#0550AE;}\n.ct-996368{color:#24292F;}\n.ct-082380{color:#953800;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"css-variables","depth":2,"text":"CSS Variables"},{"id":"example","depth":2,"text":"Example"},{"id":"assets","depth":2,"text":"Assets"},{"id":"brand-application-in-sdp-sites","depth":2,"text":"Brand application in SDP sites"}]}},"_type":"markdown","_id":"content:design-system:3.develop:2.theming.md","_source":"content","_file":"design-system/3.develop/2.theming.md","_extension":"md"},{"_path":"/design-system/develop/usage","_dir":"develop","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Usage","description":"Ripple components can be used in several different ways depending on your project needs.","layout":"page","links":[{"text":"Github","url":"https://github.com/dpc-sdp/ripple-framework"},{"text":"Storybook","url":"/storybook"}],"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"using-ripple-ui-components"},"children":[{"type":"text","value":"Using Ripple UI components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Whilst Ripple is built to implement sites using a framework built on Vue JS and Nuxt, its modular architecture allows adopting different parts depending on your requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","src":"/assets/img/modules/rpl-modules.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI libraries are usable in the following contexts:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"svg","props":{"id":"docs-sprite","ariaHidden":"true","className":["rpl-svg-sprite--hidden"]},"children":[{"type":"element","tag":"defs","props":{},"children":[{"type":"element","tag":"symbol","props":{"xmlns":"http://www.w3.org/2000/svg","id":"icon-check","viewBox":"0 0 24 24"},"children":[{"type":"element","tag":"path","props":{"d":"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"},"children":[]}]}]}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Library"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS styles"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Vue Components"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Ripple Framework (Nuxt)"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Web components"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Ripple UI Core"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Partial support"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Ripple UI Forms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"not supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-cancel"},"children":[]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"using-in-an-sdp-website"},"children":[{"type":"text","value":"Using in an SDP website"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For documentation on using Ripple with Nuxt in SDP sites, visit the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework documentation"}]}]}]},{"type":"element","tag":"h3","props":{"id":"github-packages"},"children":[{"type":"text","value":"Github Packages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is hosted publicly on Github Packages (ghcr) under the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@dpc/sdp"}]},{"type":"text","value":" namespace, please read these "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage/access-to-github-packages"},"children":[{"type":"text","value":"setup instructions for accessing Github Packages"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"using-ripple-ui-components","depth":2,"text":"Using Ripple UI components","children":[{"id":"using-in-an-sdp-website","depth":3,"text":"Using in an SDP website"},{"id":"github-packages","depth":3,"text":"Github Packages"}]}]}},"_type":"markdown","_id":"content:design-system:3.develop:3.usage.md","_source":"content","_file":"design-system/3.develop/3.usage.md","_extension":"md"},{"_path":"/design-system/develop/usage/access-to-github-packages","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Access to Github Packages","description":"How to access and use repos hosted on Github Packages.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NPM allows the use of multiple repo hosts, as long as they can be identified by namespace."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is hosted publicly on Github Packages (ghcr) under the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@dpc/sdp"}]},{"type":"text","value":" namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, create a Personal Access Token on Github:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Visit "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/settings/tokens"}]},{"type":"text","value":" and select "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate new token"}]},{"type":"text","value":" > "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate new token (classic)"}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic","src":"/img/generate.jpg","style":"width:360px"},"children":[]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill in the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note"}]},{"type":"text","value":" and choose an "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Expiration"}]},{"type":"text","value":" - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days","src":"/img/token.jpg","style":"width:505px"},"children":[]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Set the scope to only allow "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"read:packages"}]},{"type":"text","value":", and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate"}]},{"type":"text","value":" token"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of scope, with only read:packages selected","src":"/img/permissions.jpg","style":"width:827px"},"children":[]},{"type":"element","tag":"ol","props":{"start":4},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Store the resulting token somewhere secure, and add it to either a user "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".npmrc"}]},{"type":"text","value":" (recommended) or the project-level "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".npmrc"}]},{"type":"text","value":" (the url on line 2 below is protocol-less, not a comment):"}]}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=<github personal access token>\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"@dpc-sdp:registry=https://npm.pkg.github.com\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"//npm.pkg.github.com/:_authToken=<github personal access token>"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:1.access-to-github-packages.md","_source":"content","_file":"design-system/3.develop/4.usage/1.access-to-github-packages.md","_extension":"md"},{"_path":"/design-system/develop/usage/vue","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Vue","description":"How to use Ripple components with Vue.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue or index.js file):"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use a component, import it from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@dpc-sdp/ripple-ui-core/vue"}]},{"type":"text","value":", note the addition of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/vue"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"<script setup>\nimport { RplButton } from '@dpc-sdp/ripple-ui-core/vue';\n</script>\n\n<template>\n <RplButton variant=\"outlined\" />\n</template>\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"import "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" RplButton "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" from '@dpc-sdp/ripple-ui-core/vue';\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"RplButton"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"variant"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"outlined\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please see this "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-vue-example","rel":["nofollow"]},"children":[{"type":"text","value":"example app"}]},{"type":"text","value":" for a basic demonstration of how to use Ripple components in a Vue app."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-186825{color:#CF222E;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-872567{color:#116329;}\n.ct-109545{color:#0550AE;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:2.vue.md","_source":"content","_file":"design-system/3.develop/4.usage/2.vue.md","_extension":"md"},{"_path":"/design-system/develop/usage/nuxt","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Nuxt","description":"How to use Ripple components with Nuxt in a non-SDP context.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI exports a nuxt module that you can add to your nuxt config, note the addition of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/nuxt"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"export default defineNuxtConfig({\n modules: [\n '@dpc-sdp/ripple-ui-core/nuxt'\n ]\n})\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"modules: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/nuxt'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue file):"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is no need to import the components as they will be registered globally by the nuxt module"}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"<template>\n <RplButton variant=\"outlined\" />\n</template>\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"RplButton"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"variant"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"outlined\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are not using SDP, the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework documentation"}]},{"type":"text","value":" is a good starting point for any Nuxt development using Ripple."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-186825{color:#CF222E;}\n.ct-082380{color:#953800;}\n.ct-319862{color:#8250DF;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-872567{color:#116329;}\n.ct-109545{color:#0550AE;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:3.nuxt.md","_source":"content","_file":"design-system/3.develop/4.usage/3.nuxt.md","_extension":"md"},{"_path":"/design-system/develop/usage/webcomponents","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Web components","description":"How to use the web component exports with other front-end systems.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.\n"},{"type":"element","tag":"a","props":{"href":"https://www.webcomponents.org/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.webcomponents.org/"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/658","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As with the other methods, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":" and then install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A basic example of how to use the web component exports can be found under "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/examples/webcomponents","rel":["nofollow"]},"children":[{"type":"text","value":"examples/webcomponents"}]},{"type":"text","value":" in the ripple-framework monorepo."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:4.webcomponents.md","_source":"content","_file":"design-system/3.develop/4.usage/4.webcomponents.md","_extension":"md"},{"_path":"/design-system/develop/usage/css-only","_dir":"usage","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Styles only","description":"Using the design system styles without a front-end framework.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI core exports it's CSS stylesheets directly. If you have a use case where you can't use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can import CSS styles from the ripple-ui-core package."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend that you lock the version of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@dpc-sdp/ripple-ui-core"}]},{"type":"text","value":" so that any future changes of styles without changes to markup do not break your application."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-186825{color:#CF222E;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:5.css-only.md","_source":"content","_file":"design-system/3.develop/4.usage/5.css-only.md","_extension":"md"},{"_path":"/design-system/styles/colour","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Colour","description":"Colour plays an important role in creating a consistent and strong visual digital products and services.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default colours, made up of two blues, reflect vic.gov.au branding. This strengthens the association with the Victorian Government."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The design system contains a colour framework. You can change it if your site requires department or entity branding."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you're meeting WCAG requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you change your core brand colours, your styles and components will re-theme automatically using the design system's colour framework."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more guidance on theming options, see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming/"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"You don’t need to use hex colours in code."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation."}]}]},{"type":"element","tag":"h2","props":{"id":"core-palette"},"children":[{"type":"text","value":"Core palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The core palette includes primary and secondary colours."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It's used in combination with the primary colour to create a more dynamic and engaging visual experience."}]}]},{"type":"element","tag":"h3","props":{"id":"primary"},"children":[{"type":"text","value":"Primary"}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.primary\"]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.accent\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"neutral-palette"},"children":[{"type":"text","value":"Neutral palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Neutral palette is on a colour scale of white to black."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 10 steps represent this scale based on our requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Neutral colours are consistent throughout the design system. They are for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text colours"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"borders"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"other elements, like a neutral background."}]}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.neutral\"]"},"children":[]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.light\",\"clr.dark\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"typography-colours"},"children":[{"type":"text","value":"Typography colours"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Interaction colours are in addition to the core colour palette. This guarantees accessible text."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.type.default\",\"clr.type.light\",\"clr.type.primary.contrast\",\"clr.type.accent.contrast\"]"},"children":[]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.link\",\"clr.link-visited\",\"clr.focus\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"gradients"},"children":[{"type":"text","value":"Gradients"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Gradients bring attention to components or information. Only use them on occasion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All gradients should appear from dark to light in their usage."}]},{"type":"element","tag":"docs-gradient-table","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"sematics"},"children":[{"type":"text","value":"Sematics"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Warning"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using them outside of their semantic meaning."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These colours help signal to users the meaning of some components. For example, for alerts or error messages."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.information\",\"clr.success\",\"clr.warning\",\"clr.error\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"focus"},"children":[{"type":"text","value":"Focus"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/focus-state/"},"children":[{"type":"text","value":"focus state"}]},{"type":"text","value":" for guidance."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.focus\"]"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see theming guidance for designers or developers."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"core-palette","depth":2,"text":"Core palette","children":[{"id":"primary","depth":3,"text":"Primary"},{"id":"accent","depth":3,"text":"Accent"}]},{"id":"neutral-palette","depth":2,"text":"Neutral palette"},{"id":"typography-colours","depth":2,"text":"Typography colours"},{"id":"gradients","depth":2,"text":"Gradients"},{"id":"sematics","depth":2,"text":"Sematics"},{"id":"focus","depth":2,"text":"Focus"},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:4.styles:colour.md","_source":"content","_file":"design-system/4.styles/colour.md","_extension":"md"},{"_path":"/design-system/styles/focus-state","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Focus state","description":"Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some users use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states help users understand which element is currently selected and ready for interaction."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Focus states are orange and neutral-800, aiming to conform to the WCAG 2.1 Level AA "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html","rel":["nofollow"]},"children":[{"type":"text","value":"non-text contrast"}]},{"type":"text","value":" on any background colour."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have chosen this orange colour as it is a direct opposite of our primary colour. This allows all colourblind users to see a visual difference. Focus state styling also removes any border radius to create a bigger visual difference to surrounding elements."}]},{"type":"element","tag":"h3","props":{"id":"inline-style"},"children":[{"type":"text","value":"Inline style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The inline focus state helps links stand out from the rest of the content on a page. When a link receives focus, it will underline and change background colour. Other components and elements that look like links use the inline style."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/focus-inline-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-inline"}]}]},{"type":"element","tag":"h3","props":{"id":"block-style"},"children":[{"type":"text","value":"Block style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The block style completely highlights a section or whole component with the focus state. For example, when a button receives focus, a border is added to the bottom of the container and the background colour will change."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Focus Link Visual Block Sample","src":"/assets/img/focus-block-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-block"}]}]},{"type":"element","tag":"h3","props":{"id":"outline-focus-state-style"},"children":[{"type":"text","value":"Outline focus state style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The outline styles are for when form inputs are focused. When a form field receives focus, it adds a border. If the element already has a border, the border gets thicker."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Focus Link Visual Outline Focus Sample","src":"/assets/img/focus-outline-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-outline"}]}]},{"type":"element","tag":"h3","props":{"id":"modified-focus-states-for-components"},"children":[{"type":"text","value":"Modified focus states for components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The alert component has a modified focus state colour. This is consistent across all alert variants. It meets colour contrast requirements on all semantic colours, including danger and warning."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The modified styling uses a white background in place of the orange, still with the dark content and border."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Component Modified Focus State Sample","src":"/assets/img/focus-alert-focus.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS Variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The focus state has three CSS Variables."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Swatch"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Element"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"swatch","props":{"colour":"#FF9E1B"},"children":[]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Background Fill"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"#FF9E1B"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-focus"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"swatch","props":{"colour":"#1A1A1A"},"children":[]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Content / Text / Icons"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"#1A1A1A"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-focus-contrast"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"swatch","props":{"colour":"#1A1A1A"},"children":[]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Bottom Border"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"#1A1A1A"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For advice on focus state theming, see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming/"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"inline-style","depth":3,"text":"Inline style"},{"id":"block-style","depth":3,"text":"Block style"},{"id":"outline-focus-state-style","depth":3,"text":"Outline focus state style"},{"id":"modified-focus-states-for-components","depth":3,"text":"Modified focus states for components"},{"id":"css-variables","depth":3,"text":"CSS Variables"},{"id":"theming","depth":3,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:4.styles:focus-state.md","_source":"content","_file":"design-system/4.styles/focus-state.md","_extension":"md"},{"_path":"/design-system/styles/grid","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Grid","description":"With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grids are a crucial component of any design system. They provide a framework for arranging content in an appealing and structured manner."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed the grid for a high degree of flexibility and responsiveness."}]},{"type":"element","tag":"h2","props":{"id":"breakpoints"},"children":[{"type":"text","value":"Breakpoints"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple has 5 breakpoints. These ensure content is at an optimal layout for readability and accessibility."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Width"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Active content area"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"<575px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"288 – 543px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"S"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"576 – 767px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"544 – 735px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"768 – 991px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"736 – 927px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"992 – 1199px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"864 – 1071px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XL"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1200px +"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1040px"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"grids"},"children":[{"type":"text","value":"Grids"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The grid is made up of three elements: columns, gutters, and margins."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Visual of basic grid / column / gutter / margin anatomy","src":"/assets/img/Grid-Grid-Anatomy.png"},"children":[]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Margins"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Gutter"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Column type / width"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • <575px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"S • 576 – 767px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • 768 – 991px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L • 992 – 1199px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XL • 1200px +"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"28px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Fixed / 61px"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the grid system to structure your content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most vic.gov.au pages follow a ‘two-thirds and one-third’ layout. But, the grid system allows for more combinations if needed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your main content should always be in a two-thirds column. This is even if you’re not using a corresponding one-third column for secondary content."}]},{"type":"element","tag":"h3","props":{"id":"column-layouts"},"children":[{"type":"text","value":"Column layouts"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Column Span"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Layout"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"12"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Full"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • S • M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Half"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • S • M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Two thirds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"One third"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"One quarter"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L • XL"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"breakpoints","depth":2,"text":"Breakpoints"},{"id":"grids","depth":2,"text":"Grids"},{"id":"usage","depth":2,"text":"Usage","children":[{"id":"column-layouts","depth":3,"text":"Column layouts"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:grid.md","_source":"content","_file":"design-system/4.styles/grid.md","_extension":"md"},{"_path":"/design-system/styles/icons","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Icons","description":"Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons are a visual representation of an action, idea, or object. They provide a quick and easy way to communicate information. They can also enhance the usability of a design."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Ripple Design System's icon set for a consistent user experience and a cohesive look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add icons to components or pair them with text. Icons should have a clear relationship with their corresponding text or action. This keeps them accessible to users with visual impairments or disabilities."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using icons alone, as one user may interpret them differently to another."}]},{"type":"element","tag":"h2","props":{"id":"icon-library"},"children":[{"type":"text","value":"Icon Library"}]},{"type":"element","tag":"h4","props":{"id":"alerts"},"children":[{"type":"text","value":"Alerts"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"alert"},"children":[]},{"type":"element","tag":"h4","props":{"id":"social"},"children":[{"type":"text","value":"Social"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"social"},"children":[]},{"type":"element","tag":"h4","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"standard"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Accessibility tip"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using an icon by itself, ensure it's using the right label for screen readers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using an icon and text, ensure only the text gets read out."}]}]},{"type":"element","tag":"h2","props":{"id":"application"},"children":[{"type":"text","value":"Application"}]},{"type":"element","tag":"h3","props":{"id":"sizing"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System displays icons at four sizes (12px, 16px, 24px, 32px) depending on their type, use and screen size."}]},{"type":"element","tag":"docs-icon-sizing-table","props":{":sizes":"[{\"xs\":\"12px\"},{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"spacing"},"children":[{"type":"text","value":"Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure you use the right amount of space around an icon to allow for legibility. At the least, icons must have clear space of 50% of the height/width of the icon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Visual of min space","src":"/assets/img/Icon-Clear-space.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For accessibility, ensure you:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"wrap icons within their interactive component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specify if an icon is decorative and informative by assigning the property in code"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"use descriptive and meaningful titles for informative icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"use icons to represent the same action or idea."}]}]},{"type":"element","tag":"h2","props":{"id":"styling"},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tag":"h3","props":{"id":"colour"},"children":[{"type":"text","value":"Colour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a background changes the colour of the text (for example, a button) the icon should take on the same colour as the text."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons used to represent a state should use the correct colour. For example, an icon used in a success notification should use rpl-clr-success."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--success"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"icon-library","depth":2,"text":"Icon Library"},{"id":"application","depth":2,"text":"Application","children":[{"id":"sizing","depth":3,"text":"Sizing"},{"id":"spacing","depth":3,"text":"Spacing"}]},{"id":"accessibility","depth":2,"text":"Accessibility"},{"id":"styling","depth":2,"text":"Styling","children":[{"id":"colour","depth":3,"text":"Colour"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:icons.md","_source":"content","_file":"design-system/4.styles/icons.md","_extension":"md"},{"_path":"/design-system/styles/layer-styles","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Layer styles","description":null,"layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"border"},"children":[{"type":"text","value":"Border"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use a border to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separate or segment blocks or sections of content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight important elements such as featured content or a call to action"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"aid information hierarchy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"support navigational structure"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight an active navigation item."}]}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Find examples of borders that add visual consistency on the "},{"type":"element","tag":"a","props":{"href":"/design-system/components/in-page-navigation/"},"children":[{"type":"text","value":"in-page navigation"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"/design-system/components/card/"},"children":[{"type":"text","value":"cards"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/design-system/components/contact-us/"},"children":[{"type":"text","value":"contact us"}]},{"type":"text","value":" pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Borders can also segment content (like on banners)."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-in-page-navigation--in-page-navigation"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"border-radius"},"children":[{"type":"text","value":"Border Radius"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've defined a set of radius values for use."}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border.radius"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage-1"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border radius is on containers such as buttons, cards and form inputs."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a container has a defined border radius, but is in focus, discard the border radius."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A 0px value is applied for consistency and clarity."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"elevation"},"children":[{"type":"text","value":"Elevation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation adds depth to components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer."}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"elevation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage-2"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation is on components such as cards, button (elevated variant only) and breadcrumbs."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-breadcrumbs--default-story"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"border","depth":2,"text":"Border","children":[{"id":"usage","depth":3,"text":"Usage"}]},{"id":"border-radius","depth":2,"text":"Border Radius","children":[{"id":"usage-1","depth":3,"text":"Usage"}]},{"id":"elevation","depth":2,"text":"Elevation","children":[{"id":"usage-2","depth":3,"text":"Usage"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:layer-styles.md","_source":"content","_file":"design-system/4.styles/layer-styles.md","_extension":"md"},{"_path":"/design-system/styles/layout","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Layout","description":"Layouts are common page composition patterns that offer ways of structuring components and content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always design for small screens first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For most types of pages, use either a ‘two-thirds’ or a ‘two-thirds and one-third’ layout. Doing this reduces long lines of text that can make a page hard to read on desktop devices. This approach should limit lines of text to 75 characters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should never assume what devices people are using. This is why you should design for different screen sizes instead of specific devices."}]},{"type":"element","tag":"h2","props":{"id":"page-layouts"},"children":[{"type":"text","value":"Page layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 standard page layouts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Full width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Two column - right side."}]}]},{"type":"element","tag":"h3","props":{"id":"full-width"},"children":[{"type":"text","value":"Full width"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Displays the main content area the full width of the container."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of full width layout","src":"/assets/img/layout-full-width.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"two-column"},"children":[{"type":"text","value":"Two column"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Displays a right hand sidebar that stacks on <991px breakpoints. The main content area is always visible."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of two column layout","src":"/assets/img/layout-two-column.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"white-space"},"children":[{"type":"text","value":"White Space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use adequate white space in the layout to separate elements and create a sense of hierarchy. This helps to make elements on the page easier to distinguish and understand, and creates visual harmony."}]},{"type":"element","tag":"h3","props":{"id":"page-section-spacing"},"children":[{"type":"text","value":"Page Section Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Spacing is used between the ‘above’, ‘body’ and ‘below’ content sections."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For both XS and S breakpoints, section spacing is added between the body section and sidebar section when in use."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of page section layout spacing","src":"/assets/img/layout-page-spacing.png"},"children":[]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • <576px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"S • 576-767px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • 768-991px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"48px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-10"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L • 992-1199px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-12"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XL • 1200px+"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-13"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"content-layout-spacing"},"children":[{"type":"text","value":"Content Layout Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We define spacing between components and elements at a breakpoint level. This compliments the grid and applied layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of content layout spacing","src":"/assets/img/layout-content-spacing.png"},"children":[]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Sidebar Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Sidebar CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XS • <576px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"S • 576-767px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"M • 768-991px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"L • 992-1199px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"XL • 1200px+"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-9"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-9"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"page-layouts","depth":2,"text":"Page layouts","children":[{"id":"full-width","depth":3,"text":"Full width"},{"id":"two-column","depth":3,"text":"Two column"}]},{"id":"white-space","depth":2,"text":"White Space","children":[{"id":"page-section-spacing","depth":3,"text":"Page Section Spacing"},{"id":"content-layout-spacing","depth":3,"text":"Content Layout Spacing"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:layout.md","_source":"content","_file":"design-system/4.styles/layout.md","_extension":"md"},{"_path":"/design-system/styles/logo","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Logo","description":"The visual representation of vic.gov.au and the Victorian Government.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"vicgovau-logo"},"children":[{"type":"text","value":"vic.gov.au logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vic.gov.au logo is the primary logo used in the design system."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"vic.gov.au logo","src":"/assets/img/Logo-vicgov.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-using-our-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Download logo"}]}]}]},{"type":"element","tag":"h3","props":{"id":"clear-space"},"children":[{"type":"text","value":"Clear space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The clear space for the vic.gov.au logo is 100% of the height of the ‘V’ across all applications."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Clear space visual","src":"/assets/img/Logo-vicgov-Clear-Space.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"co-branding"},"children":[{"type":"text","value":"Co-branding"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where the vic.gov.au logo appears next to another logo, it should be:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"centred vertically"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a minimum distance of 16px"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a divider line."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Co-branded visual","src":"/assets/img/Logo-vicgov-cobrand.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"sizing"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vic.gov.au logo should be 16px in height on all screens."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"No modification"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't change the logo. This includes changing its colour, adding effects, or altering its shape."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helps to maintain the integrity and consistency of the logo."}]}]},{"type":"element","tag":"h3","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always add alternative text to the logo. This is for screen reader users."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"victoria-state-government-logo"},"children":[{"type":"text","value":"Victoria State Government logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Victorian State Government logo is the secondary logo used in the design system. It’s used in the footer."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Victoria State Government logo","src":"/assets/img/Logo-StateGov.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-using-our-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Download logo"}]}]}]},{"type":"element","tag":"h3","props":{"id":"clear-space-1"},"children":[{"type":"text","value":"Clear space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The clear space for the Victorian State Government logo is at least 20% the height."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Clear space visual","src":"/assets/img/Logo-StateGovClearSpace.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"co-branding-1"},"children":[{"type":"text","value":"Co-branding"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where the Victorian State Government logo appears next to another logo, it should be:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"centred vertically"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a distance of at least 50% the height of the Victorian State Government logo."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Co-branded visual","src":"/assets/img/Logo-StateGov-cobrand.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"sizing-1"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Victorian State Government logo should be 42px in height on all screens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Victorian State Government logo where size permits. But, at times, we need to use a smaller logo depending on the application:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"VIC only logo (favicons only)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed these logos to ensure accessibility and clarity at all sizes."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"co-branding-logo"},"children":[{"type":"text","value":"Co-branding logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/primary-navigation/"},"children":[{"type":"text","value":"primary navigation"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/design-system/components/footer/"},"children":[{"type":"text","value":"footer"}]},{"type":"text","value":" for size requirements."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"vicgovau-logo","depth":2,"text":"vic.gov.au logo","children":[{"id":"clear-space","depth":3,"text":"Clear space"},{"id":"co-branding","depth":3,"text":"Co-branding"},{"id":"sizing","depth":3,"text":"Sizing"},{"id":"accessibility","depth":3,"text":"Accessibility"}]},{"id":"victoria-state-government-logo","depth":2,"text":"Victoria State Government logo","children":[{"id":"clear-space-1","depth":3,"text":"Clear space"},{"id":"co-branding-1","depth":3,"text":"Co-branding"},{"id":"sizing-1","depth":3,"text":"Sizing"}]},{"id":"co-branding-logo","depth":2,"text":"Co-branding logo"}]}},"_type":"markdown","_id":"content:design-system:4.styles:logo.md","_source":"content","_file":"design-system/4.styles/logo.md","_extension":"md"},{"_path":"/design-system/styles/motion","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Motion","description":"Motion gradually changes an element from one state to another. It can also indicate an interaction.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use motion with a purpose in mind. This could be to draw attention to important elements or to provide feedback to users."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each animation needs at least these four parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Trigger — what causes the animation to happen (gestures, time, etc.)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Duration — how long should the transition take."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Easing — how an element transitions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Property — the characteristic of the element transitioning (position, opacity, scale, etc.)."}]}]},{"type":"element","tag":"h2","props":{"id":"duration-speed"},"children":[{"type":"text","value":"Duration (speed)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The duration of motion should be consistent throughout. Use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"shorter durations for more subtle motions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"longer durations for more significant or complex motions."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A general rule of thumb is:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"0.06-0.2s for simple interface movements"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"up to 0.5s for more complex or larger movements."}]}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Time"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"60 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"60ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"120 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"120ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"160 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"160ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"200 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"200ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"240 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"240ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"300 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"300ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-7"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"360 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"360ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"420 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"420ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-9"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"500 milliseconds"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"500ms"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-motion-speed-10"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"easing"},"children":[{"type":"text","value":"Easing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Definitions:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-in: slow at the beginning, fast/abrupt at the end."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-out: fast/abrupt at the beginning, slow at the end."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When to use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-in: when things are moving "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"out."}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-out: when things are moving "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"in."}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage"},{"id":"duration-speed","depth":2,"text":"Duration (speed)"},{"id":"easing","depth":2,"text":"Easing"}]}},"_type":"markdown","_id":"content:design-system:4.styles:motion.md","_source":"content","_file":"design-system/4.styles/motion.md","_extension":"md"},{"_path":"/design-system/styles/spacing","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Spacing","description":"In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We use a spacing system in a 4-pixel grid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It helps to create a visual hierarchy and organises page content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 4px framework creates consistent spacing relationships and alignment across breakpoints. This is crucial for good UI design."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Size"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"4px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"8px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"12px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"20px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"28px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-7"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-9"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"48px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-10"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"56px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-11"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-12"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-13"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"120px"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-14"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For page level, component and content spacing see "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/layout/"},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:4.styles:spacing.md","_source":"content","_file":"design-system/4.styles/spacing.md","_extension":"md"},{"_path":"/design-system/styles/typography","_dir":"styles","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Typography","description":"Type styles are used to present content clearly.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"font"},"children":[{"type":"text","value":"Font"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"'VIC' is the brand font to be used across all Victorian Government communications. This creates a distinct but consistent look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is free to download from "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-fonts","rel":["nofollow"]},"children":[{"type":"text","value":"vic.gov.au"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use VIC font. The Ripple Design System only uses ‘Regular’ and ‘Bold’ weights of VIC font."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As VIC is a custom font, it's recommended to use Web Safe Font as a fallback when declaring your font stack. The preferred fallback font for the Ripple Design System is Arial."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Font Family"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"VIC"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"VIC, Arial, Helvetica, sans-serif"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-type-font-family"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"type-styles"},"children":[{"type":"text","value":"Type Styles"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the Ripple Design System there are two type sets, one for fixed use and one for fluid (responsive) use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The fixed type set uses fixed sizes. This means they use the <991 fluid styles, but do not respond."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The fluid type set has two fixed sizes. These both respond at certain breakpoints for larger or smaller styles."}]}]},{"type":"element","tag":"h3","props":{"id":"headings"},"children":[{"type":"text","value":"Headings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headings have both fluid and fixed sets. Headings are bold by default for emphasis and to create contrast."}]},{"type":"element","tag":"h4","props":{"id":"fluid"},"children":[{"type":"text","value":"Fluid"}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]},{\"style\":[\"Heading 2\",{\"values\":[{\"Font size\":\"24px / 32px\"},{\"Line height\":\"32px / 40px\"},{\"Letter spacing\":\"1.6% / 1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2\"]},{\"style\":[\"Heading 3\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3\"]},{\"style\":[\"Heading 3 Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight\"]},{\"style\":[\"Heading 4\",{\"values\":[{\"Font size\":\"16px / 20px\"},{\"Line height\":\"24px / 28px\"},{\"Letter spacing\":\"1.92% / 1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4\"]}]"},"children":[]},{"type":"element","tag":"h4","props":{"id":"fixed"},"children":[{"type":"text","value":"Fixed"}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1 Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"36px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-fixed\"]},{\"style\":[\"Heading 1 Highlight Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"44px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight-fixed\"]},{\"style\":[\"Heading 2 Fixed\",{\"values\":[{\"Font size\":\"24px\"},{\"Line height\":\"32px\"},{\"Letter spacing\":\"1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2-fixed\"]},{\"style\":[\"Heading 3 Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-fixed\"]},{\"style\":[\"Heading 3 Highlight Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight-fixed\"]},{\"style\":[\"Heading 4 Fixed\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4-fixed\"]}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"paragraph"},"children":[{"type":"text","value":"Paragraph"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default paragraph font size is 16px on all screens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The majority of your body copy should use the standard 16px paragraph size."}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Paragraph Large\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large\"]},{\"style\":[\"Paragraph Large Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter Spacing\":\"1.8%\"}]},\"rpl-type-p-large-fixed\"]},{\"style\":[\"Paragraph Large Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large-highlight\"]},{\"style\":[\"Paragraph\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p\"]},{\"style\":[\"Paragraph Small\",{\"values\":[{\"Font size\":\"14px\"},{\"Line height\":\"20px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p-small\"]}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"lists"},"children":[{"type":"text","value":"Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use lists to make blocks of text easier to read, and to break information into manageable chunks."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"List styles are based on rpl-type-p with extra spacing."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Margin Top"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Paragraph Spacing"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Item Spacing"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Indent Amount"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"rpl-sp-9"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"unordered-lists"},"children":[{"type":"text","value":"Unordered Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unordered lists allow for two nested levels which are styled as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 1 - bullet"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 2 - dash"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of an unordered list","src":"/assets/img/unordered-list.png"},"children":[]},{"type":"element","tag":"h4","props":{"id":"ordered-lists"},"children":[{"type":"text","value":"Ordered Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use numbered lists instead of bulleted lists when the order of the items is relevant."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ordered lists allow for three nested levels which are styled as"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 1 - numbers"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 2 - alphabet"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 3 - roman numerals."}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of an ordered list","src":"/assets/img/ordered-list.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"text-alignment"},"children":[{"type":"text","value":"Text Alignment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should usually left-align body copy that’s read left to right. Right-aligned body copy can be hard for users to find and read when they magnify their screen."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do not ‘justify’ blocks of body copy so that they’re aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read."}]},{"type":"element","tag":"h3","props":{"id":"font-weight"},"children":[{"type":"text","value":"Font weight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to avoid bold. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Acomparison between regular text and bold text","src":"/assets/img/font-weight.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"links"},"children":[{"type":"text","value":"Links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"A visual example of a link within regular text","src":"/assets/img/link.png"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"list-of-variables"},"children":[{"type":"text","value":"List of variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All values are stored as variables nested in the type variable."}]},{"type":"element","tag":"h3","props":{"id":"type-size"},"children":[{"type":"text","value":"Type size"}]},{"type":"element","tag":"docs-type-table","props":{"type":"size"},"children":[]},{"type":"element","tag":"h3","props":{"id":"line-height"},"children":[{"type":"text","value":"Line Height"}]},{"type":"element","tag":"docs-type-table","props":{"type":"lh"},"children":[]},{"type":"element","tag":"h3","props":{"id":"letter-spacing"},"children":[{"type":"text","value":"Letter Spacing"}]},{"type":"element","tag":"docs-type-table","props":{"type":"ls"},"children":[]},{"type":"element","tag":"h3","props":{"id":"font-weights"},"children":[{"type":"text","value":"Font Weights"}]},{"type":"element","tag":"docs-type-table","props":{"type":"weight"},"children":[]},{"type":"element","tag":"h3","props":{"id":"list-styling"},"children":[{"type":"text","value":"List Styling"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Style"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Level 1"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Level 2"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Level 3"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Unordered list"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"• (filled circle)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"- (dash)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Ordered List"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1. (numbers)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"a. (letters)"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"i. (roman numerals)"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"font","depth":2,"text":"Font"},{"id":"type-styles","depth":2,"text":"Type Styles","children":[{"id":"headings","depth":3,"text":"Headings"},{"id":"paragraph","depth":3,"text":"Paragraph"},{"id":"lists","depth":3,"text":"Lists"},{"id":"text-alignment","depth":3,"text":"Text Alignment"},{"id":"font-weight","depth":3,"text":"Font weight"},{"id":"links","depth":3,"text":"Links"}]},{"id":"list-of-variables","depth":2,"text":"List of variables","children":[{"id":"type-size","depth":3,"text":"Type size"},{"id":"line-height","depth":3,"text":"Line Height"},{"id":"letter-spacing","depth":3,"text":"Letter Spacing"},{"id":"font-weights","depth":3,"text":"Font Weights"},{"id":"list-styling","depth":3,"text":"List Styling"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:typography.md","_source":"content","_file":"design-system/4.styles/typography.md","_extension":"md"},{"_path":"/design-system/components/accordion","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Accordion","description":"The Accordion component is a panel designed to save space by hiding and revealing content as required.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use accordions only if it will benefit the user. You should have evidence of this."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using accordions will allow users to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"view related sections of content quickly"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"choose which content isn’t relevant to them by showing or hiding sections."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always test accordions with users first. Depending on what the user needs, hiding content could present problems."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill the entire width of the content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Embed into the body content area of any landing page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the 'numbered' variant when a sequential order is important."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include links and format text in accordions, as required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to conceal content that may only apply to specific users who can choose to show or hide content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make sure accordion headings are descriptive and succinct."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a single accordion."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid putting all page content into accordions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use accordions for important information all users need to read."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Putting accordions in accordions can confuse the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use an accordion if doing so will slow the page load time."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't disable sections."}]}]},{"type":"element","tag":"h3","props":{"id":"collapse-allexpand-all"},"children":[{"type":"text","value":"Collapse all/Expand all"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The other option is to remove the accordions and display the content without them."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The accordion has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"numbered."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]},{"type":"element","tag":"h3","props":{"id":"numbered"},"children":[{"type":"text","value":"Numbered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the numbered variant when it is important the content is read in sequential order."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion&args=numbered:true"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Accordions use colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"represent interactions such as hover and active states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"give prominence to the active displayed content section."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"},{"id":"collapse-allexpand-all","depth":3,"text":"Collapse all/Expand all"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"numbered","depth":3,"text":"Numbered"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:accordion.md","_source":"content","_file":"design-system/5.components/accordion.md","_extension":"md"},{"_path":"/design-system/components/acknowledgment","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Acknowledgement","description":"The Acknowledgement component pays respect to the First Peoples of Victoria.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Acknowledgement of Traditional Owners message:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"displays alongside the Aboriginal and Torres Strait Islander flags"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is used in the footer."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-acknowledgement--acknowledgement"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use this component to display the Acknowledgement of Traditional Owners message."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do not change the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Aboriginal and Torres Strait Islander flags"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Acknowledgement of Traditional Owners wording."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:acknowledgment.md","_source":"content","_file":"design-system/5.components/acknowledgment.md","_extension":"md"},{"_path":"/design-system/components/alert","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Alert","description":"The Alert component display required actions or important messages to users.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts attract a user's attention with important messages or required actions. They appear at the top of pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts are:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"intrusive by design"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"created on purpose"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dismissible by a user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"not triggered by user action or back-end event."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--information"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use an alert if its message or action applies to an entire product or site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write the alert in plain language that's clean and concise to minimise a user's cognitive load."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If the user needs more information or to complete an action, use link text for the call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place the alert at the top of the screen before the header."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use the critical alert setting for messages or actions that warrant it."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit actions to one per alert banner."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use an alert if its message applies only to that feature or page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alerts shouldn't cover other components, only pushing down page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use alerts for actions initiated by the user or backend."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An alert’s styling is according to its meaning and uses semantic colours."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alert colours include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"grey for general information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"orange for a minor warning"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"red for a critical error or expected dangerous event."}]}]},{"type":"element","tag":"h3","props":{"id":"information"},"children":[{"type":"text","value":"Information"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate general information to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--information"},"children":[]},{"type":"element","tag":"h3","props":{"id":"warning"},"children":[{"type":"text","value":"Warning"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate a minor warnings to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--warning"},"children":[]},{"type":"element","tag":"h3","props":{"id":"critical"},"children":[{"type":"text","value":"Critical"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate a critical error has occurred or dangerous event is expected to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--danger"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"alert-ordering"},"children":[{"type":"text","value":"Alert ordering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So that users view alerts in order of importance, they appear in priority order:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Critical."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Warning."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Information."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--stacked"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"information","depth":3,"text":"Information"},{"id":"warning","depth":3,"text":"Warning"},{"id":"critical","depth":3,"text":"Critical"}]},{"id":"alert-ordering","depth":2,"text":"Alert ordering"}]}},"_type":"markdown","_id":"content:design-system:5.components:alert.md","_source":"content","_file":"design-system/5.components/alert.md","_extension":"md"},{"_path":"/design-system/components/block-quote","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Block quote","description":"The Block quote component adds emphasis to a quote.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use block quotes to emphasise:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"important information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"excerpts from a source."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--blockquote"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use text in block quotes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put all the quoted text inside opening and closing quotation marks (' ')."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include optional author metadata."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"You can feature more than one quote by a single author."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in content sections."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not repeat metadata across different quotes."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The block quote uses colour to add subtle visual prominence."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--blockquote"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:block-quote.md","_source":"content","_file":"design-system/5.components/block-quote.md","_extension":"md"},{"_path":"/design-system/components/breadcrumb","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Breadcrumb","description":"The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A breadcrumb displays the parent page, icons and the current page."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Parent page: this links to the page above the current page in the information architecture."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Current page: this is the page the user is currently on."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-breadcrumbs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display the breadcrumb at the top left of a page, below the main navigation but above the page title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always start the breadcrumb with the parent page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always end the breadcrumb with the current page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Truncate longer names if you've reached the maximum amount of links."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The breadcrumb does not replace primary navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use the breadcrumb to show progress through a linear journey."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"how-the-breadcrumb-works"},"children":[{"type":"text","value":"How the Breadcrumb works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On devices with a page resolution under 768px, the breadcrumb displays the parent link only."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Breadcrumb uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"represent possible interactions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-breadcrumbs--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"how-the-breadcrumb-works","depth":2,"text":"How the Breadcrumb works"},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:breadcrumb.md","_source":"content","_file":"design-system/5.components/breadcrumb.md","_extension":"md"},{"_path":"/design-system/components/button","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Button","description":"The Button component helps a user to carry out an action.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight a key call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"So long as it also helps users carry out its identified action, a button can link to internal and external pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add to any basic content component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc."}]}]},{"type":"element","tag":"h3","props":{"id":"when-not-to-use"},"children":[{"type":"text","value":"When not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit primary buttons to one per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 4 words in the button label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid using inactive buttons."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Limit using buttons to one per page. The more you use them, the less a user will notice them."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Buttons are styled for their specific purposes. Button variants include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"filled"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"outlined"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"white"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"elevated"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"destructive."}]}]},{"type":"element","tag":"h3","props":{"id":"filled"},"children":[{"type":"text","value":"Filled"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the filled variant for primary actions, known as calls to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the primary colour."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than one filled button per page."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A page should only have one call to action, otherwise they lose impact."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Having more than one also results in a dilemma of choice for the user."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"h3","props":{"id":"outlined"},"children":[{"type":"text","value":"Outlined"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The outlined variant is for secondary actions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Like the filled variant, don't use more than one outlined button."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you find you're adding lots of secondary buttons, you may need to simplify your content."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]},{"type":"element","tag":"h3","props":{"id":"white"},"children":[{"type":"text","value":"White"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The white variant is for tertiary actions when an action is less prominent."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It should be obvious that it is lower priority than primary or secondary buttons."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The white variant is styled with an underline by default, to align with links."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This helps meet accessibility requirements and is consistent with other link types."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-white"},"children":[]},{"type":"element","tag":"h3","props":{"id":"elevated"},"children":[{"type":"text","value":"Elevated"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The elevated variant acts as a 'back-to-the-top' button."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value)."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]},{"type":"element","tag":"h3","props":{"id":"destructive"},"children":[{"type":"text","value":"Destructive"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the destructive variant for destructive actions, such as permanently deleting information, across the site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The destructive variant has a semantic meaning and uses semantic colour."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Destructive buttons only work if not used often."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It’s uncommon for most sites to need one."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use the destructive variant if an action has destructive consequences because they are not easy to undo."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-destructive"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"loading-spinner"},"children":[{"type":"text","value":"Loading spinner"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A user may double-click a button because:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"their main operating system uses double click"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they have a slow connection which results in delayed action feedback"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they click the button by accident due to motor impairments like hand tremors."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Clicking a button twice can mean the information gets sent 2 times."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to show the user that their click has worked. For example, show a loading spinner once they've clicked."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--busy-state"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Buttons can be themed in the following 2 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette."}]}]},{"type":"element","tag":"h3","props":{"id":"site-theme"},"children":[{"type":"text","value":"Site theme"}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"https:www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https:www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"neutral-theme"},"children":[{"type":"text","value":"Neutral theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme."}]},{"type":"element","tag":"h4","props":{"id":"outlined-1"},"children":[{"type":"text","value":"Outlined"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-outlined"},"children":[]},{"type":"element","tag":"h4","props":{"id":"white-1"},"children":[{"type":"text","value":"White"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-white"},"children":[]},{"type":"element","tag":"h4","props":{"id":"elevated-1"},"children":[{"type":"text","value":"Elevated"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-elevated"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enhance visual weight and aim to confirm with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG 2.0 Criterion 1.4.1"}]},{"type":"text","value":", Ripple buttons use underlined text by default on white buttons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This underline shows users there is an interaction that they can perform."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-not-to-use","depth":3,"text":"When not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"filled","depth":3,"text":"Filled"},{"id":"outlined","depth":3,"text":"Outlined"},{"id":"white","depth":3,"text":"White"},{"id":"elevated","depth":3,"text":"Elevated"},{"id":"destructive","depth":3,"text":"Destructive"},{"id":"loading-spinner","depth":3,"text":"Loading spinner"}]},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"site-theme","depth":3,"text":"Site theme"},{"id":"neutral-theme","depth":3,"text":"Neutral theme"}]},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:button.md","_source":"content","_file":"design-system/5.components/button.md","_extension":"md"},{"_path":"/design-system/components/call-to-action","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Call to action","description":"The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure content is relevant to the action or destination."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Embed in any body content area of a content page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with a relevant image or graphic."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without an image or graphic."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload it with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use when a large amount of text is needed for more context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use other interactive elements, like links."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The call to action card adopts its theming from your button component’s settings."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose neutral button for your site, the call to action card will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:call-to-action.md","_source":"content","_file":"design-system/5.components/call-to-action.md","_extension":"md"},{"_path":"/design-system/components/callout","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Callout","description":"The Callout component is a text excerpt that draws attention to specific or important content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use callouts to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"draw a user's attention"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add emphasis to the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide a user with more information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight important information vital to the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place a callout in a prominent position on the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with text only."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only feature one callout per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use no more than 2 paragraphs per callout."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't put the callout at the bottom of the page."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To allow for different levels of emphasis, a callout has 2 styles:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accent"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral."}]}]},{"type":"element","tag":"h3","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout-neutral"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The accent variant uses the site accent colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add visual prominence to the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"aid hierarchy in the content area."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enhance visual weight and aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.0 Criterion 1.4.1"}]},{"type":"text","value":", Ripple callouts use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a thick left-hand border"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"background colours"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"padding."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"accent","depth":3,"text":"Accent"},{"id":"neutral","depth":3,"text":"Neutral"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:callout.md","_source":"content","_file":"design-system/5.components/callout.md","_extension":"md"},{"_path":"/design-system/components/campaign-banner","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Campaign banner","description":"The Campaign banner component draws a user's attention to promoted content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use campaign banners to promote content. They include a feature image and have an optional call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Campaign banners can be used at the top or bottom of a page, under the header or above the footer."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Promote a campaign or related page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional call to action."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use an unrelated image."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The campaign banner has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"featured, which appears at the top of the page, below the header"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image inset, which appears at the bottom of the page above the footer."}]}]},{"type":"element","tag":"h3","props":{"id":"featured"},"children":[{"type":"text","value":"Featured"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is an option to include metadata for the image if required."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"image-inset"},"children":[{"type":"text","value":"Image inset"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--secondary-image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The campaign banner adopts its theming from the button component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"featured","depth":3,"text":"Featured"},{"id":"image-inset","depth":3,"text":"Image inset"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:campaign-banner.md","_source":"content","_file":"design-system/5.components/campaign-banner.md","_extension":"md"},{"_path":"/design-system/components/card","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Card","description":"The Card component shows content about another page, event or topic. They help users find relevant information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use cards to help users find the right information quickly."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can combine a variety of content, including text, media and links."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure headings are direct and summaries are concise."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards can be made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"headline, to provide a snapshot of the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary, to provide further details"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual elements, to provide visual prominence."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs."}]},{"type":"element","tag":"h4","props":{"id":"metadata"},"children":[{"type":"text","value":"Metadata"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All cards have optional metadata. Use metadata to display a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date - how old the content is, for when this information is important to the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status - where a component or action is sitting within a process."}]}]},{"type":"element","tag":"h4","props":{"id":"visual-elements"},"children":[{"type":"text","value":"Visual elements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visual elements in cards allow for different content to stand out. They can also provide additional context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elements that can provide visual prominence include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a highlight border"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a blocked headline type."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use visual elements carefully. Only use a visual element if it:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is meaningful to the user journey"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"supports what is already in the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can help the user differentiate content from other content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can be easily identified"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is informative and not only decorative."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Group together cards with similar content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only a single style of card within a set of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the content clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use one piece of information per card."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't mix different card variants in a group."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a single card only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never repeat content in a group of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload cards with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include other interactive elements, like links, inside the card."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A card has 2 main variants and is styled for its purpose."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Promotion Cards, which is used to highlight important content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Navigation Cards, which is used for larger groups of content."}]}]},{"type":"element","tag":"h3","props":{"id":"promotion-cards"},"children":[{"type":"text","value":"Promotion cards"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards stack in a grid when used in a collection."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards have 4 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image full bleed"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar."}]}]},{"type":"element","tag":"h4","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h4","props":{"id":"highlight"},"children":[{"type":"text","value":"Highlight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The highlight variant gives the card more visual prominence. Use this to guide users to the content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:Highlight","theme":"docsTheme2"},"children":[]},{"type":"element","tag":"h4","props":{"id":"image-full-bleed"},"children":[{"type":"text","value":"Image full bleed"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image full bleed variant gives the option to add a relevant image to grab the user’s attention."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo"},"children":[]},{"type":"element","tag":"h4","props":{"id":"avatar"},"children":[{"type":"text","value":"Avatar"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--avatar"},"children":[]},{"type":"element","tag":"h3","props":{"id":"navigation-cards"},"children":[{"type":"text","value":"Navigation cards"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Navigation cards are useful for displaying and breaking down large groups of content options."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On landing pages, they are used to highlight all the different sections of that site."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Navigation cards fill the full width of the content area. They will always stack vertically."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 3 variants of navigation cards:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image inset"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heading highlight."}]}]},{"type":"element","tag":"h4","props":{"id":"standard-1"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h4","props":{"id":"image-inset"},"children":[{"type":"text","value":"Image inset"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A related image can increase a card's visual prominence."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav"},"children":[]},{"type":"element","tag":"h4","props":{"id":"heading-highlight"},"children":[{"type":"text","value":"Heading highlight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To draw attention to the heading and highlight the content, use a heading highlight."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:Heading+highlighted"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards use colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interaction states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"adding visual prominence to some elements."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:Highlight"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:Heading+highlighted"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"promotion-cards","depth":3,"text":"Promotion cards"},{"id":"navigation-cards","depth":3,"text":"Navigation cards"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:card.md","_source":"content","_file":"design-system/5.components/card.md","_extension":"md"},{"_path":"/design-system/components/carousel","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Carousel","description":"The Carousel component is a set of related cards that users can side-scroll through.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a carousel to let users browse through a set of up to 9 cards with pagination controls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The content in the carousel should be related in some way. This helps users to find related and relevant content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-card-carousel--breakpoints"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use a combination of promotion cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when wanting to display a collection of cards with related content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add to any page type."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include with an accompanying title to give context to users."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use more than 9 cards or fewer than 3."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with navigation or other card types."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The carousel adopts its theming from the card and pagination components."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-card-carousel--breakpoints"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:carousel.md","_source":"content","_file":"design-system/5.components/carousel.md","_extension":"md"},{"_path":"/design-system/components/category-grid","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Category grid","description":"The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--category-grid"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as a collection of cards only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with icons or pictograms."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Be careful not to include too many cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use unique media items per card."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use a single card only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t repeat content in the same a group of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include with other interactive elements like links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without a media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use on pages with a sidebar."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The category grid uses colour to indicate interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--category-grid"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:category-grid.md","_source":"content","_file":"design-system/5.components/category-grid.md","_extension":"md"},{"_path":"/design-system/components/checkbox","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Checkbox","description":"The Checkbox component lets users select one or more options from a list.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use checkboxes to allow users to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"select one or more list options"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"toggle one option on or off."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use checkboxes with a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"form label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"checkbox label."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkboxes should always have a form and checkbox label."}]},{"type":"element","tag":"h4","props":{"id":"single-checkbox"},"children":[{"type":"text","value":"Single checkbox"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented."}]},{"type":"element","tag":"h4","props":{"id":"checkbox-group"},"children":[{"type":"text","value":"Checkbox group"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use checkboxes for lists with more than one selectable option."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use checkboxes for a single selectable list option, use radio buttons for this."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkboxes have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: nothing is selected and the question has options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you like summer, winter, autumn, and/or spring'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: nothing is selected and the question does not have options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select your favourite season'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--invalid"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A checkbox uses colour for interactive states."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:checkbox.md","_source":"content","_file":"design-system/5.components/checkbox.md","_extension":"md"},{"_path":"/design-system/components/chip","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Chip","description":"The Chip component is an interactive element to draw a user’s user attention to a category.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying multiple chips together, place them in a row."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include keywords."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any content page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Link through to the topic page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use as a heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include more than 4 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without an interaction or link."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"chips-or-buttons"},"children":[{"type":"text","value":"Chips or buttons?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While chips and buttons both prompt calls to action, they are different."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Multiple chips should all sit together. Buttons should sit separately from each other."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chips react to their context, but buttons are fixed and remain static."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chips convey forking paths in a user experience, while buttons show a linear step."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chip has a default and reverse variant, allowing flexible use across a range of backgrounds."}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--reversed"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"chips-or-buttons","depth":2,"text":"Chips or buttons?"},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:chip.md","_source":"content","_file":"design-system/5.components/chip.md","_extension":"md"},{"_path":"/design-system/components/contact-us","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Contact us","description":"The Contact us component is a list of contact details and links to help the user get in touch with you.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contact us details can include a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contact person"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"phone number"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"social media account."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-contact-us--contact-us"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Provide users with additional contact details relevant to the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display in the sidebar of the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you add social media accounts to the contact us component, don’t add the social share component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use unrelated contact details or social media accounts."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contact us uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual prominence for key information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"link icons."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-contact-us--contact-us"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:contact-us.md","_source":"content","_file":"design-system/5.components/contact-us.md","_extension":"md"},{"_path":"/design-system/components/date-input","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Date input","description":"The Date input component helps users enter a date.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Date input has 3 fields: day, month and year."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-to-use-this-component"},"children":[{"type":"text","value":"How to use this component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use an date input with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include specific formatting examples or requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use date inputs with a label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write short and concise labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to show the expected date format, for example, ‘07 11 2022’."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If it’s not likely users will know the exact date, don’t use date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without a form label or hint text specifying the expected date format."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions or important examples."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The date input has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for a date input, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: whole date field is empty"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Enter your dog’s birthday'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: some of date field is empty or incomplete"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must include a [name of empty or incomplete field]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s birthday must include a month'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: impossible date entered"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be a real date’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s birthday must be a real date'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: future date given when past date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be in the past’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s first playdate must be in the past'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: future date given when today or past date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be today or in the past’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s first beach visit must be today or in the past'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: past date given when future date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be in the future’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next raincoat purchase must be in the future'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: past date given when today or future date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be today or in the future’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next zoomies must be today or in the future'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not on or after another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not after another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be after [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not the same as or before another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be on or before [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next hike must be on or before 2 January 2025'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not before another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be before [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not between 2 other dates"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘The date must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘The date must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘The date must only include numbers'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--invalid"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-to-use-this-component","depth":3,"text":"How to use this component"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:date-input.md","_source":"content","_file":"design-system/5.components/date-input.md","_extension":"md"},{"_path":"/design-system/components/detail-list","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Detail list","description":"The Detail list component shows a list of key information to users.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each row of the detail list comprises a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"label, a descriptive or informative label for your content, for example, 'Location'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"content, the piece of information itself, for example, 'East Gippsland'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The detail list is used to display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata, for example, ‘Published date' (which shows as '22 March 2023’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status, for example of a program or grant."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the detail list for simple information. For data or complex information, consider using a table."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-description-list--with-link"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use single words only for the label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a link if you need to."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the summary content and labels clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align all summary content to the longest label."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use labels for unrelated summary content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it to surface information that is not important to users."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with complex or long form content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a link is present, the detail list uses the link colour for interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-description-list--with-link"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:detail-list.md","_source":"content","_file":"design-system/5.components/detail-list.md","_extension":"md"},{"_path":"/design-system/components/dropdown","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Dropdown","description":"The Dropdown component lets users see a list of available options and then select one or more options.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use this component to let users select one or more items from a dropdown list of available items."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A dropdown is often called a 'select'."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--single-select-many-items"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a dropdown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use a dropdown with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"h4","props":{"id":"single-select"},"children":[{"type":"text","value":"Single select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single select dropdown is used when users can select only a single option."}]},{"type":"element","tag":"h4","props":{"id":"multi-select"},"children":[{"type":"text","value":"Multi select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a dropdown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the dropdown"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"placeholder-text"},"children":[{"type":"text","value":"Placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose."}]},{"type":"element","tag":"h4","props":{"id":"selected-value"},"children":[{"type":"text","value":"Selected value"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The selected value shows the option a user has selected."}]},{"type":"element","tag":"h4","props":{"id":"text-overflow"},"children":[{"type":"text","value":"Text overflow"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When the field label and menu text are too long for the available horizontal space, they wrap to form another line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The field text itself truncates at the end, but the text can be shown in full in the menu."}]},{"type":"element","tag":"h4","props":{"id":"menu-height"},"children":[{"type":"text","value":"Menu height"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The dropdown menu has a maximum height of 288px or 6 single text-line options."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as a last resort component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A label must be used with a dropdown."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure dropdown item descriptions are short and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never set the form to submit when a dropdown item is selected."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write long menu option descriptions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Descriptions should not wrap over a single line."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Icons or decorative images should never be used in dropdowns."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use a dropdown without a label as it confuses users and is not accessible."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdown has 2 main variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"single select"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"multi select."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both variants have default and reverse sub-variants."}]},{"type":"element","tag":"h3","props":{"id":"single-select-1"},"children":[{"type":"text","value":"Single select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single select dropdown is used when users can select only a single option."}]},{"type":"element","tag":"h4","props":{"id":"making-a-selection"},"children":[{"type":"text","value":"Making a selection"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Placeholder text is shown by default in the field when the dropdown is closed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interacting with a closed field opens a menu of options."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The dropdown closes when an option is chosen."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selection option replaces the placeholder text, but also remains in place if the menus is opened."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value."}]}]},{"type":"element","tag":"h4","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--single-select-many-items"},"children":[]},{"type":"element","tag":"h4","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"multi-select-1"},"children":[{"type":"text","value":"Multi select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can choose multiple items in a list or to filter information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If using a multi select dropdown, always tell the user how many menu options they can select."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'."}]},{"type":"element","tag":"h4","props":{"id":"making-a-selection-1"},"children":[{"type":"text","value":"Making a selection"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Placeholder text is shown by default in the field when the dropdown is closed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When the menu is opened, each option shows a checkbox input to the left of its text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When options are being selected, the menu stays open."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu."}]}]},{"type":"element","tag":"h4","props":{"id":"default-1"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--multi-select-many-items"},"children":[]},{"type":"element","tag":"h4","props":{"id":"reverse-1"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--reverse-variant&args=multiple:true"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for a dropdown, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"If nothing is selected and the question has options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you like summer, winter, autumn, and/or spring.'"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"If nothing is selected and the question does not have options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select "},{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":"’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select your favourite season'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"add storybook"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdown uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--multi-select-many-items"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"single-select-1","depth":3,"text":"Single select"},{"id":"multi-select-1","depth":3,"text":"Multi select"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:dropdown.md","_source":"content","_file":"design-system/5.components/dropdown.md","_extension":"md"},{"_path":"/design-system/components/file","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"File","description":"The File component shows a link, with additional metadata, and lets a user download a file attachment.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"File is made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the file name"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata including file type, size and updated date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a document description."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-file--with-caption"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any page type."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include in page content areas only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional description."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add optional updated data if it’s relevant to users."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include metadata."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with a non-descriptive file name."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"File uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating to users that they may have an action to complete"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--file"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:file.md","_source":"content","_file":"design-system/5.components/file.md","_extension":"md"},{"_path":"/design-system/components/footer","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Footer","description":"The Footer component helps help users find information at the bottom of a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"copyright"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contact information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"links to other pages within the website"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"social media links."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer is made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional section links, which help avoid dead ends by giving users a way to continue their journey through:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"additional links (internal and external)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bypassing main navigation"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional social links, which can be used to link to social media accounts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"core site links, which must always be used and include the privacy statement, contact information and terms of use"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an Acknowledgement of Traditional Owners message (an acknowledgement component)."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional supporting logo relevant to the site content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use a consistently-themed footer across all pages of your site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the optional neutral theme."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional image credit for the header image."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t alter the required links in the core section of the footer."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t change the text in the acknowledgement component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with links that are not relevant to your organisation."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can theme the footer in 3 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom colour palette (see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"h3","props":{"id":"site-colour-palette"},"children":[{"type":"text","value":"Site colour palette"}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"neutral-colour-palette"},"children":[{"type":"text","value":"Neutral colour palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--neutral"},"children":[]},{"type":"element","tag":"h3","props":{"id":"custom-colour-palette"},"children":[{"type":"text","value":"Custom colour palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is only recommended as a last resort."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"component specific theming guidance for designers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story","theme":"docsTheme3"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"site-colour-palette","depth":3,"text":"Site colour palette"},{"id":"neutral-colour-palette","depth":3,"text":"Neutral colour palette"},{"id":"custom-colour-palette","depth":3,"text":"Custom colour palette"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:footer.md","_source":"content","_file":"design-system/5.components/footer.md","_extension":"md"},{"_path":"/design-system/components/form-alert","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Form alert","description":"The Form alert component shows the user the outcome of a form submission or validation.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The form alert appears at the top of the form and the user is automatically scrolled to it on submission."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 types of alerts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"error."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--error"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Show the validation outcome of a form submission."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If successful, use with relevant success message."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a custom error summary if required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make your error messages clear and concise."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use the form alert without providing a summary of errors (if a submission is invalid)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not restyle with other colours or icons."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Form alert has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"error."}]}]},{"type":"element","tag":"h3","props":{"id":"success"},"children":[{"type":"text","value":"Success"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--success"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If one or more form validation errors occur, they must always be presented using:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the error summary alert"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"individual error messages next to each form field with an error (inline)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make your error messages clear and concise."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Inline error messages show a user where the errors happened."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On submission of the form, you must:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"move the keyboard focus to the error summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"include the heading ‘There is a problem’ in the error summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"link to all answers with validation errors"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"write error messages for the summary alert exactly the same way they are worded for inline error messages."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page <title> so screen readers read it out as soon as possible."}]},{"type":"element","tag":"h4","props":{"id":"linking-from-the-error-summary-to-each-answer"},"children":[{"type":"text","value":"Linking from the error summary to each answer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each error must be linked in the error summary to the form field (answer) causing it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--error"},"children":[]},{"type":"element","tag":"h4","props":{"id":"error-messages"},"children":[{"type":"text","value":"Error messages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/input-field/"},"children":[{"type":"text","value":"input field"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/text-area/"},"children":[{"type":"text","value":"text area"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/date-input/"},"children":[{"type":"text","value":"date input"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/checkbox/"},"children":[{"type":"text","value":"checkbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/radio-button/"},"children":[{"type":"text","value":"radio button"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/dropdown/"},"children":[{"type":"text","value":"dropdown"}]},{"type":"text","value":"."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"success","depth":3,"text":"Success"},{"id":"error","depth":3,"text":"Error"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:form-alert.md","_source":"content","_file":"design-system/5.components/form-alert.md","_extension":"md"},{"_path":"/design-system/components/form","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Form","description":"The Form component guides users to give information and consists of a group of related inputs or controls.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Common form components include the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/input-field/"},"children":[{"type":"text","value":"input field component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/text-area/"},"children":[{"type":"text","value":"text area component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/date-input/"},"children":[{"type":"text","value":"date input component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/radio-button/"},"children":[{"type":"text","value":"radio button component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/checkbox/"},"children":[{"type":"text","value":"checkbox component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/dropdown/"},"children":[{"type":"text","value":"dropdown component"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An input field) is for short (single-line) text entry. A text area is for longer text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The user can submit a form when all fields are valid (see "},{"type":"element","tag":"a","props":{"href":"/design-system/components/form-alert/"},"children":[{"type":"text","value":"form alert"}]},{"type":"text","value":")."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"layout"},"children":[{"type":"text","value":"Layout"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give."}]},{"type":"element","tag":"h4","props":{"id":"labels"},"children":[{"type":"text","value":"Labels"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each input must have a label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Placeholder text should not be used as a label."}]},{"type":"element","tag":"h4","props":{"id":"requirement-optional-vs-mandatory"},"children":[{"type":"text","value":"Requirement - optional vs. mandatory"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most fields on a simple form will be required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where possible, don’t include a large number of optional fields."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete an input or text field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the input field"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"placeholder-text"},"children":[{"type":"text","value":"Placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/form/#accessibility"},"children":[{"type":"text","value":"See accessibility"}]},{"type":"text","value":" (below)."}]},{"type":"element","tag":"h4","props":{"id":"error-messages"},"children":[{"type":"text","value":"Error messages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages."}]},{"type":"element","tag":"h4","props":{"id":"buttons"},"children":[{"type":"text","value":"Buttons"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Button labels should say what the button will do when a user interacts with it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure the main action button tells the user when the form is being submitted (see "},{"type":"element","tag":"a","props":{"href":"/design-system/components/button/#loading-spinner"},"children":[{"type":"text","value":"button loading spinner"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button."}]},{"type":"element","tag":"h4","props":{"id":"validation"},"children":[{"type":"text","value":"Validation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Form alert is used to tell the user the outcome of the form validation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the form has been submitted successfully, the success alert will replace the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions."}]},{"type":"element","tag":"h4","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use autocomplete to reduce typing for users."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep to one column."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use top-align labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always mark form fields as ‘required’ or ‘optional’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make calls to action descriptive - state the intent of the action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write short, clear headings and form input labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text (instead of labels) to explain any specifications."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use field length input constraints - for fields with a defined character count like phone numbers and postcodes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t create a form without a submit button."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use an input or control without a form label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid using all caps."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forms use colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-form--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:form.md","_source":"content","_file":"design-system/5.components/form.md","_extension":"md"},{"_path":"/design-system/components/header","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Header","description":"The Header component introduces the purpose and content of a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers include optional content such as introduction text, journey links, a call to action and an introduction banner."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The header can also support a campaign logo if required. This will display above the page title."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-journey-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the header simple and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear calls to action that align with the message or task."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use images that add value to the content and support the message."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include with featured links and buttons to help users perform key tasks."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include an optional campaign logo."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use a mix of reverse and default page title and introduction text styling."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include the same links in the main and introduction banners."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with more than 6 journey links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The header has 3 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All variants can be used with the introduction banner."}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-story"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-journey-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"image"},"children":[{"type":"text","value":"Image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images should not be stretched or too low in resolution. They should also not be complex or include text."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--image-reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"introduction-banner"},"children":[{"type":"text","value":"Introduction banner"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The introduction banner:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can be used to add content and journey links under the page title and introduction section in the main header banner"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"has an optional icon and journey links"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"should contain content relating to the content in the main header."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--intro-with-links"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"interaction-with-other-components"},"children":[{"type":"text","value":"Interaction with other components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The bottom corner shape won't hide if an introduction banner is between the header and campaign banner."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header.","src":"/assets/img/campaign-banner-behaviour.png"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers can be themed in 2 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will also adopt theming from the button component when displaying the call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose neutral button for your site, the header will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-call-to-action"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-journey-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--intro-with-links"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"neutral-theme"},"children":[{"type":"text","value":"Neutral theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--image-neutral"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"image","depth":3,"text":"Image"},{"id":"introduction-banner","depth":3,"text":"Introduction banner"}]},{"id":"interaction-with-other-components","depth":2,"text":"Interaction with other components"},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"neutral-theme","depth":3,"text":"Neutral theme"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:header.md","_source":"content","_file":"design-system/5.components/header.md","_extension":"md"},{"_path":"/design-system/components/in-page-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"In-page navigation","description":"The In-page navigation component sits above a page’s main content and shows a set of links.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The left-hand highlight bar:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separates the component from the page content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"groups the navigation."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-in-page-navigation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use subheadings as indented navigation links from the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't link to other pages, including on external sites."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use colons in the heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it if you have less than 2 navigation links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it with component headings, such as accordion item headings."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple’s theming applies colour to in-page navigation so that the user understands:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"its links and navigation heading relate to each other"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they are deliberately separated from the main content."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-in-page-navigation"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:in-page-navigation.md","_source":"content","_file":"design-system/5.components/in-page-navigation.md","_extension":"md"},{"_path":"/design-system/components/input-field","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Input field","description":"The Input field component lets users input a short amount of text.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use an input field for users to enter text shorter than a single line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input fields can have multiple input types, depending on the need and use case. They have a text input type by default."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input fields can be used for entering:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text: basic text or search terms"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"phone: a telephone number"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"email: an email address"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with an input field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use an input field with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"prefix or suffix text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"prefix or suffix icon."}]}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete an input field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the input field"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"prefix-and-suffixes"},"children":[{"type":"text","value":"Prefix and suffixes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use prefixes and suffixes to help users enter things like currencies and measurements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t rely on prefixes or suffixes alone. Screen readers will not read them out."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a label for input fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to specify helpful information such as:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"expected number format, for example ‘Must be 6 to 8 digits long’"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"minimum and maximum number values, for example ‘Minimum of # and maximum of #’."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the prefix to indicate measurements and categories like currency, for example, '$'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use an input field without a label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t set a minimum or maximum input limit without explicitly saying this in the hint text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The input field has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for an input field, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: empty input"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Enter your name'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or less'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Delivery address must be 56 characters or less'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or more'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Previous employer must be 3 characters or more'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long or too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be between [number] and [number] characters'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Justification must be between 3 and 56 characters'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Reasons must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must only include [list of allowed characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Explanations must only include letters, numbers and commas'."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input field uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:input-field.md","_source":"content","_file":"design-system/5.components/input-field.md","_extension":"md"},{"_path":"/design-system/components/key-dates","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Key dates","description":"The Key dates component shows users a card promoting key dates or events.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--key-dates"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only on landing pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include in a grid of promo cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use once per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use as the last card in the grid."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a summary."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with navigation cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use the key dates card by itself."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with other interactive elements like links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use it to replace a call to action."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The key date card uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add visual prominence to key information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicate an interaction to users."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--key-dates"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:key-dates.md","_source":"content","_file":"design-system/5.components/key-dates.md","_extension":"md"},{"_path":"/design-system/components/media-embed","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Media embed","description":"The Media embed component shows an image or video within the page content, with optional text to give context.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media can be an image or video. Images can display as small, medium or large."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-landscape"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use it with videos, images or complex images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add data when using the complex image variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure the media is the right size so that it displays without error."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only add it to the content section of a page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional image caption and metadata."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include media unrelated to the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid adding interactive elements, like links, to the caption or metadata sections."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a video without closed captions and a transcript."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed has 3 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex media."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on the variant used, you can display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a caption"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a transcript link"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accompanying data."}]}]},{"type":"element","tag":"h3","props":{"id":"image"},"children":[{"type":"text","value":"Image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image variant has 4 display options:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"landscape / 16:9 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"portrait / 3:4 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"square / 1:1 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar / circle."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item."}]},{"type":"element","tag":"h4","props":{"id":"landscape"},"children":[{"type":"text","value":"Landscape"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-landscape"},"children":[]},{"type":"element","tag":"h4","props":{"id":"portrait"},"children":[{"type":"text","value":"Portrait"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-portrait"},"children":[]},{"type":"element","tag":"h4","props":{"id":"square"},"children":[{"type":"text","value":"Square"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-square"},"children":[]},{"type":"element","tag":"h4","props":{"id":"avatar"},"children":[{"type":"text","value":"Avatar"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-avatar"},"children":[]},{"type":"element","tag":"h3","props":{"id":"video"},"children":[{"type":"text","value":"Video"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Videos will always display at a 16:9 ratio."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A 'view transcript' link displays by default. Videos must have both closed captions and a transcript."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include a supporting caption to give extra context to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--video"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex-media"},"children":[{"type":"text","value":"Complex media"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Complex media items contain detail. They include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"infographics"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"graphs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"flowchart"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"maps."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can support media by including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional supporting data such as content or tables"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a view fullscreen link"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a download media link."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Complex media will always display the full image. The media item will display at a predefined max height or width."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When the media is fullscreen, it displays in the media fullscreen component."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--complex-image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--complex-image"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"image","depth":3,"text":"Image"},{"id":"video","depth":3,"text":"Video"},{"id":"complex-media","depth":3,"text":"Complex media"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-embed.md","_source":"content","_file":"design-system/5.components/media-embed.md","_extension":"md"},{"_path":"/design-system/components/media-fullscreen","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Media fullscreen","description":"The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fullscreen view includes the media item's title and caption."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always display the media item max height or width of the content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a title for the media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display the media title and caption if used in the base component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when you need to display a media item fullscreen."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with items that aren't media."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with a completely opaque background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use pagination for one media item only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't crop or hide the media item."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media fullscreen adopts its theming from the pagination component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-fullscreen.md","_source":"content","_file":"design-system/5.components/media-fullscreen.md","_extension":"md"},{"_path":"/design-system/components/media-gallery","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Media gallery","description":"The Media gallery component is a series of images users can side-scroll through.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media gallery combines images and text to give users context within the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media items inside a media gallery will display as either landscape or portrait, at predefined ratios."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include related images only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use at least 2 images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a media title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include an optional caption to help users understand images' context and relevance to the page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any page type."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for decorative purposes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use sensory images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for a single image, instead use the media embed component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with media unrelated to page content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an interaction to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also adopts its theming from the pagination component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-gallery.md","_source":"content","_file":"design-system/5.components/media-gallery.md","_extension":"md"},{"_path":"/design-system/components/media","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Media","description":"The Media component is a container that houses media items to use in other components on a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media to communicate and differentiate specific information through visuals."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media items sit within other components such as cards, or a media gallery."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use images if they help users complete a task. Images can make it easier for some people to understand information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media to combine visual elements with text. This gives your content context and alignment."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-image--image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always get copyright for all media used."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Nest media in other components."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose diverse images that reflect and support the diversity of Victoria."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only media that's relevant to the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text for each media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use appropriate resolution for the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a transcription for all audio content."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use a media item without alt text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use video content without captions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't crop an image without a clear focal point."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The ratios you can use for media include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1:1"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"4:3"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"16:9"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"21:9"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"3:1"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar (circle)."}]}]},{"type":"element","tag":"h3","props":{"id":"copyright-requirements"},"children":[{"type":"text","value":"Copyright requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must get permission (a licence) to use copyright material. This includes images and text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some images are available under an open access licence, such as "},{"type":"element","tag":"a","props":{"href":"https://au.creativecommons.net/","rel":["nofollow"]},"children":[{"type":"text","value":"Creative Commons"}]},{"type":"text","value":". Alt text is also licensed under copyright."}]},{"type":"element","tag":"h3","props":{"id":"file-resolution"},"children":[{"type":"text","value":"File resolution"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image resolution must be appropriate for the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it."}]},{"type":"element","tag":"h3","props":{"id":"focal-point"},"children":[{"type":"text","value":"Focal point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider cropping smaller images more to keep the impact of the original image."}]},{"type":"element","tag":"h3","props":{"id":"media-types"},"children":[{"type":"text","value":"Media types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Multiple types of media can are supported and used to add meaning to content. These include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"photographs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"decorative images"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"charts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"graphs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"maps"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"illustrations or drawings"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audio."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make sure you use the correct media type for the content it is supporting."}]},{"type":"element","tag":"h3","props":{"id":"file-types"},"children":[{"type":"text","value":"File types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following file types are recommended:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"photographs"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"charts/graphs"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"mp4"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audio"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"wav."}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"alternative-text"},"children":[{"type":"text","value":"Alternative text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG 2.0 Criterion 1.1.1"}]},{"type":"text","value":" or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-guidelines-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Brand Victoria guidelines"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/tutorials/images/decision-tree/","rel":["nofollow"]},"children":[{"type":"text","value":"Web Accessibility initiative alt decision tree"}]},{"type":"text","value":" also guides you on whether your image needs alt text or not."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For purely descriptive images, the alt text attribute instead reads: alt=””."}]},{"type":"element","tag":"h4","props":{"id":"what-alt-text-does"},"children":[{"type":"text","value":"What alt text does"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a screen reader can read the alt text aloud"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alt text is shown in the place of ‘broken’ or unloaded images on the page."}]}]},{"type":"element","tag":"h4","props":{"id":"how-to-write-alt-text"},"children":[{"type":"text","value":"How to write alt text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alt text must serve the equivalent purpose of the image itself, by:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using normal punctuation that helps users understand the text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"including the image text in the alt text (for images with text)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more guidance on writing alt text, refer to "},{"type":"element","tag":"a","props":{"href":"https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images","rel":["nofollow"]},"children":[{"type":"text","value":"Alt text, captions and titles for images"}]},{"type":"text","value":" in the Australian Government Style Manual."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"copyright-requirements","depth":3,"text":"Copyright requirements"},{"id":"file-resolution","depth":3,"text":"File resolution"},{"id":"focal-point","depth":3,"text":"Focal point"},{"id":"media-types","depth":3,"text":"Media types"},{"id":"file-types","depth":3,"text":"File types"},{"id":"alternative-text","depth":3,"text":"Alternative text"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:media.md","_source":"content","_file":"design-system/5.components/media.md","_extension":"md"},{"_path":"/design-system/components/option-button","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Option button","description":"The Option button component is a set of buttons to help users filter content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use option buttons to show a set of options a user can choose from to filter content or results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The option button component contains labels showing a user how the filter will work."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never preselect an option button on default. Users might miss that a filter has been automatically applied."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Help users filter content or results."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use short labels only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Order labels in alphabetical order to help users scan quickly."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an ‘apply filter’ button if the option button will be used together with other form elements."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use for a call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with long content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use without a form label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never preselect an individual option button."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Option buttons have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default uses the alphabet as a filter in the option buttons."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]},{"type":"element","tag":"h3","props":{"id":"custom"},"children":[{"type":"text","value":"Custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The custom variant lets you create your own button labels as a filter."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These labels must clearly tell the user what filter will be applied."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--fluid-widths"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"custom","depth":3,"text":"Custom"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:option-button.md","_source":"content","_file":"design-system/5.components/option-button.md","_extension":"md"},{"_path":"/design-system/components/page-action","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Page action","description":"The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Page action component to let users print or download pages and content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The component displays a combination of page-level actions."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Print page: prints the page a user is on."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Print full document: prints all pages in a publication or document, not only the page the user is on."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use page actions for anything other than the above. Don't use it for links."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-page-action--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in a page's sidebar section."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as the first component in the sidebar, above the vertical navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with or without one or more documents."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include metadata with uploaded documents."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use:"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"in the content area of a page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"with a document that has content different to the page's content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"for any other user actions."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Page action uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons, to indicate a possible action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-page-action--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:page-action.md","_source":"content","_file":"design-system/5.components/page-action.md","_extension":"md"},{"_path":"/design-system/components/pagination","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Pagination","description":"The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use pagination to help users navigate forwards and backwards through your content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Examples include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search results or guidance divided into multiple website pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a collection of cards or media items."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination helps users to identify:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"how many pages or items they can navigate through"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"where the page or item they are viewing sits in the order of other pages or items"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"how they can immediately navigate to other pages or items."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use pagination if your list has 10 or more results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination identifies the page each result sits on. This makes it convenient for users to find again."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Stack standard pagination variant links vertically."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use standard and complex variants at the bottom of the body content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the simple variant nested in components, for example, the "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media-gallery/"},"children":[{"type":"text","value":"media gallery"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/components/carousel/"},"children":[{"type":"text","value":"carousel"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use ellipses to replace any skipped pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use pagination for one page only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only choose one pagination variant, never mix or combine them."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put the user first, so don't break up content if it reduces usability or performance."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use for linear user journeys such as form completion."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination has 3 main variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple, for a small number of items or used in other components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard, to navigate through a small number of pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex, when there is a large number of pages to navigate through."}]}]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--simple-tally"},"children":[]},{"type":"element","tag":"h3","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The standard variant is for navigating through a small number of pages. It has 2 options for label display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page titles."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page numbers."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use page titles to give more context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page."}]},{"type":"element","tag":"h4","props":{"id":"page-title"},"children":[{"type":"text","value":"Page Title"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"h4","props":{"id":"page-number"},"children":[{"type":"text","value":"Page Number"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--example-count"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex"},"children":[{"type":"text","value":"Complex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 3 pages that should always remain highlighted:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The first page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The current page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The last page."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Display page numbers for the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"current page on all screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"previous and next pages on smaller screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page immediately before and after the current page on larger screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"first and final pages on all screen sizes."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"simple","depth":3,"text":"Simple"},{"id":"standard","depth":3,"text":"Standard"},{"id":"complex","depth":3,"text":"Complex"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:pagination.md","_source":"content","_file":"design-system/5.components/pagination.md","_extension":"md"},{"_path":"/design-system/components/primary-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Primary navigation","description":"The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation contains:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a site logo"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigation links"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional search link."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The navigation and search links expand to either a fullscreen menu or search bar."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation always sits at the top of the page. It displays above all page content and components."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-primary-nav--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"logo"},"children":[{"type":"text","value":"Logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Within the primary navigation component, the logo is centred vertically."}]},{"type":"element","tag":"h4","props":{"id":"co-branding-logos"},"children":[{"type":"text","value":"Co-branding logos"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/logo/"},"children":[{"type":"text","value":"logo"}]},{"type":"text","value":" for guidance and requirements including co-branding."}]},{"type":"element","tag":"h4","props":{"id":"navigation-links"},"children":[{"type":"text","value":"Navigation links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When there are no child pages, there is no chevron and it takes users to the page."}]},{"type":"element","tag":"h4","props":{"id":"mega-menu"},"children":[{"type":"text","value":"Mega menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages."}]},{"type":"element","tag":"h4","props":{"id":"search-menu"},"children":[{"type":"text","value":"Search menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The menu can display a search bar to provide users the option to perform a site search."}]},{"type":"element","tag":"h4","props":{"id":"smaller-devices"},"children":[{"type":"text","value":"Smaller devices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.0 Criterion 1.1.1"}]},{"type":"text","value":", and for increased consistency across screens sizes, the primary navigation:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"uses the menu label and a chevron"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"doesn't use the 3 bar, or 'hamburger', menu icon."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."}]}]},{"type":"element","tag":"h4","props":{"id":"responsive-behaviour"},"children":[{"type":"text","value":"Responsive behaviour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation supports only a small number of items. This is because it is a horizontal list."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Take this into account when defining your site's IA."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A maximum number of links can display before the navigation bar will respond to the collapsed menu display."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When used with a single logo:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"992-1199px breakpoint can display 6 links (including search)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1200+ breakpoint can display 7 links (including search)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When used with a co-branded logo:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"992-1199px breakpoint can display 5 links (including search)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1200+ breakpoint can display 6 links (including search)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version."}]},{"type":"element","tag":"h4","props":{"id":"scroll-behaviour"},"children":[{"type":"text","value":"Scroll behaviour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation has show and hide behaviour on user scroll."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Scroll down: the primary navigation hides from view."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Scroll up: the primary navigation shows at the top of the viewport."}]}]},{"type":"element","tag":"h4","props":{"id":"interaction-with-other-components"},"children":[{"type":"text","value":"Interaction with other components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use across all pages of your site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use descriptive, recognisable link labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display links in priority order: move from left (for most-used links) to right (for least-used links)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Base your navigation's structure on user research."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Structure navigation to prioritise tasks and information your research says users need the most."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with optional user action, such as login, if required."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t label links with jargon or unfamiliar terms."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 150 characters per menu item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"An organisational structure should not be used as a navigation stucture."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual prominence and brand recognition"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation also adopts its theming from the search bar component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-primary-nav--default-story"},"children":[]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.2 Criterion 2.5.8"}]},{"type":"text","value":", the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.5.8 Target Size (Minimum) The size of the "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target","rel":["nofollow"]},"children":[{"type":"text","value":"target"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input","rel":["nofollow"]},"children":[{"type":"text","value":"pointer inputs"}]},{"type":"text","value":" is at least 24 by 24 "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel","rel":["nofollow"]},"children":[{"type":"text","value":"CSS pixels"}]},{"type":"text","value":","}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"accessibility","depth":2,"text":"Accessibility"}]}},"_type":"markdown","_id":"content:design-system:5.components:primary-navigation.md","_source":"content","_file":"design-system/5.components/primary-navigation.md","_extension":"md"},{"_path":"/design-system/components/profile","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Profile","description":"The Profile component shows an avatar (image) on your page, with supporting text to display key information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each row of content includes a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It's used to display key information, including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"category."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the profile component for displaying simple information. For data or complex information, consider using a table."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-profile--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep label as short as possible (under 2 words, like a name)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep all content clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display at the top of profile pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always add alt text to the image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use an image that's relevant to the summary."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a label that doesn't match the summary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use unimportant, complex or longform content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use full URLs in the label or summary."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:profile.md","_source":"content","_file":"design-system/5.components/profile.md","_extension":"md"},{"_path":"/design-system/components/radio-button","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Radio button","description":"The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use radio buttons to let users select one option from a list."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They help users make a single selection from a list of available items."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use radio buttons if a user may select multiple options. Use a checkbox component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use radio buttons with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"form label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"radio label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional hint text."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons should always have a form and radio label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use if only one options needs selecting from a list."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the reverse variant on grey backgrounds."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always write clear and concise radio label descriptions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure you list options in a logical and unbiased manner."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If unsure about the list order, place from most common, to least common."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hints to tell users they can only select one option."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for lists with more than one possible option. Use checkboxes for these."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use a radio group with an horizontal alignment for displaying more than 2 options."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't list all possible options. Add an option for 'other'."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for radio buttons, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a yes/no question"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user understand why they would say yes."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select yes if [the information is true]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select yes if you drive a car'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a choice (other than yes/no) from 2 options"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user choose the option that applies to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [the choice you are asking the user to make].'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you drive a car or truck’."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a choice from 3 or more options"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose a single option from 3 or more options."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select the [singular piece of information you are seeking from the user].'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select the day of the week you drive the most.'"}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons use colour for interactive states."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:radio-button.md","_source":"content","_file":"design-system/5.components/radio-button.md","_extension":"md"},{"_path":"/design-system/components/related-links","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Related links","description":"The Related links component is a list of links to help users discover related content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use if you’re presenting the user with related information or actions to help them deep dive into content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use related links for linking to unrelated content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-related-links--related-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to help users discover related content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in the sidebar section pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use at least 2 links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use no more than 8 links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep description clear, concise and specific to each link."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add unrelated links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload each link with too many words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't link to documents or videos - instead, embed them."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include other interactive elements, like buttons."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:related-links.md","_source":"content","_file":"design-system/5.components/related-links.md","_extension":"md"},{"_path":"/design-system/components/results-listing","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Results listing","description":"The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A results listing shows multiple results items, each with their own:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"title, telling the user the name of the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary, summing up the result’s content for the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"URL, telling the user the website address for the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"featured content, visually highlighting key content from the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"topic/category, putting the result into its context within a broader page or site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date, showing a result’s published (simple variant) or updated (default variant) date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"keyword term bold styling, showing the search term(s) in bold in the result displayed."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Put the search term in bold."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Test results so they are correct and relevant to the search term."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep descriptions under 150 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display up to 10 results."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display the result title only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t make only the title interactive, ensure the entire result is interactive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use both updated date and published date, choose one only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display more than 10 results."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A result listing's 2 main variants are:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default results listing has the option of surfacing key information when required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Key information can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audience"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"grants metadata such as grant value."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default variant users the updated date by default."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-details"},"children":[]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The simple variant displays the page title with accompanying metadata."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It uses the published date by default, which is automatically pulled in from the metadata."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend using this variant when displaying simple results, like news items."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-meta"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Results listing uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating to the user there is an interaction possible"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying key information such as status, the icon should adopt the relevant semantic colour."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-details"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"simple","depth":3,"text":"Simple"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:results-listing.md","_source":"content","_file":"design-system/5.components/results-listing.md","_extension":"md"},{"_path":"/design-system/components/search-bar","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Search bar","description":"The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the search bar to help users find what they are looking for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search bar includes:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text - placeholder and input text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search button label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search button icon"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional predictive list - present suggested keywords to the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional refine search link - expand to present advanced filters to the user."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"input-text"},"children":[{"type":"text","value":"Input text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include short, descriptive placeholder text. This tells the user what they can search for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The text the user inputs replaces the placeholder text."}]},{"type":"element","tag":"h4","props":{"id":"search-button"},"children":[{"type":"text","value":"Search button"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search button contains a button label and search icon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Smaller devices show a responsive variant with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"only a search icon"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"no button label."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This gives the user more space to write search text. Users know that a magnifying glass represents a search function."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The word ‘Search’ must appear in the alt text for screen readers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The button type should be a submit button. This lets a user conduct a search:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using the enter/return key"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using fewer keystrokes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"by choosing a suggestion (if applicable)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"that afterwards, still displays the search keyword."}]}]},{"type":"element","tag":"h4","props":{"id":"predictive-keyword-list"},"children":[{"type":"text","value":"Predictive keyword list"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a short, ordered list of no more than 10 keyword suggestions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They should appear after only a few keystrokes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the search bar to let users search your site (site search)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use default search field on white page background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use reverse search field on grey background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use menu variant in the mega menu only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only default and reverse variants with predictive list suggestions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Even if it's hidden from view, always use a form label for screen readers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep placeholder text concise and descriptive."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use default or reverse variants in the mega menu."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use filters or refine search with the menu variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use multiline search inputs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Revised search shouldn't be by default."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with the refine search link if no filters are available."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 3 search variants include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"menu."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is standard search. The button initiates search based on the text input."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when on a neutral background and you can't use the default variant."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"menu"},"children":[{"type":"text","value":"Menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use this in the mega menu. See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/primary-navigation/"},"children":[{"type":"text","value":"Primary Navigation"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--menu"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search bar uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interaction states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--menu"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"menu","depth":3,"text":"Menu"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:search-bar.md","_source":"content","_file":"design-system/5.components/search-bar.md","_extension":"md"},{"_path":"/design-system/components/skip-link","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Skip link","description":"The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use skip links to let users:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigate quickly through links and form elements"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigate your page when interacting only through the keyboard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"let users navigate directly to the main page content."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Until the user activates it through a keyboard press, a skip link won’t display."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When visible, it's always the first item on a page and pushes down all page content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-layout-skip-links--stand-alone"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It must be on every page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When visible, it must be the first element on the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use at the top of the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't edit the styling."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overlay page content. It must push down the page content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-layout-skip-links--stand-alone"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:skip-link.md","_source":"content","_file":"design-system/5.components/skip-link.md","_extension":"md"},{"_path":"/design-system/components/social-share","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Social share","description":"The Social share component shows a list of links to help users to share pages to social media.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use social share to let users share pages to their own social media channels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It uses the social media icons to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide extra context"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"distinguish between the different social media channels."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The link labels should clearly indicate the platform the user is sharing the page to."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-social-share--social-share"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use it to enable users to share pages to social media."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place in sidebar section of pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Link labels should be the social media platform name."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for links to sites that aren't social media channels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placing in a page's body section."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with labels that aren't social media platform names."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Social share uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-social-share--social-share"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:social-share.md","_source":"content","_file":"design-system/5.components/social-share.md","_extension":"md"},{"_path":"/design-system/components/statistics-grid","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Statistics grid","description":"The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each cell features:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a key statistic"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"content to give the statistic context."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A statistics grid can act as a summary to help users view multiple related pieces of content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-light"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use text or numbers in the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Give a high-level summary of key information."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The grid will always span the full available width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place in the body section of pages."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with under 2 or over 8 statistics."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use when you need a large amount of text for context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use images or graphics."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add links."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The statistic grid has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, for white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, for neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-light"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-dark"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:statistics-grid.md","_source":"content","_file":"design-system/5.components/statistics-grid.md","_extension":"md"},{"_path":"/design-system/components/table","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Table","description":"The Table component makes it easier for users to scan and compare data and content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users tend to read tables one row or column at a time. So, it's important that content is simple and logical."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A table can include a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"row and/or column headings that help users know what the rows and columns represent"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"body rows that display data or content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a table caption describing its content and helping users find, navigate and understand its information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a table footer that provides additional details, if required"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an expandable section with expandable rows, which can show extra related or supplementary information or data."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--structured-content"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table content should be left-aligned because we read from left to right. However, tables with financial figures should have columns that contain numerals set to right-aligned."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a caption or footer, if required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use for complex content and data sets."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align numbers to the right (except nominal numbers)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align headers according to their column data."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't repeat the same content in both the caption and summary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with long form content. Cell content should be brief and scannable."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use without zebra-stripe styling.."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't centre-align content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple, best used for simple data."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex, best used for complex data."}]}]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--table-scrollable"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex"},"children":[{"type":"text","value":"Complex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant is best used to display complex data sets."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--structured-content"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table data uses colour to indicate an action to the user."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--custom-content"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"simple","depth":3,"text":"Simple"},{"id":"complex","depth":3,"text":"Complex"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:table.md","_source":"content","_file":"design-system/5.components/table.md","_extension":"md"},{"_path":"/design-system/components/tabs","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Tabs","description":"The Tab component lets you organise related content so that users can switch between related information on the same page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tabs to let users stay on the same page, but access more content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"you can split, categorise and clearly label the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"there is a section more relevant for most users, which is placed first"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"seeing the all sections at the same time is not needed"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"you have a minimum of 2 tabs."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use tabs if your content is sequential. Use it to present related content together, as a group."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"labels"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an optional icon."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Order your tabs according to importance."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Labels should clearly and succinctly describe the content within the tab."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use tabs to group content that all sits at the same level of hierarchy."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit labels to one word and ensure they are unique."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use tabs within tabs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display disabled tabs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display more than one row of tabs when using the horizontal variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use if your content is short, instead use lists or paragraph text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Tabs are not a substitute for primary navigation, so never use tabs as primary navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use tabs to tell the user about their progress through a page or content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use tabs when the user needs to compare information, since only one tab is visible at a time."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs have 2 display variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"vertical."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default variant sets the tab group bottom border to span the full available content width."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"vertical"},"children":[{"type":"text","value":"Vertical"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vertical variant sets the tab group left border to span the height of the tab group."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--vertical"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs use colour to represent interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"vertical","depth":3,"text":"Vertical"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:tabs.md","_source":"content","_file":"design-system/5.components/tabs.md","_extension":"md"},{"_path":"/design-system/components/tag","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Tag","description":"The Tag component adds, and draws attention to, a category name for your content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tags to help categorise content. Tags help users to scan and find content that's relevant to them."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content can have more than one category or theme. Using the tag component helps indicate this to the user."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--neutral"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use keywords."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to draw attention to a category of content or information."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use nouns or adjectives."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overuse tags."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use icons in the tags."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use as a heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 2 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use as a link or action."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tags have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, for use on neutral backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral, for use on white backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--neutral"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"neutral","depth":3,"text":"Neutral"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:tag.md","_source":"content","_file":"design-system/5.components/tag.md","_extension":"md"},{"_path":"/design-system/components/text-area","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Text area","description":"The Text area component lets users select one option from a list.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use text area so users can enter multiple lines of text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text area is used when information longer than a single line of text is needed or expected. For example, comments fields."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text areas can be resized and can be used with a character counter."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a text area component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use text area with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px."}]},{"type":"element","tag":"h4","props":{"id":"resize-handle"},"children":[{"type":"text","value":"Resize handle"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can change the text area height (but not width) with the resize handle. They can also scroll within the container."}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a text area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the text area"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"character-count"},"children":[{"type":"text","value":"Character count"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A character count can sit below the text area field. It tells users the maximum characters and their input’s current count."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a label for text areas."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to specify helpful information such as specific formatting or information requirements."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify character counts when required."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use without a label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t set a minimum or maximum input limit without explicitly saying this in the character count."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use hint text if it isn’t relevant or meaningful to the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The text area has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for an input field, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: empty input"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Enter your name'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or less'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Delivery address must be 56 characters or less'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or more'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Previous employer must be 3 characters or more'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long or to short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be between [number] and [number] characters'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Justification must be between 3 and 56 characters'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Reasons must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must only include [list of allowed characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Explanations must only include letters, numbers and commas'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--error"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:text-area.md","_source":"content","_file":"design-system/5.components/text-area.md","_extension":"md"},{"_path":"/design-system/components/timeline","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Timeline","description":"The Timeline component contains blocks of content displayed in a linear order.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A timeline can include a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"subheading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some examples include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dates"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"stages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"actions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"outcomes."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The timeline component is ordered from top to bottom."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use between 3 to 8 discrete sections of content, so the user is not overwhelmed."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a title for the entire timeline."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a heading, subheading, short summary and optional image for each block."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only include 3 to 8 blocks per timeline."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a link if you're providing more details on another page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add fewer than 3 or more than 8 blocks."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use without a heading for each block."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never include unrelated content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Timeline has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"progressive."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"progressive"},"children":[{"type":"text","value":"Progressive"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the progressive variant to show the progress or status of the content to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--progressive-active-2"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Timeline uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show progress"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--progressive-active-2"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"progressive","depth":3,"text":"Progressive"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:timeline.md","_source":"content","_file":"design-system/5.components/timeline.md","_extension":"md"},{"_path":"/design-system/components/vertical-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Vertical navigation","description":"The Vertical navigation component displays a list of links to help users navigate a section of related pages.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use vertical navigation to help users navigate a section of related pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use vertical navigation to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"let users find and navigate to relevant information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show the user where, within your site’s content hierarchy, the page they are viewing is located"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show 4 nested content sections (parent sections) and a heading for the names of each section."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vertical navigation is placed next to your page’s body content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-vertical-navigation--vertical-navigation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use in a page's sidebar."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always keep the navigation links short. You can use a shorter version of the page title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display up to 4 levels of navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a link for the section's 'home' page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with at least 4 links."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't embed on a page that doesn't have a sidebar."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use on a site with fewer than 5 pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with icons."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use it to link to other sites."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vertical navigation uses colour and active state focus to highlight the current page the user is on."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-vertical-navigation--vertical-navigation"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color","rel":["nofollow"]},"children":[{"type":"text","value":"1.4.1"}]},{"type":"text","value":" Use of Color:"}]},{"type":"text","value":" Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:vertical-navigation.md","_source":"content","_file":"design-system/5.components/vertical-navigation.md","_extension":"md"},{"_path":"/framework","_dir":"","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Ripple Framework","description":"Ripple framework contains the tools for building SDP sites using the Ripple design system components.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Ripple Framework","src":"/assets/img/ripple-header.png","style":"margin-top: -20px; padding-bottom: 50px; "},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"what-is-it"},"children":[{"type":"text","value":"What is it?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple design system consists of the design elements and components used to build "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"any"}]},{"type":"text","value":" web application using the Victorian government brand. Ripple "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"framework"}]},{"type":"text","value":" is a collection of "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt"},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" modules and "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt-layers"},"children":[{"type":"text","value":"layers"}]},{"type":"text","value":" primarily used to create headless SDP websites using the Tide Drupal CMS."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","src":"/assets/img/modules/rpl-modules.png","class":"rpl-u-padding-t-4"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"whos-it-for"},"children":[{"type":"text","value":"Who's it for?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Whilst the Ripple UI components can be used in non SDP projects, Ripple framework assumes a Tide Drupal backend in most cases."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the Ripple framework, developers are able to build headless frontend websites that derive content from the Tide Drupal CMS via it's JSON API."}]},{"type":"element","tag":"h3","props":{"id":"sdp-architecture"},"children":[{"type":"text","value":"SDP architecture"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"SDP Architecture","src":"/assets/img/modules/sdp-architecture.png","class":"rpl-u-padding-12"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To find out more about Single Digital Presence please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"what-is-it","depth":2,"text":"What is it?"},{"id":"whos-it-for","depth":2,"text":"Who's it for?","children":[{"id":"sdp-architecture","depth":3,"text":"SDP architecture"}]}]}},"_type":"markdown","_id":"content:framework:1.index.md","_source":"content","_file":"framework/1.index.md","_extension":"md"},{"_path":"/framework/key-concepts/nuxt","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Nuxt","description":"Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.","layout":"page","links":[{"text":"Nuxt documentation","url":"https://nuxt.com/"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt is a framework for building web applications that can be rendered both server side using Node.js and client side with Vue.js components. Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"\"Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best practices while maintaining excellent Vue.js DX\""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Addy Osmani - Chief Engineer of Chrome"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is recommended that developers new to Ripple familiarise themselves with Nuxt by reading the documentation site, in particular, the following sections:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/introduction","rel":["nofollow"]},"children":[{"type":"text","value":"Introduction · Get Started with Nuxt "}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/concepts/vuejs-development","rel":["nofollow"]},"children":[{"type":"text","value":"Vue.js Development · Nuxt Concepts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/concepts/server-engine","rel":["nofollow"]},"children":[{"type":"text","value":" Server Engine · Nuxt Concepts "}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/directory-structure/nuxt","rel":["nofollow"]},"children":[{"type":"text","value":".nuxt/ · Nuxt Directory Structure"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/going-further/layers","rel":["nofollow"]},"children":[{"type":"text","value":"Authoring Nuxt Layers · Nuxt Advanced"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For support and help working with Nuxt please see "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/community/getting-help","rel":["nofollow"]},"children":[{"type":"text","value":"https://nuxt.com/docs/community/getting-help"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/support/solutions","rel":["nofollow"]},"children":[{"type":"text","value":"https://nuxt.com/support/solutions"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are a number of recommended resources for learning Nuxt 3 including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://masteringnuxt.com/nuxt3","rel":["nofollow"]},"children":[{"type":"text","value":"https://masteringnuxt.com/nuxt3"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://frontendmasters.com/courses/nuxt/","rel":["nofollow"]},"children":[{"type":"text","value":"https://frontendmasters.com/courses/nuxt/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=ww94Jvi8JJo","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.youtube.com/watch?v=ww94Jvi8JJo"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:1.nuxt.md","_source":"content","_file":"framework/2.key-concepts/1.nuxt.md","_extension":"md"},{"_path":"/framework/key-concepts/nuxt-layers","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Layers","description":"Nuxt layers are used to encapsulate Ripple functionality to share and reuse","layout":"page","links":[{"text":"Nuxt layers documentation","url":"https://nuxt.com/docs/getting-started/layers"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"nuxt"},"children":[{"type":"text","value":"Nuxt"}]},{"type":"text","value":" 3 provides a way to encapsulate part of a Nuxt project into what they call a Layer."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain."}]}]},{"type":"element","tag":"iframe","props":{"width":800,"height":500,"className":["rpl-u-padding-t-8","rpl-u-padding-b-8"],"style":"width: 100%","src":"https://www.youtube.com/embed/lnFCM7c9f7I","title":"YouTube video player","frameBorder":"0","allow":"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share","allowFullScreen":true},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2, we utilise Nuxt Layers extensively to share isolated features between SDP sites. A good example is a content type. Using a Nuxt Layer we are able to add the components, API endpoints, composables, etc needed to implement the feature, without having the overhead of a Nuxt Module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A great feature of Nuxt Layers is that you can reference them from any public or private Git repo in addition to publishing via an NPM module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is a diagram showing how Ripple 2 features are distributed through Nuxt layers and used within projects."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Ripple layers architecture diagram. Shows how modules can be shared between projects","src":"/assets/img/modules/layers.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:2.nuxt-layers.md","_source":"content","_file":"framework/2.key-concepts/2.nuxt-layers.md","_extension":"md"},{"_path":"/framework/key-concepts/api-endpoints","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"API endpoints","description":"Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.","layout":"page","links":[{"text":"Nuxt API routes documentation","url":"https://nuxt.com/docs/guide/directory-structure/server#api-routes"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2 we use API routes to create a "},{"type":"element","tag":"a","props":{"href":"https://medium.com/mobilepeople/backend-for-frontend-pattern-why-you-need-to-know-it-46f94ce420b0","rel":["nofollow"]},"children":[{"type":"text","value":"backend for frontend"}]},{"type":"text","value":" API that handles communicating with the Drupal Tide JSON API and maps the response to only what is required to render the page in Ripple."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"API routes diagram","src":"/assets/img/modules/api-routes.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"nitro-server-routes"},"children":[{"type":"text","value":"Nitro server routes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt 3 introduces the concept of "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/directory-structure/server#api-routes","rel":["nofollow"]},"children":[{"type":"text","value":"server API routes"}]},{"type":"text","value":" powered by the "},{"type":"element","tag":"a","props":{"href":"https://nitro.unjs.io/","rel":["nofollow"]},"children":[{"type":"text","value":"Nitro rendering engine"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/h3","rel":["nofollow"]},"children":[{"type":"text","value":"H3"}]},{"type":"text","value":" server."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nitro is the server layer that creates API routes in a Nuxt application. Nitro plugins run at build time and we use them to add the mapping needed to tell Ripple-tide-api package how to respond to a Drupal JSON API request for a content type node"}]},{"type":"element","tag":"h2","props":{"id":"ripple-tide-api"},"children":[{"type":"text","value":"Ripple Tide API"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple Tide API is the module that handles communication with Tide Drupal JSON API. It provides a wrapper service for API calls to Tide and provides an interface for adding mapping functions which transform the response from Drupal into only what's needed for rendering the website. This makes creating pages easier and improves performance by moving all data transformation into the server bundle where it can be easily cached."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"API routes diagram","src":"/assets/img/modules/ripple-tide-api.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"nitro-server-routes","depth":2,"text":"Nitro server routes"},{"id":"ripple-tide-api","depth":2,"text":"Ripple Tide API"}]}},"_type":"markdown","_id":"content:framework:2.key-concepts:3.API-endpoints.md","_source":"content","_file":"framework/2.key-concepts/3.API-endpoints.md","_extension":"md"},{"_path":"/framework/key-concepts/content-types","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Content types","description":"Implementing content type specific page layouts","layout":"page","links":[{"text":"Drupal content types","url":"https://www.drupal.org/docs/7/understanding-drupal/content-types"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are a Drupal concept that allow for modelling content using fields to describe the data structure. See the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/7/understanding-drupal/content-types","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal documentation"}]},{"type":"text","value":" for more details."}]},{"type":"element","tag":"h2","props":{"id":"ripple-content-types"},"children":[{"type":"text","value":"Ripple content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As SDP is a "},{"type":"element","tag":"a","props":{"href":"https://salsa.digital/insights/dissecting-the-single-digital-presence-platform","rel":["nofollow"]},"children":[{"type":"text","value":"headless CMS using a decoupled architecture"}]},{"type":"text","value":" once we have modelled content in Tide, we need a way to render it into a template that can be delivered to end users. Ripple content types allow you to support custom templates for new content types."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple content types consist of the following parts:"}]},{"type":"element","tag":"h3","props":{"id":"api-mapping"},"children":[{"type":"text","value":"API Mapping"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/api-endpoints"},"children":[{"type":"text","value":"API Endpoints"}]},{"type":"text","value":" for more information the Tide API translation layer. For each content type we supply a function that maps the Tide Drupal API response into more concise fields that match the data needed for"}]},{"type":"element","tag":"h3","props":{"id":"template"},"children":[{"type":"text","value":"Template"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To render the page using Ripple UI components, we need to create a Vue component that is passed the data from the API request and, using Ripple UI components, creates a layout that matches your intended design."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/framework/guides/creating-content-types"},"children":[{"type":"text","value":"Content type guide"}]},{"type":"text","value":" for more information on creating new content types."}]}]},{"type":"element","tag":"h2","props":{"id":"core-content-types"},"children":[{"type":"text","value":"Core content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Tide we have a number of content types which are part of the core distribution and are initially included in SDP sites"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Landing page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Event"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"News"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Publication (page)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alert"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"ripple-content-types","depth":2,"text":"Ripple content types","children":[{"id":"api-mapping","depth":3,"text":"API Mapping"},{"id":"template","depth":3,"text":"Template"}]},{"id":"core-content-types","depth":2,"text":"Core content types"}]}},"_type":"markdown","_id":"content:framework:2.key-concepts:4.content-types.md","_source":"content","_file":"framework/2.key-concepts/4.content-types.md","_extension":"md"},{"_path":"/framework/key-concepts/dynamic-components","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Dynamic components","description":null,"layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components are a concept in Ripple that is closely tied to the concept of 'Paragraphs' in Drupal. See the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal documentation for Paragraphs"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components/paragraphs can be added to pages in drupal (see "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Key concepts - content types"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple the raw paragraphs from the Drupal JSON API and 'mapped' to a Vue component, along with the props required for that component to render. This Vue component, along with the associated mapping is what is referred to as the 'Dynamic component'."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Illustration of hows how dynamic components are mapped from drupal paragraphs to vue components","src":"/assets/img/modules/dynamic-components.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:5.dynamic-components.md","_source":"content","_file":"framework/2.key-concepts/5.dynamic-components.md","_extension":"md"},{"_path":"/framework/guides/migrating","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Migrating from Ripple 1.x","description":"This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"background"},"children":[{"type":"text","value":"Background"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is a complete rewrite of both the design system and the Nuxt modules used to create SDP sites with it. It is a breaking change with the processes used to create sites and functionality used in Ripple 1. This was required due to the following reasons:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Latest versions of Vue and Nuxt 3 introducing breaking changes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Deprecation of IE11 support allowing us to support modern browser features"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Opportunity to adopt best practices such as Typescript and modern CSS"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Build up of technical and design debt"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Improvements to the design allowing better theming and accessibility"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Due to breaking changes between versions 2 and 3 of both Vue and Nuxt there is no automated way to upgrade Ripple components and sites.\n"},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Custom functionality built on Ripple 1 will need to be rewritten to use Ripple 2 API’s and design."}]}]}]},{"type":"element","tag":"h2","props":{"id":"migrating-your-site"},"children":[{"type":"text","value":"Migrating your site"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your site is supported by the SDP team for upgrades, the initial site upgrade will be handled by the SDP team. The process will be as follows:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a new empty V2 branch will be created in the site repository"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a fresh install of Ripple 2 will be added to the site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"all required environment variables will be added to the project to connect the site to the Tide content backend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the V2 branch will be setup to be served from behind the Section.io CDN"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The migration of the following will be out of scope for sites without an MoU for SDP support:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom content types"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom user facing components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Extensive theme customisation outside of those documented in the theming guide"}]}]},{"type":"element","tag":"h2","props":{"id":"migrating-features-from-ripple-1x"},"children":[{"type":"text","value":"Migrating features from Ripple 1.x"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please review the following concepts before proceeding:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/content-types"},"children":[{"type":"text","value":"Content types"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/api-endpoints"},"children":[{"type":"text","value":"API mapping"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/dynamic-components"},"children":[{"type":"text","value":"Dynamic components"}]}]}]},{"type":"element","tag":"h3","props":{"id":"content-types"},"children":[{"type":"text","value":"Content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types in Tide allow for defining custom fields that can be returned via the Drupal JSON API. Because SDP sites are headless, we need to tell Ripple how to render each custom content type on the front end."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1.x, each content type was added through the convention of adding a folder named tide and each content type as a subfolder. See "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/tree/develop/examples/basic-examples/tide/modules/example-content-type","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 1 example"}]},{"type":"text","value":".\nThe mapping of the tide API response was done through "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/modules/news/tide.config.j","rel":["nofollow"]},"children":[{"type":"text","value":"tide.config.js"}]},{"type":"text","value":". The JSON API response was returned in its entirety and mapping the Drupal fields to Ripple components was done through the Page component."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2.x we move the mapping of data to the Nuxt server layer. This allows us to only return the necessary data needed to the end user, reducing the JSON payload from Drupal."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more information on creating new content types see the guide on "},{"type":"element","tag":"a","props":{"href":"creating-content-types"},"children":[{"type":"text","value":"creating content types"}]}]},{"type":"element","tag":"h3","props":{"id":"dynamic-components"},"children":[{"type":"text","value":"Dynamic components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tide CMS makes use of "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal paragraphs"}]},{"type":"text","value":" to structure content types to allow content creators flexibility when composing content. Creating new paragraph types that can be reused for the landing page content or across others is a common customisation task."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1, new paragraph support was added through custom mappings "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/blob/develop/examples/basic-examples/tide/modules/example-override-mapping/tide.config.js","rel":["nofollow"]},"children":[{"type":"text","value":"See Ripple 1"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2, we need to add similar support - See "},{"type":"element","tag":"a","props":{"href":"dynamic-components"},"children":[{"type":"text","value":"Guide to creating dynamic components"}]}]},{"type":"element","tag":"h3","props":{"id":"search-listing-pages"},"children":[{"type":"text","value":"Search listing pages"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is still in Beta, please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/660","rel":["nofollow"]},"children":[{"type":"text","value":"feature proposal"}]},{"type":"text","value":" for more information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Listing pages are pages that contain dynamic lists of links to other pages. These are typically used to generate index pages when there are large amounts of similar items. See "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/grants","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/grants"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/victorian-honour-roll-of-women","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/victorian-honour-roll-of-women"}]},{"type":"text","value":" for example."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1 there was no dedicated content type for creating listing pages and hence these pages were usually created as static pages in the frontend."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2 we intend to move to a standard content type that allows configuring the search experience from the backend. Please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/660","rel":["nofollow"]},"children":[{"type":"text","value":"feature proposal"}]},{"type":"text","value":" for more info."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"background","depth":2,"text":"Background"},{"id":"migrating-your-site","depth":2,"text":"Migrating your site"},{"id":"migrating-features-from-ripple-1x","depth":2,"text":"Migrating features from Ripple 1.x","children":[{"id":"content-types","depth":3,"text":"Content types"},{"id":"dynamic-components","depth":3,"text":"Dynamic components"},{"id":"search-listing-pages","depth":3,"text":"Search listing pages"}]}]}},"_type":"markdown","_id":"content:framework:3.guides:1.migrating.md","_source":"content","_file":"framework/3.guides/1.migrating.md","_extension":"md"},{"_path":"/framework/guides/new-sites","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Setting up a new site","description":"A guide to setting up new SDP frontend sites using Ripple framework.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Setting up new sites with Ripple 2 is made easy with our CLI tool and provisioning process. Before you do so though please ensure you have got in touch with the SDP engagement manager ("},{"type":"element","tag":"a","props":{"href":"mailto:digital@dpc.vic.gov.au"},"children":[{"type":"text","value":"digital@dpc.vic.gov.au"}]},{"type":"text","value":") prior and have submitted a support request to the Digital Victoria Help Centre "},{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portals","rel":["nofollow"]},"children":[{"type":"text","value":"https://digital-vic.atlassian.net/servicedesk/customer/portals"}]}]},{"type":"element","tag":"h2","props":{"id":"requirements"},"children":[{"type":"text","value":"Requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When onboarding a new project to SDP the following will be provisioned for you:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Git repo created"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Required platform files added to repo, required Dockerfile, etc"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Bay hosting environment configured"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Section.io CDN setup and configured"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Environment variables set to your project specific requirements"}]}]},{"type":"element","tag":"h2","props":{"id":"local-development-dependencies"},"children":[{"type":"text","value":"Local development dependencies"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please make sure you have the following dependencies installed before proceeding. Typically local development is not performed through a docker container on the front end."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Node version 16.11.0 or greater (We recommend installing Node through Node Version Manager - See "},{"type":"element","tag":"a","props":{"href":"https://github.com/nvm-sh/nvm","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/nvm-sh/nvm"}]},{"type":"text","value":" for install guide)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"NPM version 8.1.0 or greater"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please see the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"engines"}]},{"type":"text","value":" key in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":" for most accurate versions."}]},{"type":"element","tag":"h2","props":{"id":"installing-ripple"},"children":[{"type":"text","value":"Installing Ripple"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For SDP sites, this will also be applied. However, if you wish to create a local install of Ripple outside of a project see below."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Installing Ripple is easy with the included CLI tool:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\"\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will copy the required files needed to setup your site into "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"~/path/to/site"}]}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"cd ~/path/to/site && npm install\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"cd ~/path/to/site && npm install"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will install all dependencies with NPM, you can then run the development server with"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"npm run dev\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npm run dev"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"requirements","depth":2,"text":"Requirements"},{"id":"local-development-dependencies","depth":2,"text":"Local development dependencies"},{"id":"installing-ripple","depth":2,"text":"Installing Ripple"}]}},"_type":"markdown","_id":"content:framework:3.guides:2.new-sites.md","_source":"content","_file":"framework/3.guides/2.new-sites.md","_extension":"md"},{"_path":"/framework/guides/brand-application","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Applying theme and brand","description":"A guide to applying theme and brand assets to Ripple sites.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theming with brand colours is embedded deeply into Ripple, using "},{"type":"element","tag":"a","props":{"href":"https://amzn.github.io/style-dictionary/#/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"design tokens"}]},{"type":"text","value":". Global and component styles are built on a base level of tokens, that can be adjusted at a "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site"}]},{"type":"text","value":" level by modifying a few key properties."}]},{"type":"element","tag":"h2","props":{"id":"token-naming"},"children":[{"type":"text","value":"Token naming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple uses a naming scheme for tokens, and the CSS custom properties are derived with this pattern:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"--rpl(-<module>)-<attribute>(-<level>)\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl(-<module>)-<attribute>(-<level>)"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some example props:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"--rpl-clr-primary\n--rpl-clr-success-light\n--rpl-type-size-5\n--rpl-sp-3\n--rpl-border-4\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-success-light\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-type-size-5\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-sp-3\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-border-4"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And a worked example:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":".example-block {\n border-color: var(--rpl-clr-primary);\n border-style: solid;\n border-width: var(--rpl-border-4);\n colour: var(--rpl-clr-primary);\n padding: var(--rpl-sp-3);\n}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":".example-block {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" border-color: var(--rpl-clr-primary);\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" border-style: solid;\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" border-width: var(--rpl-border-4);\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" colour: var(--rpl-clr-primary);\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" padding: var(--rpl-sp-3);\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"theme-properties"},"children":[{"type":"text","value":"Theme properties"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The minimum set of required properties are listed below:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"--rpl-clr-primary\n--rpl-clr-footer-alt\n--rpl-clr-link\n--rpl-clr-type-primary-accessible\n--rpl-clr-primary-alt\n--rpl-clr-type-primary-alt-accessible\n--rpl-clr-footer\n--rpl-clr-type-footer-accessible\n--rpl-clr-primary-alpha\n--rpl-clr-accent\n--rpl-clr-accent-alt\n--rpl-clr-focus\n--rpl-clr-gradient-horizontal\n--rpl-clr-gradient-vertical\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-footer-alt\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-link\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-type-primary-accessible\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-primary-alt\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-type-primary-alt-accessible\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-footer\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-type-footer-accessible\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-primary-alpha\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-accent\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-accent-alt\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-focus\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-gradient-horizontal\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"--rpl-clr-gradient-vertical"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"sdp"},"children":[{"type":"text","value":"SDP"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In SDP, the theme is managed in the back-end system via the Site Taxonomy. Site entries have a collection of key-value "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site theme values"}]},{"type":"text","value":", and also "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site feature flag values"}]},{"type":"text","value":" to define site-specific settings, e.g."}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"Key\nrpl-clr-primary\nValue\n#1c4f9c\n\nKey\nfooterTheme\nValue\nneutral\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Key\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"rpl-clr-primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Value\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"#1c4f9c\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Key\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"footerTheme\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"Value\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"neutral"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both these collections are exposed to the front-end through the Site API, and can immediately update production sites without requiring a code change or deployment."}]},{"type":"element","tag":"h2","props":{"id":"secondary-logo"},"children":[{"type":"text","value":"Secondary logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The secondary logo is also content managed, and can be set on the same Site Taxonomy page in the back-end under "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Logo"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"appconfig"},"children":[{"type":"text","value":"app.config"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme and feature flag properties may also be defined in the Nuxt "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.config.ts"}]},{"type":"text","value":" for the site. This matches the naming used in the Site API (note the difference in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--"}]},{"type":"text","value":" for theme, since these are Javascript config props, not CSS custom props):"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"export default defineAppConfig({\n ripple: {\n featureFlags: {\n contentCollectionSearchConnector: 'elasticsearch'\n },\n theme: {\n 'rpl-clr-primary': '#6B19A3',\n 'rpl-clr-footer-alt': '#6B19A3',\n 'rpl-clr-link': '#6B19A3',\n 'rpl-clr-type-primary-accessible': '#6B19A3',\n 'rpl-clr-primary-alt': '#3F006B',\n 'rpl-clr-type-primary-alt-accessible': '#3F006B',\n 'rpl-clr-footer': '#3F006B',\n 'rpl-clr-type-footer-accessible': '#3F006B',\n 'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n 'rpl-clr-accent': '#6DDD97',\n 'rpl-clr-accent-alt': '#EAFAF0',\n 'rpl-clr-focus': '#9DEF65',\n 'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n 'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n }\n }\n})\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"export default defineAppConfig({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" ripple: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" featureFlags: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" contentCollectionSearchConnector: 'elasticsearch'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" theme: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-primary': '#6B19A3',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-footer-alt': '#6B19A3',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-link': '#6B19A3',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-type-primary-accessible': '#6B19A3',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-primary-alt': '#3F006B',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-type-primary-alt-accessible': '#3F006B',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-footer': '#3F006B',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-type-footer-accessible': '#3F006B',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-accent': '#6DDD97',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-accent-alt': '#EAFAF0',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-focus': '#9DEF65',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" 'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"light-on-dark"}]},{"type":"text","value":" and "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"dark-on-light"}]},{"type":"text","value":" theming options."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"token-naming","depth":2,"text":"Token naming"},{"id":"theme-properties","depth":2,"text":"Theme properties"},{"id":"sdp","depth":2,"text":"SDP"},{"id":"secondary-logo","depth":2,"text":"Secondary logo"},{"id":"appconfig","depth":2,"text":"app.config"}]}},"_type":"markdown","_id":"content:framework:3.guides:3.brand-application.md","_source":"content","_file":"framework/3.guides/3.brand-application.md","_extension":"md"},{"_path":"/framework/guides/creating-content-types","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Creating content types","description":"How to create new content types for the SDP platform","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/content-types"},"children":[{"type":"text","value":"key concepts - content types"}]},{"type":"text","value":" for an overview of what content types are and the core content types used within the SDP platform."}]}]},{"type":"element","tag":"h2","props":{"id":"anatomy"},"children":[{"type":"text","value":"Anatomy"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are comprised of three main parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-mapping-object"},"children":[{"type":"text","value":"A mapping object"}]},{"type":"text","value":" - maps API data to pass to a Vue component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-server-plugin"},"children":[{"type":"text","value":"A server plugin"}]},{"type":"text","value":" - registers the content type with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@dpc-sdp/ripple-tide-api"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-vue-component"},"children":[{"type":"text","value":"And Vue components"}]},{"type":"text","value":" - takes the mapped data and renders the content type"}]}]},{"type":"element","tag":"h2","props":{"id":"creating-a-content-type"},"children":[{"type":"text","value":"Creating a content type"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Nuxt Ripple CLI provides a simple way to add new content types, to get started just run the following command:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[DIRECTORY]"}]},{"type":"text","value":" is the location to output the content type scaffolding, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{NAME}"}]},{"type":"text","value":" is the name of the new content type, and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{CYPRESSPATH}"}]},{"type":"text","value":" is the relative path to be used for the cypress tests folder."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the CLI is the preferred way to create new content types as it will ensure the correct file structure and naming conventions are used. It will also scaffold the mapping object, server plugin, and Vue component for you."}]}]},{"type":"element","tag":"h2","props":{"id":"the-mapping-object"},"children":[{"type":"text","value":"The mapping object"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mapping object is responsible for supplying the data mapping and includes."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Data mapping"}]},{"type":"text","value":": the data mapping is responsible for mapping the Tide API response data (i.e. Drupal JSON) into a clean format that can be used within the Vue component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Includes"}]},{"type":"text","value":": the includes are an array of fields that need to be added to the API request so Drupal knows what referenced entities to include in the API response, for more on Drupal includes see "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes","rel":["nofollow"]},"children":[{"type":"text","value":"JSON API includes"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is an example mapping object."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"import type { IRplTideModuleMapping } from '@dpc-sdp/ripple-tide-api/types'\nimport { tidePageBaseMapping, tidePageBaseIncludes } from '@dpc-sdp/nuxt-ripple/mapping'\nimport { getField, getImageFromField } from '@dpc-sdp/ripple-tide-api'\n\nconst tideMyConentTypeModule: IRplTideModuleMapping = {\n mapping: {\n // The base mapping is used to add common fields\n // See the tidePageBaseMapping function for details \n ...tidePageBaseMapping({ withTopicTags: true }),\n \n content: 'field_my_content_type_content',\n \n // Can be nested as needed\n header: {\n intro: 'field_landing_page_intro_text',\n },\n \n // Use a function to transform the data\n files: (src) => getField(src, 'field_node_files').map((file) => ({\n name: file.name,\n url: file.field_media_file.url\n })),\n\n // Or when using helper functions\n image: (src) => getImageFromField(src, 'field_featured_image.field_media_image')\n },\n includes: [\n // The base includes are used to include common fields\n // See the tidePageBaseIncludes function for details \n ...tidePageBaseIncludes({ withTopicTags: true }),\n \n 'field_featured_image',\n 'field_featured_image.field_media_image'\n ]\n}\n\nexport default tideMyConentTypeModule\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { IRplTideModuleMapping } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { tidePageBaseMapping, tidePageBaseIncludes } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/nuxt-ripple/mapping'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { getField, getImageFromField } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-api'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"tideMyConentTypeModule"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"IRplTideModuleMapping"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" mapping: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// The base mapping is used to add common fields\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// See the tidePageBaseMapping function for details \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"tidePageBaseMapping"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"({ withTopicTags: "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" content: "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_my_content_type_content'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Can be nested as needed\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" header: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" intro: "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_landing_page_intro_text'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Use a function to transform the data\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"files"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"getField"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"(src, "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_node_files'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" name: file.name,\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" url: file.field_media_file.url\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" })),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Or when using helper functions\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"getImageFromField"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"(src, "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_featured_image.field_media_image'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" includes: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// The base includes are used to include common fields\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// See the tidePageBaseIncludes function for details \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"tidePageBaseIncludes"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"({ withTopicTags: "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_featured_image'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_featured_image.field_media_image'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"tideMyConentTypeModule"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-server-plugin"},"children":[{"type":"text","value":"The server plugin"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The server plugin is responsible for registering the new content type with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@dpc-sdp/ripple-tide-api"}]},{"type":"text","value":", this file needs to live within the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"server/plugins"}]},{"type":"text","value":" directory of the content type."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The content type can then be registered by calling the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setContentType"}]},{"type":"text","value":" method on the Tide page API. This method takes two arguments, the first is the name of the content type, and the second is the mapping object. If you have used the CLI to create the content type this will already be done for you."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"import type { NitroApp } from 'nitropack'\nimport { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'\nimport tideMyContentTypeModule from '../../mapping'\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n nitroApp.tide?.pageApi.setContentType('my-content-type', tideMyContentTypeModule)\n})\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { NitroApp } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'nitropack'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { defineNitroPlugin } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'nitropack/dist/runtime/plugin'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" tideMyContentTypeModule "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'../../mapping'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" (nitroApp"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" NitroApp) "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"{\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" nitroApp.tide?.pageApi."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"setContentType"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'my-content-type'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", tideMyContentTypeModule)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-component"},"children":[{"type":"text","value":"The Vue component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A Vue component is needed to render the content type. This component will receive a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"page"}]},{"type":"text","value":" prop, it's this prop that contains the mapped data from the Tide API response."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important note"}]},{"type":"text","value":": The component needs to be registered globally, this can be done by adding the component to a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/components/global"}]},{"type":"text","value":" folder within the content type. Because this is global the name needs to be unique, it must also be prefixed with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Tide"}]},{"type":"text","value":" i.e. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TideMyContentType"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component should use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":" component to render the shell of the site, from there slots are used to render the content types content in the right locations. If you're using the CLI it will take care of scaffolding a global component that uses "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":" for you."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is an example component using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"className":["language-vue"],"code":"<template>\n <TideBaseLayout\n :site=\"site\"\n :page=\"page\"\n :siteSection=\"page.siteSection\"\n :pageTitle=\"page.title\"\n :pageLanguage=\"page.lang\"\n :updatedDate=\"page.changed || page.created\"\n :showContentRating=\"page.showContentRating\"\n >\n <template #aboveHeader>\n <slot name=\"aboveHeader\"></slot>\n </template>\n <template #primaryNav>\n <slot name=\"primaryNav\"></slot>\n </template>\n <template #breadcrumbs>\n <slot name=\"breadcrumbs\"></slot>\n </template>\n <template #aboveBody>\n <slot name=\"aboveBody\"></slot>\n </template>\n <template #body>\n <!-- Add content within the relevant slot -->\n <TideMyContentTypeContent :content=\"page.content\" />\n </template>\n <template #sidebar>\n <slot name=\"sidebar\"></slot>\n </template>\n <template #footer>\n <slot name=\"footer\"></slot>\n </template>\n </TideBaseLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { TideSiteData } from '@dpc-sdp/ripple-tide-api/types'\nimport type { TideMediaPage } from '../../types'\n\ninterface Props {\n site: TideSiteData\n page: TideMediaPage\n}\n\ndefineProps<Props>()\n</script>\n","language":"vue","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-892505"},"children":[{"type":"text","value":"TideBaseLayout\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":site"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"site\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":page"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":siteSection"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.siteSection\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":pageTitle"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.title\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":pageLanguage"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.lang\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":updatedDate"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.changed || page.created\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":showContentRating"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.showContentRating\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" >\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"aboveHeader"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"aboveHeader\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"primaryNav"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"primaryNav\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"breadcrumbs"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"breadcrumbs\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"aboveBody"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"aboveBody\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"<!-- Add content within the relevant slot -->\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-892505"},"children":[{"type":"text","value":"TideMyContentTypeContent"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":":content"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"page.content\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"sidebar"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"sidebar\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"footer"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"footer\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-892505"},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { TideSiteData } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":38},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { TideMediaPage } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'../../types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":39},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":40},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":41},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"site"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"TideSiteData\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":42},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"page"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"TideMediaPage\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":43},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":44},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":45},"children":[{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":46},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-872567"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"using-the-content-type"},"children":[{"type":"text","value":"Using the content type"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are actually "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/layers","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt layers"}]},{"type":"text","value":" so these are added in the same way as any other layer through the extends property of the main applications "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"export default defineNuxtConfig({\n extends: [\n '@dpc-sdp/ripple-tide-news', // An npm installed package\n 'github:dpc-sdp/ripple-tide-news#1.0.0', // A tagged git repository\n './layers/tide-my-content-type', // A local layer\n ]\n})\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"extends: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-news'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// An npm installed package\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'github:dpc-sdp/ripple-tide-news#1.0.0'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// A tagged git repository\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'./layers/tide-my-content-type'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// A local layer\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-186825{color:#CF222E;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-109545{color:#0550AE;}\n.ct-082380{color:#953800;}\n.ct-690235{color:#6E7781;}\n.ct-319862{color:#8250DF;}\n.ct-872567{color:#116329;}\n.ct-892505{color:#82071E;font-style:italic;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"anatomy","depth":2,"text":"Anatomy"},{"id":"creating-a-content-type","depth":2,"text":"Creating a content type"},{"id":"the-mapping-object","depth":2,"text":"The mapping object"},{"id":"the-server-plugin","depth":2,"text":"The server plugin"},{"id":"the-vue-component","depth":2,"text":"The Vue component"},{"id":"using-the-content-type","depth":2,"text":"Using the content type"}]}},"_type":"markdown","_id":"content:framework:3.guides:4.creating-content-types.md","_source":"content","_file":"framework/3.guides/4.creating-content-types.md","_extension":"md"},{"_path":"/framework/guides/creating-new-layers","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Creating new layers","description":"Implementing custom functionality through layers","layout":"page","links":[{"text":"Nuxt layers documentation","url":"https://nuxt.com/docs/getting-started/layers"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers are used to encapsulate Ripple functionality, so it can easily be shared and reused across projects, see "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt-layers"},"children":[{"type":"text","value":"key concepts - layers"}]},{"type":"text","value":" for a conceptual overview of what layers are and how they are used within Ripple."}]},{"type":"element","tag":"h2","props":{"id":"creating-a-new-layer"},"children":[{"type":"text","value":"Creating a new layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Nuxt Ripple CLI provides a simple way to initialise new layers, to create a new layer just run the following command:"}]},{"type":"element","tag":"code","props":{"className":["language-undefined"],"code":"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[DIRECTORY]"}]},{"type":"text","value":" is the location to output the layer scaffolding and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{NAME}"}]},{"type":"text","value":" is the name of the new layer. This command will scaffold everything you need to get started developing a new layer."}]},{"type":"element","tag":"h2","props":{"id":"developing-the-layer"},"children":[{"type":"text","value":"Developing the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once the layer has been created you can start working with it by running the command below from the new layers directory. This will start a development server and allow you to start working on the layer."}]},{"type":"element","tag":"code","props":{"className":["language-bash"],"code":"npm run dev\n","language":"bash","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"run"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"dev"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"playground"}]},{"type":"text","value":" folder contains the essentials to get a test Nuxt application up and running, it includes a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.config.js"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file. The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" includes a core set of layers used by Ripple to get a reference sdp site up and running, it also includes the new layer itself."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"playground"}]},{"type":"text","value":" folder is a fully functional Nuxt application and can be used to test the new layer in isolation."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The layers structure is almost identical to a normal Nuxt app, meaning you can utilise the same features and conventions as a standard Nuxt application. i.e. create a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"pages"}]},{"type":"text","value":" folder for new pages, create a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" folder for new components, etc."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other useful commands:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm run build"}]},{"type":"text","value":" to do a production build of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".preview"}]},{"type":"text","value":" application (for testing purposes)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm run lint"}]},{"type":"text","value":" to lint the layer code with "},{"type":"element","tag":"a","props":{"href":"https://eslint.org/","rel":["nofollow"]},"children":[{"type":"text","value":"eslint"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm run test"}]},{"type":"text","value":" to run any unit tests with "},{"type":"element","tag":"a","props":{"href":"https://jestjs.io/","rel":["nofollow"]},"children":[{"type":"text","value":"jest"}]}]}]},{"type":"element","tag":"h2","props":{"id":"publishing-the-layer"},"children":[{"type":"text","value":"Publishing the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once the layer is ready to be published it can be published to npm or pushed to a remote git repository, "},{"type":"element","tag":"a","props":{"href":"https://github.com/","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://about.gitlab.com/","rel":["nofollow"]},"children":[{"type":"text","value":"GitLab"}]},{"type":"text","value":", and "},{"type":"element","tag":"a","props":{"href":"https://bitbucket.org/","rel":["nofollow"]},"children":[{"type":"text","value":"Bitbucket"}]},{"type":"text","value":" are supported.\nFor more on publishing to npm see "},{"type":"element","tag":"a","props":{"href":"https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry","rel":["nofollow"]},"children":[{"type":"text","value":"contributing packages to the npm registry"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"using-the-layer"},"children":[{"type":"text","value":"Using the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers can be added to any Nuxt site by including the layer in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" file under extends. If the layer is published to npm don't forget to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"npm install"}]},{"type":"text","value":" it first."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"export default defineNuxtConfig({\n extends: [\n '@dpc-sdp/nuxt-ripple', // An npm installed package\n 'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0' // A tagged git repository\n ]\n})\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"extends: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/nuxt-ripple'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// An npm installed package\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// A tagged git repository\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also, make sure to check the layers documentation for any additional configuration that may be required."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To extend from a private repository, you need to add a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GIGET_AUTH=<token>"}]},{"type":"text","value":" environment variable, with an auth token from your git provider."}]}]},{"type":"element","tag":"h3","props":{"id":"caveats-when-using-layers-from-a-git-repository"},"children":[{"type":"text","value":"Caveats when using layers from a git repository"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a layer is added via a git repository and that layer has npm dependencies, you will need to manually install them within the Nuxt application utilising the layer. The Nuxt team are looking at auto-installing layer dependencies in the future, see "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/nuxt/issues/13367","rel":["nofollow"]},"children":[{"type":"text","value":"issue #13367"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You will also need to alias the dependencies in the Nuxt application, so they can be resolved to the correct package location. This can be done by adding an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alias"}]},{"type":"text","value":" object to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"code","props":{"className":["language-js"],"code":"export default defineNuxtConfig({\n alias: {\n 'date-fns': require.resolve('date-fns')\n }\n})\n","language":"js","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"alias: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'date-fns'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": require."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'date-fns'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-082380{color:#953800;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-186825{color:#CF222E;}\n.ct-319862{color:#8250DF;}\n.ct-690235{color:#6E7781;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"creating-a-new-layer","depth":2,"text":"Creating a new layer"},{"id":"developing-the-layer","depth":2,"text":"Developing the layer"},{"id":"publishing-the-layer","depth":2,"text":"Publishing the layer"},{"id":"using-the-layer","depth":2,"text":"Using the layer","children":[{"id":"caveats-when-using-layers-from-a-git-repository","depth":3,"text":"Caveats when using layers from a git repository"}]}]}},"_type":"markdown","_id":"content:framework:3.guides:5.creating-new-layers.md","_source":"content","_file":"framework/3.guides/5.creating-new-layers.md","_extension":"md"},{"_path":"/framework/guides/dynamic-components","_dir":"guides","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Adding a new dynamic component","description":"Learn how to add a new dynamic page component to a content type","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/dynamic-components"},"children":[{"type":"text","value":"key concepts - dynamic components"}]},{"type":"text","value":" for a conceptual overview of what dynamic components are and how they are used within the SDP platform."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components comprise of the following elements:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A mapping function that will map the raw drupal api response to a Vue component and the props to pass to that Vue component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A Vue component that will render the component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A list of 'includes' to send to Drupal JSON API (See drupal docs for "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes","rel":["nofollow"]},"children":[{"type":"text","value":"Includes"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A list of content types that the dynamic component can be added to"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component then needs to be registered against the name of the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"paragraph"}]},{"type":"text","value":" in Drupal."}]},{"type":"element","tag":"h2","props":{"id":"registering-the-dynamic-component"},"children":[{"type":"text","value":"Registering the dynamic component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components need to registered inside a "},{"type":"element","tag":"a","props":{"href":"https://nitro.unjs.io/guide/plugins","rel":["nofollow"]},"children":[{"type":"text","value":"Nitro Plugins"}]},{"type":"text","value":". Nitro is the server engine used in Nuxt 3."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nitro Plugins can be added in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/server/plugins"}]},{"type":"text","value":" folder in your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"text","value":" method to register your component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"text","value":" takes the following parameters:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"name of the component in Drupal (paragraph name)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the mapping function, includes and list of content types"}]}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"// /server/plugins/my-content-type.ts\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n nitroApp.tide?.pageApi.setDynamicComponent('paragraph--my_dynamic_component', {\n mapping: (field) => { ... },\n includes: [ ... ],\n contentTypes: [ ... ]\n })\n})\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// /server/plugins/my-content-type.ts\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" (nitroApp"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" NitroApp) "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"{\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" nitroApp.tide?.pageApi."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'paragraph--my_dynamic_component'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":", {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"mapping"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"field"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" includes: [ "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" contentTypes: [ "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" })\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The individual elements of a dynamic component are covered below."}]},{"type":"element","tag":"h2","props":{"id":"the-mapping-function"},"children":[{"type":"text","value":"The mapping function"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mapping function takes the raw response from the drupal JSON API and returns a standard structure that ultimately ties the dynamic component with a Vue component."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'\n\ninterface IMyDynamicComponentProps {\n someProp1: boolean,\n someProp2: string\n}\n\nconst mappingFunction = (field): TideDynamicPageComponent<IMyDynamicComponentProps> => {\n return {\n // This should be the name to the Vue component you created\n component: 'MyDynamicComponent',\n\n // Always include a unique id\n id: field.drupal_internal__id.toString(),\n\n // Some components have titles above them, which you can add here. This is optional\n title: field.field_paragraph_title,\n\n // These props will be passed to `MyDynamicComponent`\n props: {\n someProp1: false,\n someProp2: field.field_paragraph_description\n }\n }\n}\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" { TideDynamicPageComponent } "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"IMyDynamicComponentProps"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"someProp1"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"someProp2"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"string\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"mappingFunction"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"field"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"TideDynamicPageComponent"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"IMyDynamicComponentProps"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// This should be the name to the Vue component you created\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" component: "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'MyDynamicComponent'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Always include a unique id\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" id: field.drupal_internal__id."}]},{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"(),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// Some components have titles above them, which you can add here. This is optional\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" title: field.field_paragraph_title,\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// These props will be passed to `MyDynamicComponent`\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" props: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" someProp1: "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" someProp2: field.field_paragraph_description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-component"},"children":[{"type":"text","value":"The Vue component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a Vue component that will render your dynamic component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will be rendered each time your component appears on a page and will receive any props that were specified from the mapping function."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important note"}]},{"type":"text","value":": For this to work, your component needs to be registered globally. The simplest way to do this is to add the component to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/components/global"}]},{"type":"text","value":" folder in your layer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Because they are global it's also important to choose non generic names so that they don't clash and overwrite other dynamic components"}]}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"// /components/global/MyDynamicComponent.vue\n\n<script setup lang=\"ts\">\ndefineProps<{\n someProp1: boolean,\n someProp2: string\n}>()\n</script>\n\n<template>\n <div>\n {{someProp2}}\n </div>\n</template>\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-690235"},"children":[{"type":"text","value":"// /components/global/MyDynamicComponent.vue\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"script setup lang"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-319862"},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<{\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"someProp1"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"someProp2"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"string\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"}>()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-082380"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" {{someProp2}}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-list-of-includes"},"children":[{"type":"text","value":"The list of includes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component should specify an array of 'includes' that it needs in order to function properly."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"const includes = [\n 'field_landing_page_component.field_paragraph_accordion'\n]\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"includes"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'field_landing_page_component.field_paragraph_accordion'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"]"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-list-of-content-types"},"children":[{"type":"text","value":"The list of content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component should specify an array of 'content types' that the dynamic component can appear on."}]},{"type":"element","tag":"code","props":{"className":["language-ts"],"code":"const contentTypes = [\n 'landing_page',\n 'some_content_type'\n]\n","language":"ts","meta":""},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-109545"},"children":[{"type":"text","value":"contentTypes"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-186825"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'landing_page'"}]},{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-165924"},"children":[{"type":"text","value":"'some_content_type'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"class":"ct-996368"},"children":[{"type":"text","value":"]"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-690235{color:#6E7781;}\n.ct-186825{color:#CF222E;}\n.ct-082380{color:#953800;}\n.ct-319862{color:#8250DF;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}\n.ct-109545{color:#0550AE;}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"registering-the-dynamic-component","depth":2,"text":"Registering the dynamic component"},{"id":"the-mapping-function","depth":2,"text":"The mapping function"},{"id":"the-vue-component","depth":2,"text":"The Vue component"},{"id":"the-list-of-includes","depth":2,"text":"The list of includes"},{"id":"the-list-of-content-types","depth":2,"text":"The list of content types"}]}},"_type":"markdown","_id":"content:framework:3.guides:5.dynamic-components.md","_source":"content","_file":"framework/3.guides/5.dynamic-components.md","_extension":"md"},{"_path":"/framework/core-modules","_dir":"framework","_draft":false,"_partial":false,"_locale":"","_empty":false,"title":"Core modules","description":"A listing of all current core Ripple layers and packages","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"View each package on NPM for their individual READMEs."}]},{"type":"element","tag":"h2","props":{"id":"core-ui-libraries"},"children":[{"type":"text","value":"Core UI Libraries"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-core","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-core"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-forms","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-ui-forms"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"tide-api"},"children":[{"type":"text","value":"Tide API"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-api","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-api"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"nuxt-ripple-base-layer"},"children":[{"type":"text","value":"Nuxt-ripple base layer"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-ripple"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"core-content-types"},"children":[{"type":"text","value":"Core content types"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-landing-page","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-landing-page"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-event","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-event"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-grant","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-grant"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-media","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-media"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-news","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-news"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-publication","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-publication"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"other-core-modules"},"children":[{"type":"text","value":"Other core modules"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-search","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-tide-search"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-analytics","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-ripple-analytics"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-preview","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-ripple-preview"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"scaffolding-testing-and-supporting-packages"},"children":[{"type":"text","value":"Scaffolding, testing and supporting packages"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-cli","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-ripple-cli"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-test-utils","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ripple-test-utils"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"core-ui-libraries","depth":2,"text":"Core UI Libraries"},{"id":"tide-api","depth":2,"text":"Tide API"},{"id":"nuxt-ripple-base-layer","depth":2,"text":"Nuxt-ripple base layer"},{"id":"core-content-types","depth":2,"text":"Core content types"},{"id":"other-core-modules","depth":2,"text":"Other core modules"},{"id":"scaffolding-testing-and-supporting-packages","depth":2,"text":"Scaffolding, testing and supporting packages"}]}},"_type":"markdown","_id":"content:framework:4.core-modules.md","_source":"content","_file":"framework/4.core-modules.md","_extension":"md"}],"navigation":[{"title":"Ripple Design System","_path":"/","icon":"carbon:home","layout":"home"},{"title":"Design System","_path":"/design-system","children":[{"title":"About","_path":"/design-system/about","children":[{"title":"What is Ripple?","_path":"/design-system/about/what-is-ripple","layout":"page"},{"title":"Who's it for?","_path":"/design-system/about/whos-it-for","layout":"page"},{"title":"Support","_path":"/design-system/about/getting-support","layout":"page"},{"title":"Contributing","_path":"/design-system/about/contributing","layout":"page"}]},{"title":"Design","_path":"/design-system/design","children":[{"title":"Getting started","_path":"/design-system/design/getting-started","layout":"page"},{"title":"Our design principles","_path":"/design-system/design/our-design-principles","layout":"page"},{"title":"Design tokens","_path":"/design-system/design/design-tokens","layout":"page"},{"title":"Theming guidance for designers","_path":"/design-system/design/theming-guidance-for-designers","layout":"page"}]},{"title":"Develop","_path":"/design-system/develop","children":[{"title":"Getting started","_path":"/design-system/develop/getting-started","layout":"page"},{"title":"Contributing","_path":"/design-system/develop/contributing","layout":"page"},{"title":"Theme and brand application","_path":"/design-system/develop/theming","layout":"page"},{"title":"Usage","_path":"/design-system/develop/usage","children":[{"title":"Access to Github Packages","_path":"/design-system/develop/usage/access-to-github-packages","layout":"page"},{"title":"Vue","_path":"/design-system/develop/usage/vue","layout":"page"},{"title":"Nuxt","_path":"/design-system/develop/usage/nuxt","layout":"page"},{"title":"Web components","_path":"/design-system/develop/usage/webcomponents","layout":"page"},{"title":"Styles only","_path":"/design-system/develop/usage/css-only","layout":"page"}],"layout":"page"}]},{"title":"Styles","_path":"/design-system/styles","children":[{"title":"Colour","_path":"/design-system/styles/colour","layout":"page"},{"title":"Focus state","_path":"/design-system/styles/focus-state","layout":"page"},{"title":"Grid","_path":"/design-system/styles/grid","layout":"page"},{"title":"Icons","_path":"/design-system/styles/icons","layout":"page"},{"title":"Layer styles","_path":"/design-system/styles/layer-styles","layout":"page"},{"title":"Layout","_path":"/design-system/styles/layout","layout":"page"},{"title":"Logo","_path":"/design-system/styles/logo","layout":"page"},{"title":"Motion","_path":"/design-system/styles/motion","layout":"page"},{"title":"Spacing","_path":"/design-system/styles/spacing","layout":"page"},{"title":"Typography","_path":"/design-system/styles/typography","layout":"page"}]},{"title":"Components","_path":"/design-system/components","children":[{"title":"Accordion","_path":"/design-system/components/accordion","layout":"page"},{"title":"Acknowledgement","_path":"/design-system/components/acknowledgment","layout":"page"},{"title":"Alert","_path":"/design-system/components/alert","layout":"page"},{"title":"Block quote","_path":"/design-system/components/block-quote","layout":"page"},{"title":"Breadcrumb","_path":"/design-system/components/breadcrumb","layout":"page"},{"title":"Button","_path":"/design-system/components/button","layout":"page"},{"title":"Call to action","_path":"/design-system/components/call-to-action","layout":"page"},{"title":"Callout","_path":"/design-system/components/callout","layout":"page"},{"title":"Campaign banner","_path":"/design-system/components/campaign-banner","layout":"page"},{"title":"Card","_path":"/design-system/components/card","layout":"page"},{"title":"Carousel","_path":"/design-system/components/carousel","layout":"page"},{"title":"Category grid","_path":"/design-system/components/category-grid","layout":"page"},{"title":"Checkbox","_path":"/design-system/components/checkbox","layout":"page"},{"title":"Chip","_path":"/design-system/components/chip","layout":"page"},{"title":"Contact us","_path":"/design-system/components/contact-us","layout":"page"},{"title":"Date input","_path":"/design-system/components/date-input","layout":"page"},{"title":"Detail list","_path":"/design-system/components/detail-list","layout":"page"},{"title":"Dropdown","_path":"/design-system/components/dropdown","layout":"page"},{"title":"File","_path":"/design-system/components/file","layout":"page"},{"title":"Footer","_path":"/design-system/components/footer","layout":"page"},{"title":"Form alert","_path":"/design-system/components/form-alert","layout":"page"},{"title":"Form","_path":"/design-system/components/form","layout":"page"},{"title":"Header","_path":"/design-system/components/header","layout":"page"},{"title":"In-page navigation","_path":"/design-system/components/in-page-navigation","layout":"page"},{"title":"Input field","_path":"/design-system/components/input-field","layout":"page"},{"title":"Key dates","_path":"/design-system/components/key-dates","layout":"page"},{"title":"Media embed","_path":"/design-system/components/media-embed","layout":"page"},{"title":"Media fullscreen","_path":"/design-system/components/media-fullscreen","layout":"page"},{"title":"Media gallery","_path":"/design-system/components/media-gallery","layout":"page"},{"title":"Media","_path":"/design-system/components/media","layout":"page"},{"title":"Option button","_path":"/design-system/components/option-button","layout":"page"},{"title":"Page action","_path":"/design-system/components/page-action","layout":"page"},{"title":"Pagination","_path":"/design-system/components/pagination","layout":"page"},{"title":"Primary navigation","_path":"/design-system/components/primary-navigation","layout":"page"},{"title":"Profile","_path":"/design-system/components/profile","layout":"page"},{"title":"Radio button","_path":"/design-system/components/radio-button","layout":"page"},{"title":"Related links","_path":"/design-system/components/related-links","layout":"page"},{"title":"Results listing","_path":"/design-system/components/results-listing","layout":"page"},{"title":"Search bar","_path":"/design-system/components/search-bar","layout":"page"},{"title":"Skip link","_path":"/design-system/components/skip-link","layout":"page"},{"title":"Social share","_path":"/design-system/components/social-share","layout":"page"},{"title":"Statistics grid","_path":"/design-system/components/statistics-grid","layout":"page"},{"title":"Table","_path":"/design-system/components/table","layout":"page"},{"title":"Tabs","_path":"/design-system/components/tabs","layout":"page"},{"title":"Tag","_path":"/design-system/components/tag","layout":"page"},{"title":"Text area","_path":"/design-system/components/text-area","layout":"page"},{"title":"Timeline","_path":"/design-system/components/timeline","layout":"page"},{"title":"Vertical navigation","_path":"/design-system/components/vertical-navigation","layout":"page"}]}]},{"title":"Ripple Framework","_path":"/framework","children":[{"title":"Ripple Framework","_path":"/framework","layout":"page"},{"title":"Key Concepts","_path":"/framework/key-concepts","children":[{"title":"Nuxt","_path":"/framework/key-concepts/nuxt","layout":"page"},{"title":"Layers","_path":"/framework/key-concepts/nuxt-layers","layout":"page"},{"title":"API endpoints","_path":"/framework/key-concepts/api-endpoints","layout":"page"},{"title":"Content types","_path":"/framework/key-concepts/content-types","layout":"page"},{"title":"Dynamic components","_path":"/framework/key-concepts/dynamic-components","layout":"page"}]},{"title":"Guides","_path":"/framework/guides","children":[{"title":"Migrating from Ripple 1.x","_path":"/framework/guides/migrating","layout":"page"},{"title":"Setting up a new site","_path":"/framework/guides/new-sites","layout":"page"},{"title":"Applying theme and brand","_path":"/framework/guides/brand-application","layout":"page"},{"title":"Creating content types","_path":"/framework/guides/creating-content-types","layout":"page"},{"title":"Creating new layers","_path":"/framework/guides/creating-new-layers","layout":"page"},{"title":"Adding a new dynamic component","_path":"/framework/guides/dynamic-components","layout":"page"}]},{"title":"Core modules","_path":"/framework/core-modules","layout":"page"}],"layout":"page"}]} \ No newline at end of file diff --git a/api/_content/navigation/VEvCElvzal.1710803607354.json b/api/_content/navigation/VEvCElvzal.1710889884934.json similarity index 100% rename from api/_content/navigation/VEvCElvzal.1710803607354.json rename to api/_content/navigation/VEvCElvzal.1710889884934.json diff --git a/api/_content/navigation/X4Kd2USCYY.1710803607354.json b/api/_content/navigation/X4Kd2USCYY.1710889884934.json similarity index 100% rename from api/_content/navigation/X4Kd2USCYY.1710803607354.json rename to api/_content/navigation/X4Kd2USCYY.1710889884934.json diff --git a/api/_content/navigation/u7BbTyuhiE.1710803607354.json b/api/_content/navigation/u7BbTyuhiE.1710889884934.json similarity index 100% rename from api/_content/navigation/u7BbTyuhiE.1710803607354.json rename to api/_content/navigation/u7BbTyuhiE.1710889884934.json diff --git a/api/_content/query/0aaoN3qg9x.1710803607354.json b/api/_content/query/0aaoN3qg9x.1710889884934.json similarity index 100% rename from api/_content/query/0aaoN3qg9x.1710803607354.json rename to api/_content/query/0aaoN3qg9x.1710889884934.json diff --git a/api/_content/query/0yFKOFomIE.1710803607354.json b/api/_content/query/0yFKOFomIE.1710889884934.json similarity index 100% rename from api/_content/query/0yFKOFomIE.1710803607354.json rename to api/_content/query/0yFKOFomIE.1710889884934.json diff --git a/api/_content/query/1h0UvPl5DJ.1710803607354.json b/api/_content/query/1h0UvPl5DJ.1710889884934.json similarity index 100% rename from api/_content/query/1h0UvPl5DJ.1710803607354.json rename to api/_content/query/1h0UvPl5DJ.1710889884934.json diff --git a/api/_content/query/1sexmTbv3K.1710803607354.json b/api/_content/query/1sexmTbv3K.1710889884934.json similarity index 100% rename from api/_content/query/1sexmTbv3K.1710803607354.json rename to api/_content/query/1sexmTbv3K.1710889884934.json diff --git a/api/_content/query/2a1w1AtxYS.1710803607354.json b/api/_content/query/2a1w1AtxYS.1710889884934.json similarity index 100% rename from api/_content/query/2a1w1AtxYS.1710803607354.json rename to api/_content/query/2a1w1AtxYS.1710889884934.json diff --git a/api/_content/query/2mCaREffKT.1710803607354.json b/api/_content/query/2mCaREffKT.1710889884934.json similarity index 100% rename from api/_content/query/2mCaREffKT.1710803607354.json rename to api/_content/query/2mCaREffKT.1710889884934.json diff --git a/api/_content/query/2nhac26oaS.1710803607354.json b/api/_content/query/2nhac26oaS.1710889884934.json similarity index 100% rename from api/_content/query/2nhac26oaS.1710803607354.json rename to api/_content/query/2nhac26oaS.1710889884934.json diff --git a/api/_content/query/37U72dvAml.1710803607354.json b/api/_content/query/37U72dvAml.1710889884934.json similarity index 100% rename from api/_content/query/37U72dvAml.1710803607354.json rename to api/_content/query/37U72dvAml.1710889884934.json diff --git a/api/_content/query/3e5KwkFD8D.1710803607354.json b/api/_content/query/3e5KwkFD8D.1710889884934.json similarity index 100% rename from api/_content/query/3e5KwkFD8D.1710803607354.json rename to api/_content/query/3e5KwkFD8D.1710889884934.json diff --git a/api/_content/query/3pJr534AHd.1710803607354.json b/api/_content/query/3pJr534AHd.1710889884934.json similarity index 100% rename from api/_content/query/3pJr534AHd.1710803607354.json rename to api/_content/query/3pJr534AHd.1710889884934.json diff --git a/api/_content/query/4AcSjmUyKz.1710803607354.json b/api/_content/query/4AcSjmUyKz.1710889884934.json similarity index 100% rename from api/_content/query/4AcSjmUyKz.1710803607354.json rename to api/_content/query/4AcSjmUyKz.1710889884934.json diff --git a/api/_content/query/4CDH2RZlOg.1710803607354.json b/api/_content/query/4CDH2RZlOg.1710889884934.json similarity index 100% rename from api/_content/query/4CDH2RZlOg.1710803607354.json rename to api/_content/query/4CDH2RZlOg.1710889884934.json diff --git a/api/_content/query/4GAecKBcgM.1710803607354.json b/api/_content/query/4GAecKBcgM.1710889884934.json similarity index 100% rename from api/_content/query/4GAecKBcgM.1710803607354.json rename to api/_content/query/4GAecKBcgM.1710889884934.json diff --git a/api/_content/query/4HXkqmVFJb.1710803607354.json b/api/_content/query/4HXkqmVFJb.1710889884934.json similarity index 100% rename from api/_content/query/4HXkqmVFJb.1710803607354.json rename to api/_content/query/4HXkqmVFJb.1710889884934.json diff --git a/api/_content/query/4N78hAZbAr.1710803607354.json b/api/_content/query/4N78hAZbAr.1710889884934.json similarity index 100% rename from api/_content/query/4N78hAZbAr.1710803607354.json rename to api/_content/query/4N78hAZbAr.1710889884934.json diff --git a/api/_content/query/4gRKa55c92.1710803607354.json b/api/_content/query/4gRKa55c92.1710889884934.json similarity index 100% rename from api/_content/query/4gRKa55c92.1710803607354.json rename to api/_content/query/4gRKa55c92.1710889884934.json diff --git a/api/_content/query/4gkyHLRvtL.1710803607354.json b/api/_content/query/4gkyHLRvtL.1710889884934.json similarity index 100% rename from api/_content/query/4gkyHLRvtL.1710803607354.json rename to api/_content/query/4gkyHLRvtL.1710889884934.json diff --git a/api/_content/query/4lybtDCVQt.1710803607354.json b/api/_content/query/4lybtDCVQt.1710889884934.json similarity index 100% rename from api/_content/query/4lybtDCVQt.1710803607354.json rename to api/_content/query/4lybtDCVQt.1710889884934.json diff --git a/api/_content/query/4nnBbKHqJy.1710803607354.json b/api/_content/query/4nnBbKHqJy.1710889884934.json similarity index 100% rename from api/_content/query/4nnBbKHqJy.1710803607354.json rename to api/_content/query/4nnBbKHqJy.1710889884934.json diff --git a/api/_content/query/4voVzfjyBs.1710803607354.json b/api/_content/query/4voVzfjyBs.1710889884934.json similarity index 100% rename from api/_content/query/4voVzfjyBs.1710803607354.json rename to api/_content/query/4voVzfjyBs.1710889884934.json diff --git a/api/_content/query/50smjdqWfq.1710803607354.json b/api/_content/query/50smjdqWfq.1710889884934.json similarity index 100% rename from api/_content/query/50smjdqWfq.1710803607354.json rename to api/_content/query/50smjdqWfq.1710889884934.json diff --git a/api/_content/query/5FAfxJoHkk.1710803607354.json b/api/_content/query/5FAfxJoHkk.1710889884934.json similarity index 100% rename from api/_content/query/5FAfxJoHkk.1710803607354.json rename to api/_content/query/5FAfxJoHkk.1710889884934.json diff --git a/api/_content/query/5U43wnL6p8.1710803607354.json b/api/_content/query/5U43wnL6p8.1710889884934.json similarity index 100% rename from api/_content/query/5U43wnL6p8.1710803607354.json rename to api/_content/query/5U43wnL6p8.1710889884934.json diff --git a/api/_content/query/5jdemGYhzs.1710803607354.json b/api/_content/query/5jdemGYhzs.1710889884934.json similarity index 100% rename from api/_content/query/5jdemGYhzs.1710803607354.json rename to api/_content/query/5jdemGYhzs.1710889884934.json diff --git a/api/_content/query/6m9vKFTHoz.1710803607354.json b/api/_content/query/6m9vKFTHoz.1710889884934.json similarity index 100% rename from api/_content/query/6m9vKFTHoz.1710803607354.json rename to api/_content/query/6m9vKFTHoz.1710889884934.json diff --git a/api/_content/query/6qsnYmf6Kg.1710803607354.json b/api/_content/query/6qsnYmf6Kg.1710889884934.json similarity index 100% rename from api/_content/query/6qsnYmf6Kg.1710803607354.json rename to api/_content/query/6qsnYmf6Kg.1710889884934.json diff --git a/api/_content/query/7YecXPJ42X.1710803607354.json b/api/_content/query/7YecXPJ42X.1710889884934.json similarity index 100% rename from api/_content/query/7YecXPJ42X.1710803607354.json rename to api/_content/query/7YecXPJ42X.1710889884934.json diff --git a/api/_content/query/7ht5DW7UkW.1710803607354.json b/api/_content/query/7ht5DW7UkW.1710889884934.json similarity index 100% rename from api/_content/query/7ht5DW7UkW.1710803607354.json rename to api/_content/query/7ht5DW7UkW.1710889884934.json diff --git a/api/_content/query/7xyfDntTEH.1710803607354.json b/api/_content/query/7xyfDntTEH.1710889884934.json similarity index 100% rename from api/_content/query/7xyfDntTEH.1710803607354.json rename to api/_content/query/7xyfDntTEH.1710889884934.json diff --git a/api/_content/query/8YsCLN3a5w.1710803607354.json b/api/_content/query/8YsCLN3a5w.1710889884934.json similarity index 100% rename from api/_content/query/8YsCLN3a5w.1710803607354.json rename to api/_content/query/8YsCLN3a5w.1710889884934.json diff --git a/api/_content/query/8bRHO8CL4a.1710803607354.json b/api/_content/query/8bRHO8CL4a.1710889884934.json similarity index 100% rename from api/_content/query/8bRHO8CL4a.1710803607354.json rename to api/_content/query/8bRHO8CL4a.1710889884934.json diff --git a/api/_content/query/9XxSCC2Gng.1710803607354.json b/api/_content/query/9XxSCC2Gng.1710889884934.json similarity index 100% rename from api/_content/query/9XxSCC2Gng.1710803607354.json rename to api/_content/query/9XxSCC2Gng.1710889884934.json diff --git a/api/_content/query/A9fXFyNTcE.1710803607354.json b/api/_content/query/A9fXFyNTcE.1710889884934.json similarity index 100% rename from api/_content/query/A9fXFyNTcE.1710803607354.json rename to api/_content/query/A9fXFyNTcE.1710889884934.json diff --git a/api/_content/query/AWcKDZuk7Q.1710803607354.json b/api/_content/query/AWcKDZuk7Q.1710889884934.json similarity index 100% rename from api/_content/query/AWcKDZuk7Q.1710803607354.json rename to api/_content/query/AWcKDZuk7Q.1710889884934.json diff --git a/api/_content/query/Atv5Eb58HG.1710803607354.json b/api/_content/query/Atv5Eb58HG.1710889884934.json similarity index 100% rename from api/_content/query/Atv5Eb58HG.1710803607354.json rename to api/_content/query/Atv5Eb58HG.1710889884934.json diff --git a/api/_content/query/Az1biL1r1R.1710803607354.json b/api/_content/query/Az1biL1r1R.1710889884934.json similarity index 100% rename from api/_content/query/Az1biL1r1R.1710803607354.json rename to api/_content/query/Az1biL1r1R.1710889884934.json diff --git a/api/_content/query/BNBjGRc556.1710803607354.json b/api/_content/query/BNBjGRc556.1710889884934.json similarity index 100% rename from api/_content/query/BNBjGRc556.1710803607354.json rename to api/_content/query/BNBjGRc556.1710889884934.json diff --git a/api/_content/query/BZQqMF8iy9.1710803607354.json b/api/_content/query/BZQqMF8iy9.1710889884934.json similarity index 100% rename from api/_content/query/BZQqMF8iy9.1710803607354.json rename to api/_content/query/BZQqMF8iy9.1710889884934.json diff --git a/api/_content/query/BlQCj02zMr.1710803607354.json b/api/_content/query/BlQCj02zMr.1710889884934.json similarity index 100% rename from api/_content/query/BlQCj02zMr.1710803607354.json rename to api/_content/query/BlQCj02zMr.1710889884934.json diff --git a/api/_content/query/CPfLz4RDEN.1710803607354.json b/api/_content/query/CPfLz4RDEN.1710889884934.json similarity index 100% rename from api/_content/query/CPfLz4RDEN.1710803607354.json rename to api/_content/query/CPfLz4RDEN.1710889884934.json diff --git a/api/_content/query/Cxn4djMCqT.1710803607354.json b/api/_content/query/Cxn4djMCqT.1710889884934.json similarity index 100% rename from api/_content/query/Cxn4djMCqT.1710803607354.json rename to api/_content/query/Cxn4djMCqT.1710889884934.json diff --git a/api/_content/query/DRQuabYniG.1710803607354.json b/api/_content/query/DRQuabYniG.1710889884934.json similarity index 100% rename from api/_content/query/DRQuabYniG.1710803607354.json rename to api/_content/query/DRQuabYniG.1710889884934.json diff --git a/api/_content/query/DrRBJ50Lyl.1710803607354.json b/api/_content/query/DrRBJ50Lyl.1710889884934.json similarity index 100% rename from api/_content/query/DrRBJ50Lyl.1710803607354.json rename to api/_content/query/DrRBJ50Lyl.1710889884934.json diff --git a/api/_content/query/E4VbfHM5TO.1710803607354.json b/api/_content/query/E4VbfHM5TO.1710889884934.json similarity index 100% rename from api/_content/query/E4VbfHM5TO.1710803607354.json rename to api/_content/query/E4VbfHM5TO.1710889884934.json diff --git a/api/_content/query/EA1Viu7YX3.1710803607354.json b/api/_content/query/EA1Viu7YX3.1710889884934.json similarity index 100% rename from api/_content/query/EA1Viu7YX3.1710803607354.json rename to api/_content/query/EA1Viu7YX3.1710889884934.json diff --git a/api/_content/query/EytvxStB0e.1710803607354.json b/api/_content/query/EytvxStB0e.1710889884934.json similarity index 100% rename from api/_content/query/EytvxStB0e.1710803607354.json rename to api/_content/query/EytvxStB0e.1710889884934.json diff --git a/api/_content/query/FL2NoTOnZH.1710803607354.json b/api/_content/query/FL2NoTOnZH.1710889884934.json similarity index 100% rename from api/_content/query/FL2NoTOnZH.1710803607354.json rename to api/_content/query/FL2NoTOnZH.1710889884934.json diff --git a/api/_content/query/FRx43BOHwZ.1710803607354.json b/api/_content/query/FRx43BOHwZ.1710889884934.json similarity index 100% rename from api/_content/query/FRx43BOHwZ.1710803607354.json rename to api/_content/query/FRx43BOHwZ.1710889884934.json diff --git a/api/_content/query/FXcU8uc5Dd.1710803607354.json b/api/_content/query/FXcU8uc5Dd.1710889884934.json similarity index 100% rename from api/_content/query/FXcU8uc5Dd.1710803607354.json rename to api/_content/query/FXcU8uc5Dd.1710889884934.json diff --git a/api/_content/query/G6inKMevJ7.1710803607354.json b/api/_content/query/G6inKMevJ7.1710889884934.json similarity index 100% rename from api/_content/query/G6inKMevJ7.1710803607354.json rename to api/_content/query/G6inKMevJ7.1710889884934.json diff --git a/api/_content/query/GJj5YfVIWk.1710803607354.json b/api/_content/query/GJj5YfVIWk.1710889884934.json similarity index 100% rename from api/_content/query/GJj5YfVIWk.1710803607354.json rename to api/_content/query/GJj5YfVIWk.1710889884934.json diff --git a/api/_content/query/GNwfSxVFIk.1710803607354.json b/api/_content/query/GNwfSxVFIk.1710889884934.json similarity index 100% rename from api/_content/query/GNwfSxVFIk.1710803607354.json rename to api/_content/query/GNwfSxVFIk.1710889884934.json diff --git a/api/_content/query/IHTNSTG2BE.1710803607354.json b/api/_content/query/IHTNSTG2BE.1710889884934.json similarity index 100% rename from api/_content/query/IHTNSTG2BE.1710803607354.json rename to api/_content/query/IHTNSTG2BE.1710889884934.json diff --git a/api/_content/query/IVSDZeduvC.1710803607354.json b/api/_content/query/IVSDZeduvC.1710889884934.json similarity index 100% rename from api/_content/query/IVSDZeduvC.1710803607354.json rename to api/_content/query/IVSDZeduvC.1710889884934.json diff --git a/api/_content/query/ImzjcGUQec.1710803607354.json b/api/_content/query/ImzjcGUQec.1710889884934.json similarity index 100% rename from api/_content/query/ImzjcGUQec.1710803607354.json rename to api/_content/query/ImzjcGUQec.1710889884934.json diff --git a/api/_content/query/Int4bWCGef.1710803607354.json b/api/_content/query/Int4bWCGef.1710889884934.json similarity index 100% rename from api/_content/query/Int4bWCGef.1710803607354.json rename to api/_content/query/Int4bWCGef.1710889884934.json diff --git a/api/_content/query/K0FMoZzx9O.1710803607354.json b/api/_content/query/K0FMoZzx9O.1710889884934.json similarity index 100% rename from api/_content/query/K0FMoZzx9O.1710803607354.json rename to api/_content/query/K0FMoZzx9O.1710889884934.json diff --git a/api/_content/query/KFY0AW5Ub0.1710803607354.json b/api/_content/query/KFY0AW5Ub0.1710889884934.json similarity index 100% rename from api/_content/query/KFY0AW5Ub0.1710803607354.json rename to api/_content/query/KFY0AW5Ub0.1710889884934.json diff --git a/api/_content/query/KrSUbbePmB.1710803607354.json b/api/_content/query/KrSUbbePmB.1710889884934.json similarity index 100% rename from api/_content/query/KrSUbbePmB.1710803607354.json rename to api/_content/query/KrSUbbePmB.1710889884934.json diff --git a/api/_content/query/L4BiBaBwSa.1710803607354.json b/api/_content/query/L4BiBaBwSa.1710889884934.json similarity index 100% rename from api/_content/query/L4BiBaBwSa.1710803607354.json rename to api/_content/query/L4BiBaBwSa.1710889884934.json diff --git a/api/_content/query/LRqNzYU79f.1710803607354.json b/api/_content/query/LRqNzYU79f.1710889884934.json similarity index 100% rename from api/_content/query/LRqNzYU79f.1710803607354.json rename to api/_content/query/LRqNzYU79f.1710889884934.json diff --git a/api/_content/query/LhnX2N5NGd.1710803607354.json b/api/_content/query/LhnX2N5NGd.1710889884934.json similarity index 100% rename from api/_content/query/LhnX2N5NGd.1710803607354.json rename to api/_content/query/LhnX2N5NGd.1710889884934.json diff --git a/api/_content/query/LmYw8BgZez.1710803607354.json b/api/_content/query/LmYw8BgZez.1710889884934.json similarity index 100% rename from api/_content/query/LmYw8BgZez.1710803607354.json rename to api/_content/query/LmYw8BgZez.1710889884934.json diff --git a/api/_content/query/LoX2CGyAED.1710803607354.json b/api/_content/query/LoX2CGyAED.1710889884934.json similarity index 100% rename from api/_content/query/LoX2CGyAED.1710803607354.json rename to api/_content/query/LoX2CGyAED.1710889884934.json diff --git a/api/_content/query/M44yiRFUUt.1710803607354.json b/api/_content/query/M44yiRFUUt.1710889884934.json similarity index 100% rename from api/_content/query/M44yiRFUUt.1710803607354.json rename to api/_content/query/M44yiRFUUt.1710889884934.json diff --git a/api/_content/query/MRFkBuP81T.1710803607354.json b/api/_content/query/MRFkBuP81T.1710889884934.json similarity index 100% rename from api/_content/query/MRFkBuP81T.1710803607354.json rename to api/_content/query/MRFkBuP81T.1710889884934.json diff --git a/api/_content/query/MdKSCPenip.1710803607354.json b/api/_content/query/MdKSCPenip.1710889884934.json similarity index 100% rename from api/_content/query/MdKSCPenip.1710803607354.json rename to api/_content/query/MdKSCPenip.1710889884934.json diff --git a/api/_content/query/Mk9AxDcquK.1710803607354.json b/api/_content/query/Mk9AxDcquK.1710889884934.json similarity index 100% rename from api/_content/query/Mk9AxDcquK.1710803607354.json rename to api/_content/query/Mk9AxDcquK.1710889884934.json diff --git a/api/_content/query/MulTBoHiIX.1710803607354.json b/api/_content/query/MulTBoHiIX.1710889884934.json similarity index 100% rename from api/_content/query/MulTBoHiIX.1710803607354.json rename to api/_content/query/MulTBoHiIX.1710889884934.json diff --git a/api/_content/query/MyfyBodaI9.1710803607354.json b/api/_content/query/MyfyBodaI9.1710889884934.json similarity index 100% rename from api/_content/query/MyfyBodaI9.1710803607354.json rename to api/_content/query/MyfyBodaI9.1710889884934.json diff --git a/api/_content/query/O88noog5Ku.1710803607354.json b/api/_content/query/O88noog5Ku.1710889884934.json similarity index 100% rename from api/_content/query/O88noog5Ku.1710803607354.json rename to api/_content/query/O88noog5Ku.1710889884934.json diff --git a/api/_content/query/P93e3h20vo.1710803607354.json b/api/_content/query/P93e3h20vo.1710889884934.json similarity index 100% rename from api/_content/query/P93e3h20vo.1710803607354.json rename to api/_content/query/P93e3h20vo.1710889884934.json diff --git a/api/_content/query/PDyWpwM8OX.1710803607354.json b/api/_content/query/PDyWpwM8OX.1710889884934.json similarity index 100% rename from api/_content/query/PDyWpwM8OX.1710803607354.json rename to api/_content/query/PDyWpwM8OX.1710889884934.json diff --git a/api/_content/query/PJBEZoM2Co.1710803607354.json b/api/_content/query/PJBEZoM2Co.1710889884934.json similarity index 100% rename from api/_content/query/PJBEZoM2Co.1710803607354.json rename to api/_content/query/PJBEZoM2Co.1710889884934.json diff --git a/api/_content/query/QkADENtF1a.1710803607354.json b/api/_content/query/QkADENtF1a.1710889884934.json similarity index 100% rename from api/_content/query/QkADENtF1a.1710803607354.json rename to api/_content/query/QkADENtF1a.1710889884934.json diff --git a/api/_content/query/SF9m31U3TG.1710803607354.json b/api/_content/query/SF9m31U3TG.1710889884934.json similarity index 100% rename from api/_content/query/SF9m31U3TG.1710803607354.json rename to api/_content/query/SF9m31U3TG.1710889884934.json diff --git a/api/_content/query/SJLhvQED7V.1710803607354.json b/api/_content/query/SJLhvQED7V.1710889884934.json similarity index 100% rename from api/_content/query/SJLhvQED7V.1710803607354.json rename to api/_content/query/SJLhvQED7V.1710889884934.json diff --git a/api/_content/query/SM7WENOXwn.1710803607354.json b/api/_content/query/SM7WENOXwn.1710889884934.json similarity index 100% rename from api/_content/query/SM7WENOXwn.1710803607354.json rename to api/_content/query/SM7WENOXwn.1710889884934.json diff --git a/api/_content/query/TIFRZ2W30y.1710803607354.json b/api/_content/query/TIFRZ2W30y.1710889884934.json similarity index 100% rename from api/_content/query/TIFRZ2W30y.1710803607354.json rename to api/_content/query/TIFRZ2W30y.1710889884934.json diff --git a/api/_content/query/TlwNM8EnUb.1710803607354.json b/api/_content/query/TlwNM8EnUb.1710889884934.json similarity index 100% rename from api/_content/query/TlwNM8EnUb.1710803607354.json rename to api/_content/query/TlwNM8EnUb.1710889884934.json diff --git a/api/_content/query/Tr8c01AB9c.1710803607354.json b/api/_content/query/Tr8c01AB9c.1710889884934.json similarity index 100% rename from api/_content/query/Tr8c01AB9c.1710803607354.json rename to api/_content/query/Tr8c01AB9c.1710889884934.json diff --git a/api/_content/query/UqYcuzGZzU.1710803607354.json b/api/_content/query/UqYcuzGZzU.1710889884934.json similarity index 100% rename from api/_content/query/UqYcuzGZzU.1710803607354.json rename to api/_content/query/UqYcuzGZzU.1710889884934.json diff --git a/api/_content/query/UrnjC2F9dw.1710803607354.json b/api/_content/query/UrnjC2F9dw.1710889884934.json similarity index 100% rename from api/_content/query/UrnjC2F9dw.1710803607354.json rename to api/_content/query/UrnjC2F9dw.1710889884934.json diff --git a/api/_content/query/VYBIyuFjts.1710803607354.json b/api/_content/query/VYBIyuFjts.1710889884934.json similarity index 100% rename from api/_content/query/VYBIyuFjts.1710803607354.json rename to api/_content/query/VYBIyuFjts.1710889884934.json diff --git a/api/_content/query/VbChyF8OyE.1710803607354.json b/api/_content/query/VbChyF8OyE.1710889884934.json similarity index 100% rename from api/_content/query/VbChyF8OyE.1710803607354.json rename to api/_content/query/VbChyF8OyE.1710889884934.json diff --git a/api/_content/query/VgHMTDZLK4.1710803607354.json b/api/_content/query/VgHMTDZLK4.1710889884934.json similarity index 100% rename from api/_content/query/VgHMTDZLK4.1710803607354.json rename to api/_content/query/VgHMTDZLK4.1710889884934.json diff --git a/api/_content/query/WTS5sIVY6D.1710803607354.json b/api/_content/query/WTS5sIVY6D.1710889884934.json similarity index 100% rename from api/_content/query/WTS5sIVY6D.1710803607354.json rename to api/_content/query/WTS5sIVY6D.1710889884934.json diff --git a/api/_content/query/X0kuUttahW.1710803607354.json b/api/_content/query/X0kuUttahW.1710889884934.json similarity index 100% rename from api/_content/query/X0kuUttahW.1710803607354.json rename to api/_content/query/X0kuUttahW.1710889884934.json diff --git a/api/_content/query/X4VxdTjbhP.1710803607354.json b/api/_content/query/X4VxdTjbhP.1710889884934.json similarity index 100% rename from api/_content/query/X4VxdTjbhP.1710803607354.json rename to api/_content/query/X4VxdTjbhP.1710889884934.json diff --git a/api/_content/query/XAPzcVjat3.1710803607354.json b/api/_content/query/XAPzcVjat3.1710889884934.json similarity index 100% rename from api/_content/query/XAPzcVjat3.1710803607354.json rename to api/_content/query/XAPzcVjat3.1710889884934.json diff --git a/api/_content/query/XFjJyWynAe.1710803607354.json b/api/_content/query/XFjJyWynAe.1710889884934.json similarity index 100% rename from api/_content/query/XFjJyWynAe.1710803607354.json rename to api/_content/query/XFjJyWynAe.1710889884934.json diff --git a/api/_content/query/XZp1K2Gry5.1710803607354.json b/api/_content/query/XZp1K2Gry5.1710889884934.json similarity index 100% rename from api/_content/query/XZp1K2Gry5.1710803607354.json rename to api/_content/query/XZp1K2Gry5.1710889884934.json diff --git a/api/_content/query/Xh1IsErcFG.1710803607354.json b/api/_content/query/Xh1IsErcFG.1710889884934.json similarity index 100% rename from api/_content/query/Xh1IsErcFG.1710803607354.json rename to api/_content/query/Xh1IsErcFG.1710889884934.json diff --git a/api/_content/query/XjS2U5Izhg.1710803607354.json b/api/_content/query/XjS2U5Izhg.1710889884934.json similarity index 100% rename from api/_content/query/XjS2U5Izhg.1710803607354.json rename to api/_content/query/XjS2U5Izhg.1710889884934.json diff --git a/api/_content/query/Xl71L7ieAm.1710803607354.json b/api/_content/query/Xl71L7ieAm.1710889884934.json similarity index 100% rename from api/_content/query/Xl71L7ieAm.1710803607354.json rename to api/_content/query/Xl71L7ieAm.1710889884934.json diff --git a/api/_content/query/XmTesIf7f9.1710803607354.json b/api/_content/query/XmTesIf7f9.1710889884934.json similarity index 100% rename from api/_content/query/XmTesIf7f9.1710803607354.json rename to api/_content/query/XmTesIf7f9.1710889884934.json diff --git a/api/_content/query/YA6fkmNWlw.1710803607354.json b/api/_content/query/YA6fkmNWlw.1710889884934.json similarity index 100% rename from api/_content/query/YA6fkmNWlw.1710803607354.json rename to api/_content/query/YA6fkmNWlw.1710889884934.json diff --git a/api/_content/query/YCO3BsA2AE.1710803607354.json b/api/_content/query/YCO3BsA2AE.1710889884934.json similarity index 100% rename from api/_content/query/YCO3BsA2AE.1710803607354.json rename to api/_content/query/YCO3BsA2AE.1710889884934.json diff --git a/api/_content/query/YoUlkYQh6c.1710803607354.json b/api/_content/query/YoUlkYQh6c.1710889884934.json similarity index 100% rename from api/_content/query/YoUlkYQh6c.1710803607354.json rename to api/_content/query/YoUlkYQh6c.1710889884934.json diff --git a/api/_content/query/Z5EE1O4UbG.1710803607354.json b/api/_content/query/Z5EE1O4UbG.1710889884934.json similarity index 100% rename from api/_content/query/Z5EE1O4UbG.1710803607354.json rename to api/_content/query/Z5EE1O4UbG.1710889884934.json diff --git a/api/_content/query/Z70rHCO4fI.1710803607354.json b/api/_content/query/Z70rHCO4fI.1710889884934.json similarity index 100% rename from api/_content/query/Z70rHCO4fI.1710803607354.json rename to api/_content/query/Z70rHCO4fI.1710889884934.json diff --git a/api/_content/query/ZWAUGjhMhU.1710803607354.json b/api/_content/query/ZWAUGjhMhU.1710889884934.json similarity index 100% rename from api/_content/query/ZWAUGjhMhU.1710803607354.json rename to api/_content/query/ZWAUGjhMhU.1710889884934.json diff --git a/api/_content/query/acark7P3nX.1710803607354.json b/api/_content/query/acark7P3nX.1710889884934.json similarity index 100% rename from api/_content/query/acark7P3nX.1710803607354.json rename to api/_content/query/acark7P3nX.1710889884934.json diff --git a/api/_content/query/apkiOdtfcp.1710803607354.json b/api/_content/query/apkiOdtfcp.1710889884934.json similarity index 100% rename from api/_content/query/apkiOdtfcp.1710803607354.json rename to api/_content/query/apkiOdtfcp.1710889884934.json diff --git a/api/_content/query/bEnwKjFwnq.1710803607354.json b/api/_content/query/bEnwKjFwnq.1710889884934.json similarity index 100% rename from api/_content/query/bEnwKjFwnq.1710803607354.json rename to api/_content/query/bEnwKjFwnq.1710889884934.json diff --git a/api/_content/query/bF3gJlnVu7.1710803607354.json b/api/_content/query/bF3gJlnVu7.1710889884934.json similarity index 100% rename from api/_content/query/bF3gJlnVu7.1710803607354.json rename to api/_content/query/bF3gJlnVu7.1710889884934.json diff --git a/api/_content/query/bnDywirsxl.1710803607354.json b/api/_content/query/bnDywirsxl.1710889884934.json similarity index 100% rename from api/_content/query/bnDywirsxl.1710803607354.json rename to api/_content/query/bnDywirsxl.1710889884934.json diff --git a/api/_content/query/brX4CwCJoQ.1710803607354.json b/api/_content/query/brX4CwCJoQ.1710889884934.json similarity index 100% rename from api/_content/query/brX4CwCJoQ.1710803607354.json rename to api/_content/query/brX4CwCJoQ.1710889884934.json diff --git a/api/_content/query/bzCp7cuiep.1710803607354.json b/api/_content/query/bzCp7cuiep.1710889884934.json similarity index 100% rename from api/_content/query/bzCp7cuiep.1710803607354.json rename to api/_content/query/bzCp7cuiep.1710889884934.json diff --git a/api/_content/query/c71XK0jI69.1710803607354.json b/api/_content/query/c71XK0jI69.1710889884934.json similarity index 100% rename from api/_content/query/c71XK0jI69.1710803607354.json rename to api/_content/query/c71XK0jI69.1710889884934.json diff --git a/api/_content/query/cExGEtkzuk.1710803607354.json b/api/_content/query/cExGEtkzuk.1710889884934.json similarity index 100% rename from api/_content/query/cExGEtkzuk.1710803607354.json rename to api/_content/query/cExGEtkzuk.1710889884934.json diff --git a/api/_content/query/caOGo3s222.1710803607354.json b/api/_content/query/caOGo3s222.1710889884934.json similarity index 100% rename from api/_content/query/caOGo3s222.1710803607354.json rename to api/_content/query/caOGo3s222.1710889884934.json diff --git a/api/_content/query/ciwJA2cWZR.1710803607354.json b/api/_content/query/ciwJA2cWZR.1710889884934.json similarity index 100% rename from api/_content/query/ciwJA2cWZR.1710803607354.json rename to api/_content/query/ciwJA2cWZR.1710889884934.json diff --git a/api/_content/query/clipwUGxow.1710803607354.json b/api/_content/query/clipwUGxow.1710889884934.json similarity index 100% rename from api/_content/query/clipwUGxow.1710803607354.json rename to api/_content/query/clipwUGxow.1710889884934.json diff --git a/api/_content/query/cuM7MVrMUw.1710803607354.json b/api/_content/query/cuM7MVrMUw.1710889884934.json similarity index 100% rename from api/_content/query/cuM7MVrMUw.1710803607354.json rename to api/_content/query/cuM7MVrMUw.1710889884934.json diff --git a/api/_content/query/dIqZm2MbqA.1710803607354.json b/api/_content/query/dIqZm2MbqA.1710889884934.json similarity index 100% rename from api/_content/query/dIqZm2MbqA.1710803607354.json rename to api/_content/query/dIqZm2MbqA.1710889884934.json diff --git a/api/_content/query/dKdR0W5tzU.1710803607354.json b/api/_content/query/dKdR0W5tzU.1710889884934.json similarity index 100% rename from api/_content/query/dKdR0W5tzU.1710803607354.json rename to api/_content/query/dKdR0W5tzU.1710889884934.json diff --git a/api/_content/query/eOtXz0jpwF.1710803607354.json b/api/_content/query/eOtXz0jpwF.1710889884934.json similarity index 100% rename from api/_content/query/eOtXz0jpwF.1710803607354.json rename to api/_content/query/eOtXz0jpwF.1710889884934.json diff --git a/api/_content/query/etly8IUHtt.1710803607354.json b/api/_content/query/etly8IUHtt.1710889884934.json similarity index 100% rename from api/_content/query/etly8IUHtt.1710803607354.json rename to api/_content/query/etly8IUHtt.1710889884934.json diff --git a/api/_content/query/eygiU6u8aQ.1710803607354.json b/api/_content/query/eygiU6u8aQ.1710889884934.json similarity index 100% rename from api/_content/query/eygiU6u8aQ.1710803607354.json rename to api/_content/query/eygiU6u8aQ.1710889884934.json diff --git a/api/_content/query/fRk0JHtrBq.1710803607354.json b/api/_content/query/fRk0JHtrBq.1710889884934.json similarity index 100% rename from api/_content/query/fRk0JHtrBq.1710803607354.json rename to api/_content/query/fRk0JHtrBq.1710889884934.json diff --git a/api/_content/query/fyKzonlTVE.1710803607354.json b/api/_content/query/fyKzonlTVE.1710889884934.json similarity index 100% rename from api/_content/query/fyKzonlTVE.1710803607354.json rename to api/_content/query/fyKzonlTVE.1710889884934.json diff --git a/api/_content/query/g90uDrGc6h.1710803607354.json b/api/_content/query/g90uDrGc6h.1710889884934.json similarity index 100% rename from api/_content/query/g90uDrGc6h.1710803607354.json rename to api/_content/query/g90uDrGc6h.1710889884934.json diff --git a/api/_content/query/gH1XZ96zGS.1710803607354.json b/api/_content/query/gH1XZ96zGS.1710889884934.json similarity index 100% rename from api/_content/query/gH1XZ96zGS.1710803607354.json rename to api/_content/query/gH1XZ96zGS.1710889884934.json diff --git a/api/_content/query/grXljdbkxM.1710803607354.json b/api/_content/query/grXljdbkxM.1710889884934.json similarity index 100% rename from api/_content/query/grXljdbkxM.1710803607354.json rename to api/_content/query/grXljdbkxM.1710889884934.json diff --git a/api/_content/query/gvk7ITPeIG.1710803607354.json b/api/_content/query/gvk7ITPeIG.1710889884934.json similarity index 100% rename from api/_content/query/gvk7ITPeIG.1710803607354.json rename to api/_content/query/gvk7ITPeIG.1710889884934.json diff --git a/api/_content/query/hP08bRT8o2.1710803607354.json b/api/_content/query/hP08bRT8o2.1710889884934.json similarity index 100% rename from api/_content/query/hP08bRT8o2.1710803607354.json rename to api/_content/query/hP08bRT8o2.1710889884934.json diff --git a/api/_content/query/hckiE95FTb.1710803607354.json b/api/_content/query/hckiE95FTb.1710889884934.json similarity index 100% rename from api/_content/query/hckiE95FTb.1710803607354.json rename to api/_content/query/hckiE95FTb.1710889884934.json diff --git a/api/_content/query/j64GcQcJKA.1710803607354.json b/api/_content/query/j64GcQcJKA.1710889884934.json similarity index 100% rename from api/_content/query/j64GcQcJKA.1710803607354.json rename to api/_content/query/j64GcQcJKA.1710889884934.json diff --git a/api/_content/query/j6VGlwh2g9.1710803607354.json b/api/_content/query/j6VGlwh2g9.1710889884934.json similarity index 100% rename from api/_content/query/j6VGlwh2g9.1710803607354.json rename to api/_content/query/j6VGlwh2g9.1710889884934.json diff --git a/api/_content/query/jgRpWN3BQE.1710803607354.json b/api/_content/query/jgRpWN3BQE.1710889884934.json similarity index 100% rename from api/_content/query/jgRpWN3BQE.1710803607354.json rename to api/_content/query/jgRpWN3BQE.1710889884934.json diff --git a/api/_content/query/k0LdsxuVgM.1710803607354.json b/api/_content/query/k0LdsxuVgM.1710889884934.json similarity index 100% rename from api/_content/query/k0LdsxuVgM.1710803607354.json rename to api/_content/query/k0LdsxuVgM.1710889884934.json diff --git a/api/_content/query/kO7epVwzlv.1710803607354.json b/api/_content/query/kO7epVwzlv.1710889884934.json similarity index 100% rename from api/_content/query/kO7epVwzlv.1710803607354.json rename to api/_content/query/kO7epVwzlv.1710889884934.json diff --git a/api/_content/query/kXlcvutl1N.1710803607354.json b/api/_content/query/kXlcvutl1N.1710889884934.json similarity index 100% rename from api/_content/query/kXlcvutl1N.1710803607354.json rename to api/_content/query/kXlcvutl1N.1710889884934.json diff --git a/api/_content/query/kh2DZ78o4K.1710803607354.json b/api/_content/query/kh2DZ78o4K.1710889884934.json similarity index 100% rename from api/_content/query/kh2DZ78o4K.1710803607354.json rename to api/_content/query/kh2DZ78o4K.1710889884934.json diff --git a/api/_content/query/mKPt9msOAD.1710803607354.json b/api/_content/query/mKPt9msOAD.1710889884934.json similarity index 100% rename from api/_content/query/mKPt9msOAD.1710803607354.json rename to api/_content/query/mKPt9msOAD.1710889884934.json diff --git a/api/_content/query/mPus9cC6oE.1710803607354.json b/api/_content/query/mPus9cC6oE.1710889884934.json similarity index 100% rename from api/_content/query/mPus9cC6oE.1710803607354.json rename to api/_content/query/mPus9cC6oE.1710889884934.json diff --git a/api/_content/query/mrPIJZRQWV.1710803607354.json b/api/_content/query/mrPIJZRQWV.1710889884934.json similarity index 100% rename from api/_content/query/mrPIJZRQWV.1710803607354.json rename to api/_content/query/mrPIJZRQWV.1710889884934.json diff --git a/api/_content/query/ok04mhOgoW.1710803607354.json b/api/_content/query/ok04mhOgoW.1710889884934.json similarity index 100% rename from api/_content/query/ok04mhOgoW.1710803607354.json rename to api/_content/query/ok04mhOgoW.1710889884934.json diff --git a/api/_content/query/pQRGRVXgWa.1710803607354.json b/api/_content/query/pQRGRVXgWa.1710889884934.json similarity index 100% rename from api/_content/query/pQRGRVXgWa.1710803607354.json rename to api/_content/query/pQRGRVXgWa.1710889884934.json diff --git a/api/_content/query/pawOjRstIF.1710803607354.json b/api/_content/query/pawOjRstIF.1710889884934.json similarity index 100% rename from api/_content/query/pawOjRstIF.1710803607354.json rename to api/_content/query/pawOjRstIF.1710889884934.json diff --git a/api/_content/query/popbnfes2V.1710803607354.json b/api/_content/query/popbnfes2V.1710889884934.json similarity index 100% rename from api/_content/query/popbnfes2V.1710803607354.json rename to api/_content/query/popbnfes2V.1710889884934.json diff --git a/api/_content/query/q8OIs3OPBw.1710803607354.json b/api/_content/query/q8OIs3OPBw.1710889884934.json similarity index 100% rename from api/_content/query/q8OIs3OPBw.1710803607354.json rename to api/_content/query/q8OIs3OPBw.1710889884934.json diff --git a/api/_content/query/qhKQKXD4Dg.1710803607354.json b/api/_content/query/qhKQKXD4Dg.1710889884934.json similarity index 100% rename from api/_content/query/qhKQKXD4Dg.1710803607354.json rename to api/_content/query/qhKQKXD4Dg.1710889884934.json diff --git a/api/_content/query/qsQbddAhkh.1710803607354.json b/api/_content/query/qsQbddAhkh.1710889884934.json similarity index 100% rename from api/_content/query/qsQbddAhkh.1710803607354.json rename to api/_content/query/qsQbddAhkh.1710889884934.json diff --git a/api/_content/query/rjiu3BoM41.1710803607354.json b/api/_content/query/rjiu3BoM41.1710889884934.json similarity index 100% rename from api/_content/query/rjiu3BoM41.1710803607354.json rename to api/_content/query/rjiu3BoM41.1710889884934.json diff --git a/api/_content/query/rvljicMwDZ.1710803607354.json b/api/_content/query/rvljicMwDZ.1710889884934.json similarity index 100% rename from api/_content/query/rvljicMwDZ.1710803607354.json rename to api/_content/query/rvljicMwDZ.1710889884934.json diff --git a/api/_content/query/s6NQtLySML.1710803607354.json b/api/_content/query/s6NQtLySML.1710889884934.json similarity index 100% rename from api/_content/query/s6NQtLySML.1710803607354.json rename to api/_content/query/s6NQtLySML.1710889884934.json diff --git a/api/_content/query/s9WFFuhhYd.1710803607354.json b/api/_content/query/s9WFFuhhYd.1710889884934.json similarity index 100% rename from api/_content/query/s9WFFuhhYd.1710803607354.json rename to api/_content/query/s9WFFuhhYd.1710889884934.json diff --git a/api/_content/query/sFf87k6nba.1710803607354.json b/api/_content/query/sFf87k6nba.1710889884934.json similarity index 100% rename from api/_content/query/sFf87k6nba.1710803607354.json rename to api/_content/query/sFf87k6nba.1710889884934.json diff --git a/api/_content/query/sdAri5fXY2.1710803607354.json b/api/_content/query/sdAri5fXY2.1710889884934.json similarity index 100% rename from api/_content/query/sdAri5fXY2.1710803607354.json rename to api/_content/query/sdAri5fXY2.1710889884934.json diff --git a/api/_content/query/ssqfMqELbL.1710803607354.json b/api/_content/query/ssqfMqELbL.1710889884934.json similarity index 100% rename from api/_content/query/ssqfMqELbL.1710803607354.json rename to api/_content/query/ssqfMqELbL.1710889884934.json diff --git a/api/_content/query/t0PepQyppe.1710803607354.json b/api/_content/query/t0PepQyppe.1710889884934.json similarity index 100% rename from api/_content/query/t0PepQyppe.1710803607354.json rename to api/_content/query/t0PepQyppe.1710889884934.json diff --git a/api/_content/query/t2lXFVWGtk.1710803607354.json b/api/_content/query/t2lXFVWGtk.1710889884934.json similarity index 100% rename from api/_content/query/t2lXFVWGtk.1710803607354.json rename to api/_content/query/t2lXFVWGtk.1710889884934.json diff --git a/api/_content/query/tC2YUplCsO.1710803607354.json b/api/_content/query/tC2YUplCsO.1710889884934.json similarity index 100% rename from api/_content/query/tC2YUplCsO.1710803607354.json rename to api/_content/query/tC2YUplCsO.1710889884934.json diff --git a/api/_content/query/tJ9ZGrn4yB.1710803607354.json b/api/_content/query/tJ9ZGrn4yB.1710889884934.json similarity index 100% rename from api/_content/query/tJ9ZGrn4yB.1710803607354.json rename to api/_content/query/tJ9ZGrn4yB.1710889884934.json diff --git a/api/_content/query/tTSjBFoWHS.1710803607354.json b/api/_content/query/tTSjBFoWHS.1710889884934.json similarity index 100% rename from api/_content/query/tTSjBFoWHS.1710803607354.json rename to api/_content/query/tTSjBFoWHS.1710889884934.json diff --git a/api/_content/query/tXkIYFpTjb.1710803607354.json b/api/_content/query/tXkIYFpTjb.1710889884934.json similarity index 100% rename from api/_content/query/tXkIYFpTjb.1710803607354.json rename to api/_content/query/tXkIYFpTjb.1710889884934.json diff --git a/api/_content/query/tdIi0E0ZcT.1710803607354.json b/api/_content/query/tdIi0E0ZcT.1710889884934.json similarity index 100% rename from api/_content/query/tdIi0E0ZcT.1710803607354.json rename to api/_content/query/tdIi0E0ZcT.1710889884934.json diff --git a/api/_content/query/tpTHQGg3jH.1710803607354.json b/api/_content/query/tpTHQGg3jH.1710889884934.json similarity index 100% rename from api/_content/query/tpTHQGg3jH.1710803607354.json rename to api/_content/query/tpTHQGg3jH.1710889884934.json diff --git a/api/_content/query/u5WCIRmncC.1710803607354.json b/api/_content/query/u5WCIRmncC.1710889884934.json similarity index 100% rename from api/_content/query/u5WCIRmncC.1710803607354.json rename to api/_content/query/u5WCIRmncC.1710889884934.json diff --git a/api/_content/query/ufL8jzkw3H.1710803607354.json b/api/_content/query/ufL8jzkw3H.1710889884934.json similarity index 100% rename from api/_content/query/ufL8jzkw3H.1710803607354.json rename to api/_content/query/ufL8jzkw3H.1710889884934.json diff --git a/api/_content/query/uiREdQR1My.1710803607354.json b/api/_content/query/uiREdQR1My.1710889884934.json similarity index 100% rename from api/_content/query/uiREdQR1My.1710803607354.json rename to api/_content/query/uiREdQR1My.1710889884934.json diff --git a/api/_content/query/utM4Ruw0ol.1710803607354.json b/api/_content/query/utM4Ruw0ol.1710889884934.json similarity index 100% rename from api/_content/query/utM4Ruw0ol.1710803607354.json rename to api/_content/query/utM4Ruw0ol.1710889884934.json diff --git a/api/_content/query/v6HPfz8OL9.1710803607354.json b/api/_content/query/v6HPfz8OL9.1710889884934.json similarity index 100% rename from api/_content/query/v6HPfz8OL9.1710803607354.json rename to api/_content/query/v6HPfz8OL9.1710889884934.json diff --git a/api/_content/query/vJwSfNopNI.1710803607354.json b/api/_content/query/vJwSfNopNI.1710889884934.json similarity index 100% rename from api/_content/query/vJwSfNopNI.1710803607354.json rename to api/_content/query/vJwSfNopNI.1710889884934.json diff --git a/api/_content/query/vdsDSrkXFQ.1710803607354.json b/api/_content/query/vdsDSrkXFQ.1710889884934.json similarity index 100% rename from api/_content/query/vdsDSrkXFQ.1710803607354.json rename to api/_content/query/vdsDSrkXFQ.1710889884934.json diff --git a/api/_content/query/vj66SN51A0.1710803607354.json b/api/_content/query/vj66SN51A0.1710889884934.json similarity index 100% rename from api/_content/query/vj66SN51A0.1710803607354.json rename to api/_content/query/vj66SN51A0.1710889884934.json diff --git a/api/_content/query/w37itSs4uJ.1710803607354.json b/api/_content/query/w37itSs4uJ.1710889884934.json similarity index 100% rename from api/_content/query/w37itSs4uJ.1710803607354.json rename to api/_content/query/w37itSs4uJ.1710889884934.json diff --git a/api/_content/query/wEB9wuD1Rn.1710803607354.json b/api/_content/query/wEB9wuD1Rn.1710889884934.json similarity index 100% rename from api/_content/query/wEB9wuD1Rn.1710803607354.json rename to api/_content/query/wEB9wuD1Rn.1710889884934.json diff --git a/api/_content/query/wH3ANibFW3.1710803607354.json b/api/_content/query/wH3ANibFW3.1710889884934.json similarity index 100% rename from api/_content/query/wH3ANibFW3.1710803607354.json rename to api/_content/query/wH3ANibFW3.1710889884934.json diff --git a/api/_content/query/xCcU5Gnepq.1710803607354.json b/api/_content/query/xCcU5Gnepq.1710889884934.json similarity index 100% rename from api/_content/query/xCcU5Gnepq.1710803607354.json rename to api/_content/query/xCcU5Gnepq.1710889884934.json diff --git a/api/_content/query/xKaOOlWHDJ.1710803607354.json b/api/_content/query/xKaOOlWHDJ.1710889884934.json similarity index 100% rename from api/_content/query/xKaOOlWHDJ.1710803607354.json rename to api/_content/query/xKaOOlWHDJ.1710889884934.json diff --git a/api/_content/query/xSzuF1nnCj.1710803607354.json b/api/_content/query/xSzuF1nnCj.1710889884934.json similarity index 100% rename from api/_content/query/xSzuF1nnCj.1710803607354.json rename to api/_content/query/xSzuF1nnCj.1710889884934.json diff --git a/api/_content/query/xWeY3NfYtX.1710803607354.json b/api/_content/query/xWeY3NfYtX.1710889884934.json similarity index 100% rename from api/_content/query/xWeY3NfYtX.1710803607354.json rename to api/_content/query/xWeY3NfYtX.1710889884934.json diff --git a/api/_content/query/xqajda0wk4.1710803607354.json b/api/_content/query/xqajda0wk4.1710889884934.json similarity index 100% rename from api/_content/query/xqajda0wk4.1710803607354.json rename to api/_content/query/xqajda0wk4.1710889884934.json diff --git a/api/_content/query/yCq8hfNCRB.1710803607354.json b/api/_content/query/yCq8hfNCRB.1710889884934.json similarity index 100% rename from api/_content/query/yCq8hfNCRB.1710803607354.json rename to api/_content/query/yCq8hfNCRB.1710889884934.json diff --git a/api/_content/query/zVyWsmAcuf.1710803607354.json b/api/_content/query/zVyWsmAcuf.1710889884934.json similarity index 100% rename from api/_content/query/zVyWsmAcuf.1710803607354.json rename to api/_content/query/zVyWsmAcuf.1710889884934.json diff --git a/design-system/about/contributing/index.html b/design-system/about/contributing/index.html index 931906cfd0..b68c49c173 100644 --- a/design-system/about/contributing/index.html +++ b/design-system/about/contributing/index.html @@ -25,7 +25,7 @@ rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contributing</h1><p class="rpl-type-p-large" data-v-3163c6df>Found an issue?</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->The <a href="https://www.vic.gov.au/ripple-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Ripple design system<!--]--><!--]--><!----><!--]--></a> and <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple framework<!--]--><!--]--><!----><!--]--></a> are open source and released under an Apache 2.0 License.<!--]--></p><p><!--[-->Ripple is maintained by the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> team at the Victorian Department of Government Services. -If you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below.<!--]--></p><p><!--[-->To propose a change, you will need to have a free GitHub account. Please see the <a href="https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub docs<!--]--><!--]--><!----><!--]--></a> to create one if you haven't already.<!--]--></p><h2 id="submit-a-bug-report"><a href="#submit-a-bug-report"><!--[-->Submit a bug report<!--]--></a></h2><p><!--[-->If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:<!--]--></p><ul><!--[--><li><!--[-->Check existing the <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->discussions<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->issues<!--]--><!--]--><!----><!--]--></a> to see if the issue has already been discussed.<!--]--></li><li><!--[-->Fill out the <a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->bug report issue template<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 id="documentation-changes"><a href="#documentation-changes"><!--[-->Documentation changes<!--]--></a></h2><p><!--[-->Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change.<!--]--></p><h3 id="to-create-an-issue"><a href="#to-create-an-issue"><!--[-->To create an issue:<!--]--></a></h3><p><!--[-->To log a docs site issue please do the following<!--]--></p><ul><!--[--><li><!--[-->Log in to GitHub<!--]--></li><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Log an issue on the GitHub Repository<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->Fill in the form, providing as much detail as possible<!--]--></li><!--]--></ul><h3 id="to-propose-an-edit-directly"><a href="#to-propose-an-edit-directly"><!--[-->To propose an edit directly<!--]--></a></h3><p><!--[-->See the <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub docs<!--]--><!--]--><!----><!--]--></a> for more information about creating a pull request.<!--]--></p><ul><!--[--><li><!--[-->Log in to GitHub<!--]--></li><li><!--[-->Click the "Propose a change to this page on GitHub" link at the bottom of each content page<!--]--></li><li><!--[-->Make a change to the markdown in the editor. See <a href="https://www.markdownguide.org/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.markdownguide.org/<!--]--><!--]--><!----><!--]--></a> for information on syntax<!--]--></li><li><!--[-->Describe the change in the commit message<!--]--></li><li><!--[-->Create a new pull request from the "forked" version of the repository<!--]--></li><li><!--[-->This pull request will be reviewed by the SDP development team and we may ask for changes or revisions.<!--]--></li><li><!--[-->If the Pull Request is approved it will be merged and included in the next Ripple release.<!--]--></li><!--]--></ul><h2 id="propose-a-new-feature"><a href="#propose-a-new-feature"><!--[-->Propose a new feature<!--]--></a></h2><p><!--[-->If you have a proposal for a new feature to the Ripple design system please see <a href="https://www.vic.gov.au/ripple-design-system#enquiries-and-support" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/ripple-design-system#enquiries-and-support<!--]--><!--]--><!----><!--]--></a><!--]--></p><p><!--[-->For development partners wishing to propose a new feature to Ripple Framework please do the following:<!--]--></p><ul><!--[--><li><!--[-->Check existing the <a href="https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->discussions<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->issues<!--]--><!--]--><!----><!--]--></a> to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal.<!--]--></li><li><!--[-->If you are confident that the feature is something worth progressing, please fill out the <a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->New feature proposal<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/4.contributing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/contributing/_payload.json">[{"state":1,"_errors":612,"serverRendered":614,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":301,"$sdd-globals":316,"$sdd-navigation":317},{"/design-system/about/contributing":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":296,"_id":297,"_source":298,"_file":299,"_extension":300},"/design-system/about/contributing","about",false,"","Contributing","Found an issue?","page",{"type":13,"children":14,"toc":286},"root",[15,42,56,70,77,82,121,127,132,139,144,167,173,186,231,237,248,253],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20,23,32,34,40],{"type":21,"value":22},"text","The ",{"type":16,"tag":24,"props":25,"children":29},"a",{"href":26,"rel":27},"https://www.vic.gov.au/ripple-design-system",[28],"nofollow",[30],{"type":21,"value":31},"Ripple design system",{"type":21,"value":33}," and ",{"type":16,"tag":24,"props":35,"children":37},{"href":36},"/framework",[38],{"type":21,"value":39},"Ripple framework",{"type":21,"value":41}," are open source and released under an Apache 2.0 License.",{"type":16,"tag":17,"props":43,"children":44},{},[45,47,54],{"type":21,"value":46},"Ripple is maintained by the ",{"type":16,"tag":24,"props":48,"children":51},{"href":49,"rel":50},"https://www.vic.gov.au/single-digital-presence",[28],[52],{"type":21,"value":53},"Single Digital Presence (SDP)",{"type":21,"value":55}," team at the Victorian Department of Government Services.\nIf you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below.",{"type":16,"tag":17,"props":57,"children":58},{},[59,61,68],{"type":21,"value":60},"To propose a change, you will need to have a free GitHub account. Please see the ",{"type":16,"tag":24,"props":62,"children":65},{"href":63,"rel":64},"https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account",[28],[66],{"type":21,"value":67},"GitHub docs",{"type":21,"value":69}," to create one if you haven't already.",{"type":16,"tag":71,"props":72,"children":74},"h2",{"id":73},"submit-a-bug-report",[75],{"type":21,"value":76},"Submit a bug report",{"type":16,"tag":17,"props":78,"children":79},{},[80],{"type":21,"value":81},"If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:",{"type":16,"tag":83,"props":84,"children":85},"ul",{},[86,109],{"type":16,"tag":87,"props":88,"children":89},"li",{},[90,92,99,100,107],{"type":21,"value":91},"Check existing the ",{"type":16,"tag":24,"props":93,"children":96},{"href":94,"rel":95},"https://github.com/dpc-sdp/ripple-framework/discussions",[28],[97],{"type":21,"value":98},"discussions",{"type":21,"value":33},{"type":16,"tag":24,"props":101,"children":104},{"href":102,"rel":103},"https://github.com/dpc-sdp/ripple-framework/issues",[28],[105],{"type":21,"value":106},"issues",{"type":21,"value":108}," to see if the issue has already been discussed.",{"type":16,"tag":87,"props":110,"children":111},{},[112,114],{"type":21,"value":113},"Fill out the ",{"type":16,"tag":24,"props":115,"children":118},{"href":116,"rel":117},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D",[28],[119],{"type":21,"value":120},"bug report issue template",{"type":16,"tag":71,"props":122,"children":124},{"id":123},"documentation-changes",[125],{"type":21,"value":126},"Documentation changes",{"type":16,"tag":17,"props":128,"children":129},{},[130],{"type":21,"value":131},"Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change.",{"type":16,"tag":133,"props":134,"children":136},"h3",{"id":135},"to-create-an-issue",[137],{"type":21,"value":138},"To create an issue:",{"type":16,"tag":17,"props":140,"children":141},{},[142],{"type":21,"value":143},"To log a docs site issue please do the following",{"type":16,"tag":83,"props":145,"children":146},{},[147,152,162],{"type":16,"tag":87,"props":148,"children":149},{},[150],{"type":21,"value":151},"Log in to GitHub",{"type":16,"tag":87,"props":153,"children":154},{},[155],{"type":16,"tag":24,"props":156,"children":159},{"href":157,"rel":158},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D",[28],[160],{"type":21,"value":161},"Log an issue on the GitHub Repository",{"type":16,"tag":87,"props":163,"children":164},{},[165],{"type":21,"value":166},"Fill in the form, providing as much detail as possible",{"type":16,"tag":133,"props":168,"children":170},{"id":169},"to-propose-an-edit-directly",[171],{"type":21,"value":172},"To propose an edit directly",{"type":16,"tag":17,"props":174,"children":175},{},[176,178,184],{"type":21,"value":177},"See the ",{"type":16,"tag":24,"props":179,"children":182},{"href":180,"rel":181},"https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request",[28],[183],{"type":21,"value":67},{"type":21,"value":185}," for more information about creating a pull request.",{"type":16,"tag":83,"props":187,"children":188},{},[189,193,198,211,216,221,226],{"type":16,"tag":87,"props":190,"children":191},{},[192],{"type":21,"value":151},{"type":16,"tag":87,"props":194,"children":195},{},[196],{"type":21,"value":197},"Click the \"Propose a change to this page on GitHub\" link at the bottom of each content page",{"type":16,"tag":87,"props":199,"children":200},{},[201,203,209],{"type":21,"value":202},"Make a change to the markdown in the editor. See ",{"type":16,"tag":24,"props":204,"children":207},{"href":205,"rel":206},"https://www.markdownguide.org/",[28],[208],{"type":21,"value":205},{"type":21,"value":210}," for information on syntax",{"type":16,"tag":87,"props":212,"children":213},{},[214],{"type":21,"value":215},"Describe the change in the commit message",{"type":16,"tag":87,"props":217,"children":218},{},[219],{"type":21,"value":220},"Create a new pull request from the \"forked\" version of the repository",{"type":16,"tag":87,"props":222,"children":223},{},[224],{"type":21,"value":225},"This pull request will be reviewed by the SDP development team and we may ask for changes or revisions.",{"type":16,"tag":87,"props":227,"children":228},{},[229],{"type":21,"value":230},"If the Pull Request is approved it will be merged and included in the next Ripple release.",{"type":16,"tag":71,"props":232,"children":234},{"id":233},"propose-a-new-feature",[235],{"type":21,"value":236},"Propose a new feature",{"type":16,"tag":17,"props":238,"children":239},{},[240,242],{"type":21,"value":241},"If you have a proposal for a new feature to the Ripple design system please see ",{"type":16,"tag":24,"props":243,"children":246},{"href":244,"rel":245},"https://www.vic.gov.au/ripple-design-system#enquiries-and-support",[28],[247],{"type":21,"value":244},{"type":16,"tag":17,"props":249,"children":250},{},[251],{"type":21,"value":252},"For development partners wishing to propose a new feature to Ripple Framework please do the following:",{"type":16,"tag":83,"props":254,"children":255},{},[256,274],{"type":16,"tag":87,"props":257,"children":258},{},[259,260,266,267,272],{"type":21,"value":91},{"type":16,"tag":24,"props":261,"children":264},{"href":262,"rel":263},"https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc",[28],[265],{"type":21,"value":98},{"type":21,"value":33},{"type":16,"tag":24,"props":268,"children":270},{"href":102,"rel":269},[28],[271],{"type":21,"value":106},{"type":21,"value":273}," to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal.",{"type":16,"tag":87,"props":275,"children":276},{},[277,279],{"type":21,"value":278},"If you are confident that the feature is something worth progressing, please fill out the ",{"type":16,"tag":24,"props":280,"children":283},{"href":281,"rel":282},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D",[28],[284],{"type":21,"value":285},"New feature proposal",{"title":8,"searchDepth":287,"depth":287,"links":288},2,[289,290,295],{"id":73,"depth":287,"text":76},{"id":123,"depth":287,"text":126,"children":291},[292,294],{"id":135,"depth":293,"text":138},3,{"id":169,"depth":293,"text":172},{"id":233,"depth":287,"text":236},"markdown","content:design-system:1.about:4.contributing.md","content","design-system/1.about/4.contributing.md","md",{"/design-system/about/contributing":302},[303,309],{"_path":304,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":305,"description":306,"layout":11,"_type":296,"_id":307,"_source":298,"_file":308,"_extension":300},"/design-system/about/getting-support","Support","How to get help","content:design-system:1.about:3.getting-support.md","design-system/1.about/3.getting-support.md",{"_path":310,"_dir":311,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":312,"description":313,"layout":11,"_type":296,"_id":314,"_source":298,"_file":315,"_extension":300},"/design-system/design/getting-started","design","Getting started",null,"content:design-system:2.design:1.getting-started.md","design-system/2.design/1.getting-started.md",{},[318,323,565],{"title":319,"_path":320,"icon":321,"layout":322},"Ripple Design System","/","carbon:home","home",{"title":324,"_path":325,"children":326},"Design System","/design-system",[327,339,353,383,417],{"title":328,"_path":329,"children":330},"About","/design-system/about",[331,334,337,338],{"title":332,"_path":333,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":335,"_path":336,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":305,"_path":304,"layout":11},{"title":9,"_path":5,"layout":11},{"title":340,"_path":341,"children":342},"Design","/design-system/design",[343,344,347,350],{"title":312,"_path":310,"layout":11},{"title":345,"_path":346,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":348,"_path":349,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":351,"_path":352,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":354,"_path":355,"children":356},"Develop","/design-system/develop",[357,359,361,364],{"title":312,"_path":358,"layout":11},"/design-system/develop/getting-started",{"title":9,"_path":360,"layout":11},"/design-system/develop/contributing",{"title":362,"_path":363,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":365,"_path":366,"children":367,"layout":11},"Usage","/design-system/develop/usage",[368,371,374,377,380],{"title":369,"_path":370,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":372,"_path":373,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":375,"_path":376,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":378,"_path":379,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":381,"_path":382,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":384,"_path":385,"children":386},"Styles","/design-system/styles",[387,390,393,396,399,402,405,408,411,414],{"title":388,"_path":389,"layout":11},"Colour","/design-system/styles/colour",{"title":391,"_path":392,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":394,"_path":395,"layout":11},"Grid","/design-system/styles/grid",{"title":397,"_path":398,"layout":11},"Icons","/design-system/styles/icons",{"title":400,"_path":401,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":403,"_path":404,"layout":11},"Layout","/design-system/styles/layout",{"title":406,"_path":407,"layout":11},"Logo","/design-system/styles/logo",{"title":409,"_path":410,"layout":11},"Motion","/design-system/styles/motion",{"title":412,"_path":413,"layout":11},"Spacing","/design-system/styles/spacing",{"title":415,"_path":416,"layout":11},"Typography","/design-system/styles/typography",{"title":418,"_path":419,"children":420},"Components","/design-system/components",[421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562],{"title":422,"_path":423,"layout":11},"Accordion","/design-system/components/accordion",{"title":425,"_path":426,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":428,"_path":429,"layout":11},"Alert","/design-system/components/alert",{"title":431,"_path":432,"layout":11},"Block quote","/design-system/components/block-quote",{"title":434,"_path":435,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":437,"_path":438,"layout":11},"Button","/design-system/components/button",{"title":440,"_path":441,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":443,"_path":444,"layout":11},"Callout","/design-system/components/callout",{"title":446,"_path":447,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":449,"_path":450,"layout":11},"Card","/design-system/components/card",{"title":452,"_path":453,"layout":11},"Carousel","/design-system/components/carousel",{"title":455,"_path":456,"layout":11},"Category grid","/design-system/components/category-grid",{"title":458,"_path":459,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":461,"_path":462,"layout":11},"Chip","/design-system/components/chip",{"title":464,"_path":465,"layout":11},"Contact us","/design-system/components/contact-us",{"title":467,"_path":468,"layout":11},"Date input","/design-system/components/date-input",{"title":470,"_path":471,"layout":11},"Detail list","/design-system/components/detail-list",{"title":473,"_path":474,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":476,"_path":477,"layout":11},"File","/design-system/components/file",{"title":479,"_path":480,"layout":11},"Footer","/design-system/components/footer",{"title":482,"_path":483,"layout":11},"Form alert","/design-system/components/form-alert",{"title":485,"_path":486,"layout":11},"Form","/design-system/components/form",{"title":488,"_path":489,"layout":11},"Header","/design-system/components/header",{"title":491,"_path":492,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":494,"_path":495,"layout":11},"Input field","/design-system/components/input-field",{"title":497,"_path":498,"layout":11},"Key dates","/design-system/components/key-dates",{"title":500,"_path":501,"layout":11},"Media embed","/design-system/components/media-embed",{"title":503,"_path":504,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":506,"_path":507,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":509,"_path":510,"layout":11},"Media","/design-system/components/media",{"title":512,"_path":513,"layout":11},"Option button","/design-system/components/option-button",{"title":515,"_path":516,"layout":11},"Page action","/design-system/components/page-action",{"title":518,"_path":519,"layout":11},"Pagination","/design-system/components/pagination",{"title":521,"_path":522,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":524,"_path":525,"layout":11},"Profile","/design-system/components/profile",{"title":527,"_path":528,"layout":11},"Radio button","/design-system/components/radio-button",{"title":530,"_path":531,"layout":11},"Related links","/design-system/components/related-links",{"title":533,"_path":534,"layout":11},"Results listing","/design-system/components/results-listing",{"title":536,"_path":537,"layout":11},"Search bar","/design-system/components/search-bar",{"title":539,"_path":540,"layout":11},"Skip link","/design-system/components/skip-link",{"title":542,"_path":543,"layout":11},"Social share","/design-system/components/social-share",{"title":545,"_path":546,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":548,"_path":549,"layout":11},"Table","/design-system/components/table",{"title":551,"_path":552,"layout":11},"Tabs","/design-system/components/tabs",{"title":554,"_path":555,"layout":11},"Tag","/design-system/components/tag",{"title":557,"_path":558,"layout":11},"Text area","/design-system/components/text-area",{"title":560,"_path":561,"layout":11},"Timeline","/design-system/components/timeline",{"title":563,"_path":564,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":566,"_path":36,"children":567,"layout":11},"Ripple Framework",[568,569,587,609],{"title":566,"_path":36,"layout":11},{"title":570,"_path":571,"children":572},"Key Concepts","/framework/key-concepts",[573,575,578,581,584],{"title":375,"_path":574,"layout":11},"/framework/key-concepts/nuxt",{"title":576,"_path":577,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":579,"_path":580,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":582,"_path":583,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":585,"_path":586,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":588,"_path":589,"children":590},"Guides","/framework/guides",[591,594,597,600,603,606],{"title":592,"_path":593,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":595,"_path":596,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":598,"_path":599,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":601,"_path":602,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":604,"_path":605,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":607,"_path":608,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":610,"_path":611,"layout":11},"Core modules","/framework/core-modules",["Reactive",613],{"module-navigation":313},true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> +If you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below.<!--]--></p><p><!--[-->To propose a change, you will need to have a free GitHub account. Please see the <a href="https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub docs<!--]--><!--]--><!----><!--]--></a> to create one if you haven't already.<!--]--></p><h2 id="submit-a-bug-report"><a href="#submit-a-bug-report"><!--[-->Submit a bug report<!--]--></a></h2><p><!--[-->If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:<!--]--></p><ul><!--[--><li><!--[-->Check existing the <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->discussions<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->issues<!--]--><!--]--><!----><!--]--></a> to see if the issue has already been discussed.<!--]--></li><li><!--[-->Fill out the <a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->bug report issue template<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 id="documentation-changes"><a href="#documentation-changes"><!--[-->Documentation changes<!--]--></a></h2><p><!--[-->Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change.<!--]--></p><h3 id="to-create-an-issue"><a href="#to-create-an-issue"><!--[-->To create an issue:<!--]--></a></h3><p><!--[-->To log a docs site issue please do the following<!--]--></p><ul><!--[--><li><!--[-->Log in to GitHub<!--]--></li><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Log an issue on the GitHub Repository<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->Fill in the form, providing as much detail as possible<!--]--></li><!--]--></ul><h3 id="to-propose-an-edit-directly"><a href="#to-propose-an-edit-directly"><!--[-->To propose an edit directly<!--]--></a></h3><p><!--[-->See the <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub docs<!--]--><!--]--><!----><!--]--></a> for more information about creating a pull request.<!--]--></p><ul><!--[--><li><!--[-->Log in to GitHub<!--]--></li><li><!--[-->Click the "Propose a change to this page on GitHub" link at the bottom of each content page<!--]--></li><li><!--[-->Make a change to the markdown in the editor. See <a href="https://www.markdownguide.org/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.markdownguide.org/<!--]--><!--]--><!----><!--]--></a> for information on syntax<!--]--></li><li><!--[-->Describe the change in the commit message<!--]--></li><li><!--[-->Create a new pull request from the "forked" version of the repository<!--]--></li><li><!--[-->This pull request will be reviewed by the SDP development team and we may ask for changes or revisions.<!--]--></li><li><!--[-->If the Pull Request is approved it will be merged and included in the next Ripple release.<!--]--></li><!--]--></ul><h2 id="propose-a-new-feature"><a href="#propose-a-new-feature"><!--[-->Propose a new feature<!--]--></a></h2><p><!--[-->If you have a proposal for a new feature to the Ripple design system please see <a href="https://www.vic.gov.au/ripple-design-system#enquiries-and-support" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/ripple-design-system#enquiries-and-support<!--]--><!--]--><!----><!--]--></a><!--]--></p><p><!--[-->For development partners wishing to propose a new feature to Ripple Framework please do the following:<!--]--></p><ul><!--[--><li><!--[-->Check existing the <a href="https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->discussions<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->issues<!--]--><!--]--><!----><!--]--></a> to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal.<!--]--></li><li><!--[-->If you are confident that the feature is something worth progressing, please fill out the <a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->New feature proposal<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/4.contributing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/contributing/_payload.json">[{"state":1,"_errors":612,"serverRendered":614,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":301,"$sdd-globals":316,"$sdd-navigation":317},{"/design-system/about/contributing":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":296,"_id":297,"_source":298,"_file":299,"_extension":300},"/design-system/about/contributing","about",false,"","Contributing","Found an issue?","page",{"type":13,"children":14,"toc":286},"root",[15,42,56,70,77,82,121,127,132,139,144,167,173,186,231,237,248,253],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20,23,32,34,40],{"type":21,"value":22},"text","The ",{"type":16,"tag":24,"props":25,"children":29},"a",{"href":26,"rel":27},"https://www.vic.gov.au/ripple-design-system",[28],"nofollow",[30],{"type":21,"value":31},"Ripple design system",{"type":21,"value":33}," and ",{"type":16,"tag":24,"props":35,"children":37},{"href":36},"/framework",[38],{"type":21,"value":39},"Ripple framework",{"type":21,"value":41}," are open source and released under an Apache 2.0 License.",{"type":16,"tag":17,"props":43,"children":44},{},[45,47,54],{"type":21,"value":46},"Ripple is maintained by the ",{"type":16,"tag":24,"props":48,"children":51},{"href":49,"rel":50},"https://www.vic.gov.au/single-digital-presence",[28],[52],{"type":21,"value":53},"Single Digital Presence (SDP)",{"type":21,"value":55}," team at the Victorian Department of Government Services.\nIf you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below.",{"type":16,"tag":17,"props":57,"children":58},{},[59,61,68],{"type":21,"value":60},"To propose a change, you will need to have a free GitHub account. Please see the ",{"type":16,"tag":24,"props":62,"children":65},{"href":63,"rel":64},"https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account",[28],[66],{"type":21,"value":67},"GitHub docs",{"type":21,"value":69}," to create one if you haven't already.",{"type":16,"tag":71,"props":72,"children":74},"h2",{"id":73},"submit-a-bug-report",[75],{"type":21,"value":76},"Submit a bug report",{"type":16,"tag":17,"props":78,"children":79},{},[80],{"type":21,"value":81},"If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:",{"type":16,"tag":83,"props":84,"children":85},"ul",{},[86,109],{"type":16,"tag":87,"props":88,"children":89},"li",{},[90,92,99,100,107],{"type":21,"value":91},"Check existing the ",{"type":16,"tag":24,"props":93,"children":96},{"href":94,"rel":95},"https://github.com/dpc-sdp/ripple-framework/discussions",[28],[97],{"type":21,"value":98},"discussions",{"type":21,"value":33},{"type":16,"tag":24,"props":101,"children":104},{"href":102,"rel":103},"https://github.com/dpc-sdp/ripple-framework/issues",[28],[105],{"type":21,"value":106},"issues",{"type":21,"value":108}," to see if the issue has already been discussed.",{"type":16,"tag":87,"props":110,"children":111},{},[112,114],{"type":21,"value":113},"Fill out the ",{"type":16,"tag":24,"props":115,"children":118},{"href":116,"rel":117},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D",[28],[119],{"type":21,"value":120},"bug report issue template",{"type":16,"tag":71,"props":122,"children":124},{"id":123},"documentation-changes",[125],{"type":21,"value":126},"Documentation changes",{"type":16,"tag":17,"props":128,"children":129},{},[130],{"type":21,"value":131},"Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change.",{"type":16,"tag":133,"props":134,"children":136},"h3",{"id":135},"to-create-an-issue",[137],{"type":21,"value":138},"To create an issue:",{"type":16,"tag":17,"props":140,"children":141},{},[142],{"type":21,"value":143},"To log a docs site issue please do the following",{"type":16,"tag":83,"props":145,"children":146},{},[147,152,162],{"type":16,"tag":87,"props":148,"children":149},{},[150],{"type":21,"value":151},"Log in to GitHub",{"type":16,"tag":87,"props":153,"children":154},{},[155],{"type":16,"tag":24,"props":156,"children":159},{"href":157,"rel":158},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D",[28],[160],{"type":21,"value":161},"Log an issue on the GitHub Repository",{"type":16,"tag":87,"props":163,"children":164},{},[165],{"type":21,"value":166},"Fill in the form, providing as much detail as possible",{"type":16,"tag":133,"props":168,"children":170},{"id":169},"to-propose-an-edit-directly",[171],{"type":21,"value":172},"To propose an edit directly",{"type":16,"tag":17,"props":174,"children":175},{},[176,178,184],{"type":21,"value":177},"See the ",{"type":16,"tag":24,"props":179,"children":182},{"href":180,"rel":181},"https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request",[28],[183],{"type":21,"value":67},{"type":21,"value":185}," for more information about creating a pull request.",{"type":16,"tag":83,"props":187,"children":188},{},[189,193,198,211,216,221,226],{"type":16,"tag":87,"props":190,"children":191},{},[192],{"type":21,"value":151},{"type":16,"tag":87,"props":194,"children":195},{},[196],{"type":21,"value":197},"Click the \"Propose a change to this page on GitHub\" link at the bottom of each content page",{"type":16,"tag":87,"props":199,"children":200},{},[201,203,209],{"type":21,"value":202},"Make a change to the markdown in the editor. See ",{"type":16,"tag":24,"props":204,"children":207},{"href":205,"rel":206},"https://www.markdownguide.org/",[28],[208],{"type":21,"value":205},{"type":21,"value":210}," for information on syntax",{"type":16,"tag":87,"props":212,"children":213},{},[214],{"type":21,"value":215},"Describe the change in the commit message",{"type":16,"tag":87,"props":217,"children":218},{},[219],{"type":21,"value":220},"Create a new pull request from the \"forked\" version of the repository",{"type":16,"tag":87,"props":222,"children":223},{},[224],{"type":21,"value":225},"This pull request will be reviewed by the SDP development team and we may ask for changes or revisions.",{"type":16,"tag":87,"props":227,"children":228},{},[229],{"type":21,"value":230},"If the Pull Request is approved it will be merged and included in the next Ripple release.",{"type":16,"tag":71,"props":232,"children":234},{"id":233},"propose-a-new-feature",[235],{"type":21,"value":236},"Propose a new feature",{"type":16,"tag":17,"props":238,"children":239},{},[240,242],{"type":21,"value":241},"If you have a proposal for a new feature to the Ripple design system please see ",{"type":16,"tag":24,"props":243,"children":246},{"href":244,"rel":245},"https://www.vic.gov.au/ripple-design-system#enquiries-and-support",[28],[247],{"type":21,"value":244},{"type":16,"tag":17,"props":249,"children":250},{},[251],{"type":21,"value":252},"For development partners wishing to propose a new feature to Ripple Framework please do the following:",{"type":16,"tag":83,"props":254,"children":255},{},[256,274],{"type":16,"tag":87,"props":257,"children":258},{},[259,260,266,267,272],{"type":21,"value":91},{"type":16,"tag":24,"props":261,"children":264},{"href":262,"rel":263},"https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc",[28],[265],{"type":21,"value":98},{"type":21,"value":33},{"type":16,"tag":24,"props":268,"children":270},{"href":102,"rel":269},[28],[271],{"type":21,"value":106},{"type":21,"value":273}," to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal.",{"type":16,"tag":87,"props":275,"children":276},{},[277,279],{"type":21,"value":278},"If you are confident that the feature is something worth progressing, please fill out the ",{"type":16,"tag":24,"props":280,"children":283},{"href":281,"rel":282},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D",[28],[284],{"type":21,"value":285},"New feature proposal",{"title":8,"searchDepth":287,"depth":287,"links":288},2,[289,290,295],{"id":73,"depth":287,"text":76},{"id":123,"depth":287,"text":126,"children":291},[292,294],{"id":135,"depth":293,"text":138},3,{"id":169,"depth":293,"text":172},{"id":233,"depth":287,"text":236},"markdown","content:design-system:1.about:4.contributing.md","content","design-system/1.about/4.contributing.md","md",{"/design-system/about/contributing":302},[303,309],{"_path":304,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":305,"description":306,"layout":11,"_type":296,"_id":307,"_source":298,"_file":308,"_extension":300},"/design-system/about/getting-support","Support","How to get help","content:design-system:1.about:3.getting-support.md","design-system/1.about/3.getting-support.md",{"_path":310,"_dir":311,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":312,"description":313,"layout":11,"_type":296,"_id":314,"_source":298,"_file":315,"_extension":300},"/design-system/design/getting-started","design","Getting started",null,"content:design-system:2.design:1.getting-started.md","design-system/2.design/1.getting-started.md",{},[318,323,565],{"title":319,"_path":320,"icon":321,"layout":322},"Ripple Design System","/","carbon:home","home",{"title":324,"_path":325,"children":326},"Design System","/design-system",[327,339,353,383,417],{"title":328,"_path":329,"children":330},"About","/design-system/about",[331,334,337,338],{"title":332,"_path":333,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":335,"_path":336,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":305,"_path":304,"layout":11},{"title":9,"_path":5,"layout":11},{"title":340,"_path":341,"children":342},"Design","/design-system/design",[343,344,347,350],{"title":312,"_path":310,"layout":11},{"title":345,"_path":346,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":348,"_path":349,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":351,"_path":352,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":354,"_path":355,"children":356},"Develop","/design-system/develop",[357,359,361,364],{"title":312,"_path":358,"layout":11},"/design-system/develop/getting-started",{"title":9,"_path":360,"layout":11},"/design-system/develop/contributing",{"title":362,"_path":363,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":365,"_path":366,"children":367,"layout":11},"Usage","/design-system/develop/usage",[368,371,374,377,380],{"title":369,"_path":370,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":372,"_path":373,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":375,"_path":376,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":378,"_path":379,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":381,"_path":382,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":384,"_path":385,"children":386},"Styles","/design-system/styles",[387,390,393,396,399,402,405,408,411,414],{"title":388,"_path":389,"layout":11},"Colour","/design-system/styles/colour",{"title":391,"_path":392,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":394,"_path":395,"layout":11},"Grid","/design-system/styles/grid",{"title":397,"_path":398,"layout":11},"Icons","/design-system/styles/icons",{"title":400,"_path":401,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":403,"_path":404,"layout":11},"Layout","/design-system/styles/layout",{"title":406,"_path":407,"layout":11},"Logo","/design-system/styles/logo",{"title":409,"_path":410,"layout":11},"Motion","/design-system/styles/motion",{"title":412,"_path":413,"layout":11},"Spacing","/design-system/styles/spacing",{"title":415,"_path":416,"layout":11},"Typography","/design-system/styles/typography",{"title":418,"_path":419,"children":420},"Components","/design-system/components",[421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562],{"title":422,"_path":423,"layout":11},"Accordion","/design-system/components/accordion",{"title":425,"_path":426,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":428,"_path":429,"layout":11},"Alert","/design-system/components/alert",{"title":431,"_path":432,"layout":11},"Block quote","/design-system/components/block-quote",{"title":434,"_path":435,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":437,"_path":438,"layout":11},"Button","/design-system/components/button",{"title":440,"_path":441,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":443,"_path":444,"layout":11},"Callout","/design-system/components/callout",{"title":446,"_path":447,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":449,"_path":450,"layout":11},"Card","/design-system/components/card",{"title":452,"_path":453,"layout":11},"Carousel","/design-system/components/carousel",{"title":455,"_path":456,"layout":11},"Category grid","/design-system/components/category-grid",{"title":458,"_path":459,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":461,"_path":462,"layout":11},"Chip","/design-system/components/chip",{"title":464,"_path":465,"layout":11},"Contact us","/design-system/components/contact-us",{"title":467,"_path":468,"layout":11},"Date input","/design-system/components/date-input",{"title":470,"_path":471,"layout":11},"Detail list","/design-system/components/detail-list",{"title":473,"_path":474,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":476,"_path":477,"layout":11},"File","/design-system/components/file",{"title":479,"_path":480,"layout":11},"Footer","/design-system/components/footer",{"title":482,"_path":483,"layout":11},"Form alert","/design-system/components/form-alert",{"title":485,"_path":486,"layout":11},"Form","/design-system/components/form",{"title":488,"_path":489,"layout":11},"Header","/design-system/components/header",{"title":491,"_path":492,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":494,"_path":495,"layout":11},"Input field","/design-system/components/input-field",{"title":497,"_path":498,"layout":11},"Key dates","/design-system/components/key-dates",{"title":500,"_path":501,"layout":11},"Media embed","/design-system/components/media-embed",{"title":503,"_path":504,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":506,"_path":507,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":509,"_path":510,"layout":11},"Media","/design-system/components/media",{"title":512,"_path":513,"layout":11},"Option button","/design-system/components/option-button",{"title":515,"_path":516,"layout":11},"Page action","/design-system/components/page-action",{"title":518,"_path":519,"layout":11},"Pagination","/design-system/components/pagination",{"title":521,"_path":522,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":524,"_path":525,"layout":11},"Profile","/design-system/components/profile",{"title":527,"_path":528,"layout":11},"Radio button","/design-system/components/radio-button",{"title":530,"_path":531,"layout":11},"Related links","/design-system/components/related-links",{"title":533,"_path":534,"layout":11},"Results listing","/design-system/components/results-listing",{"title":536,"_path":537,"layout":11},"Search bar","/design-system/components/search-bar",{"title":539,"_path":540,"layout":11},"Skip link","/design-system/components/skip-link",{"title":542,"_path":543,"layout":11},"Social share","/design-system/components/social-share",{"title":545,"_path":546,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":548,"_path":549,"layout":11},"Table","/design-system/components/table",{"title":551,"_path":552,"layout":11},"Tabs","/design-system/components/tabs",{"title":554,"_path":555,"layout":11},"Tag","/design-system/components/tag",{"title":557,"_path":558,"layout":11},"Text area","/design-system/components/text-area",{"title":560,"_path":561,"layout":11},"Timeline","/design-system/components/timeline",{"title":563,"_path":564,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":566,"_path":36,"children":567,"layout":11},"Ripple Framework",[568,569,587,609],{"title":566,"_path":36,"layout":11},{"title":570,"_path":571,"children":572},"Key Concepts","/framework/key-concepts",[573,575,578,581,584],{"title":375,"_path":574,"layout":11},"/framework/key-concepts/nuxt",{"title":576,"_path":577,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":579,"_path":580,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":582,"_path":583,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":585,"_path":586,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":588,"_path":589,"children":590},"Guides","/framework/guides",[591,594,597,600,603,606],{"title":592,"_path":593,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":595,"_path":596,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":598,"_path":599,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":601,"_path":602,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":604,"_path":605,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":607,"_path":608,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":610,"_path":611,"layout":11},"Core modules","/framework/core-modules",["Reactive",613],{"module-navigation":313},true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/about/getting-support/index.html b/design-system/about/getting-support/index.html index c772d2b00f..5fcba198a1 100644 --- a/design-system/about/getting-support/index.html +++ b/design-system/about/getting-support/index.html @@ -24,7 +24,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Support</h1><p class="rpl-type-p-large" data-v-3163c6df>How to get help</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->The <a href="https://www.vic.gov.au/ripple-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Ripple design system<!--]--><!--]--><!----><!--]--></a> is maintained by the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> team at the Victorian Department of Government Services.<!--]--></p><p><!--[-->You can reach out to us via the following channels:<!--]--></p><h3 id="for-technical-and-project-support"><a href="#for-technical-and-project-support"><!--[-->For technical and project support<!--]--></a></h3><ul><!--[--><li><!--[-->join the discussion on <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->log a request through our <a href="https://digital-vic.atlassian.net/servicedesk/customer/portals" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->helpdesk<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->sign up to the <a href="https://vic-sdp.slack.com" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->SDP Slack<!--]--><!--]--><!----><!--]--></a> (Open to projects with an MoU for application support)<!--]--></li><!--]--></ul><h2 id="design-enquiries"><a href="#design-enquiries"><!--[-->Design enquiries<!--]--></a></h2><p><!--[-->Email: <a href="mailto:design@dpc.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->design@dpc.vic.gov.au<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 id="general-enquiries"><a href="#general-enquiries"><!--[-->General enquiries<!--]--></a></h2><p><!--[--><a href="https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Raise a request<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/3.getting-support.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/getting-support/_payload.json">[{"state":1,"_errors":455,"serverRendered":458,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":144,"$sdd-globals":158,"$sdd-navigation":159},{"/design-system/about/getting-support":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":139,"_id":140,"_source":141,"_file":142,"_extension":143},"/design-system/about/getting-support","about",false,"","Support","How to get help","page",{"type":13,"children":14,"toc":132},"root",[15,43,48,55,98,105,116,122],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20,23,32,34,41],{"type":21,"value":22},"text","The ",{"type":16,"tag":24,"props":25,"children":29},"a",{"href":26,"rel":27},"https://www.vic.gov.au/ripple-design-system",[28],"nofollow",[30],{"type":21,"value":31},"Ripple design system",{"type":21,"value":33}," is maintained by the ",{"type":16,"tag":24,"props":35,"children":38},{"href":36,"rel":37},"https://www.vic.gov.au/single-digital-presence",[28],[39],{"type":21,"value":40},"Single Digital Presence (SDP)",{"type":21,"value":42}," team at the Victorian Department of Government Services.",{"type":16,"tag":17,"props":44,"children":45},{},[46],{"type":21,"value":47},"You can reach out to us via the following channels:",{"type":16,"tag":49,"props":50,"children":52},"h3",{"id":51},"for-technical-and-project-support",[53],{"type":21,"value":54},"For technical and project support",{"type":16,"tag":56,"props":57,"children":58},"ul",{},[59,72,84],{"type":16,"tag":60,"props":61,"children":62},"li",{},[63,65],{"type":21,"value":64},"join the discussion on ",{"type":16,"tag":24,"props":66,"children":69},{"href":67,"rel":68},"https://github.com/dpc-sdp/ripple-framework/discussions",[28],[70],{"type":21,"value":71},"GitHub",{"type":16,"tag":60,"props":73,"children":74},{},[75,77],{"type":21,"value":76},"log a request through our ",{"type":16,"tag":24,"props":78,"children":81},{"href":79,"rel":80},"https://digital-vic.atlassian.net/servicedesk/customer/portals",[28],[82],{"type":21,"value":83},"helpdesk",{"type":16,"tag":60,"props":85,"children":86},{},[87,89,96],{"type":21,"value":88},"sign up to the ",{"type":16,"tag":24,"props":90,"children":93},{"href":91,"rel":92},"https://vic-sdp.slack.com",[28],[94],{"type":21,"value":95},"SDP Slack",{"type":21,"value":97}," (Open to projects with an MoU for application support)",{"type":16,"tag":99,"props":100,"children":102},"h2",{"id":101},"design-enquiries",[103],{"type":21,"value":104},"Design enquiries",{"type":16,"tag":17,"props":106,"children":107},{},[108,110],{"type":21,"value":109},"Email: ",{"type":16,"tag":24,"props":111,"children":113},{"href":112},"mailto:design@dpc.vic.gov.au",[114],{"type":21,"value":115},"design@dpc.vic.gov.au",{"type":16,"tag":99,"props":117,"children":119},{"id":118},"general-enquiries",[120],{"type":21,"value":121},"General enquiries",{"type":16,"tag":17,"props":123,"children":124},{},[125],{"type":16,"tag":24,"props":126,"children":129},{"href":127,"rel":128},"https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497",[28],[130],{"type":21,"value":131},"Raise a request",{"title":8,"searchDepth":133,"depth":133,"links":134},2,[135,137,138],{"id":51,"depth":136,"text":54},3,{"id":101,"depth":133,"text":104},{"id":118,"depth":133,"text":121},"markdown","content:design-system:1.about:3.getting-support.md","content","design-system/1.about/3.getting-support.md","md",{"/design-system/about/getting-support":145},[146,152],{"_path":147,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":148,"description":149,"layout":11,"_type":139,"_id":150,"_source":141,"_file":151,"_extension":143},"/design-system/about/whos-it-for","Who's it for?","Built by government, for government.","content:design-system:1.about:2.whos-it-for.md","design-system/1.about/2.whos-it-for.md",{"_path":153,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":154,"description":155,"layout":11,"_type":139,"_id":156,"_source":141,"_file":157,"_extension":143},"/design-system/about/contributing","Contributing","Found an issue?","content:design-system:1.about:4.contributing.md","design-system/1.about/4.contributing.md",{},[160,165,407],{"title":161,"_path":162,"icon":163,"layout":164},"Ripple Design System","/","carbon:home","home",{"title":166,"_path":167,"children":168},"Design System","/design-system",[169,179,195,225,259],{"title":170,"_path":171,"children":172},"About","/design-system/about",[173,176,177,178],{"title":174,"_path":175,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":148,"_path":147,"layout":11},{"title":9,"_path":5,"layout":11},{"title":154,"_path":153,"layout":11},{"title":180,"_path":181,"children":182},"Design","/design-system/design",[183,186,189,192],{"title":184,"_path":185,"layout":11},"Getting started","/design-system/design/getting-started",{"title":187,"_path":188,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":190,"_path":191,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":193,"_path":194,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":196,"_path":197,"children":198},"Develop","/design-system/develop",[199,201,203,206],{"title":184,"_path":200,"layout":11},"/design-system/develop/getting-started",{"title":154,"_path":202,"layout":11},"/design-system/develop/contributing",{"title":204,"_path":205,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":207,"_path":208,"children":209,"layout":11},"Usage","/design-system/develop/usage",[210,213,216,219,222],{"title":211,"_path":212,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":214,"_path":215,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":217,"_path":218,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":220,"_path":221,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":223,"_path":224,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":226,"_path":227,"children":228},"Styles","/design-system/styles",[229,232,235,238,241,244,247,250,253,256],{"title":230,"_path":231,"layout":11},"Colour","/design-system/styles/colour",{"title":233,"_path":234,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":236,"_path":237,"layout":11},"Grid","/design-system/styles/grid",{"title":239,"_path":240,"layout":11},"Icons","/design-system/styles/icons",{"title":242,"_path":243,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":245,"_path":246,"layout":11},"Layout","/design-system/styles/layout",{"title":248,"_path":249,"layout":11},"Logo","/design-system/styles/logo",{"title":251,"_path":252,"layout":11},"Motion","/design-system/styles/motion",{"title":254,"_path":255,"layout":11},"Spacing","/design-system/styles/spacing",{"title":257,"_path":258,"layout":11},"Typography","/design-system/styles/typography",{"title":260,"_path":261,"children":262},"Components","/design-system/components",[263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404],{"title":264,"_path":265,"layout":11},"Accordion","/design-system/components/accordion",{"title":267,"_path":268,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":270,"_path":271,"layout":11},"Alert","/design-system/components/alert",{"title":273,"_path":274,"layout":11},"Block quote","/design-system/components/block-quote",{"title":276,"_path":277,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":279,"_path":280,"layout":11},"Button","/design-system/components/button",{"title":282,"_path":283,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":285,"_path":286,"layout":11},"Callout","/design-system/components/callout",{"title":288,"_path":289,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":291,"_path":292,"layout":11},"Card","/design-system/components/card",{"title":294,"_path":295,"layout":11},"Carousel","/design-system/components/carousel",{"title":297,"_path":298,"layout":11},"Category grid","/design-system/components/category-grid",{"title":300,"_path":301,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":303,"_path":304,"layout":11},"Chip","/design-system/components/chip",{"title":306,"_path":307,"layout":11},"Contact us","/design-system/components/contact-us",{"title":309,"_path":310,"layout":11},"Date input","/design-system/components/date-input",{"title":312,"_path":313,"layout":11},"Detail list","/design-system/components/detail-list",{"title":315,"_path":316,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":318,"_path":319,"layout":11},"File","/design-system/components/file",{"title":321,"_path":322,"layout":11},"Footer","/design-system/components/footer",{"title":324,"_path":325,"layout":11},"Form alert","/design-system/components/form-alert",{"title":327,"_path":328,"layout":11},"Form","/design-system/components/form",{"title":330,"_path":331,"layout":11},"Header","/design-system/components/header",{"title":333,"_path":334,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":336,"_path":337,"layout":11},"Input field","/design-system/components/input-field",{"title":339,"_path":340,"layout":11},"Key dates","/design-system/components/key-dates",{"title":342,"_path":343,"layout":11},"Media embed","/design-system/components/media-embed",{"title":345,"_path":346,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":348,"_path":349,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":351,"_path":352,"layout":11},"Media","/design-system/components/media",{"title":354,"_path":355,"layout":11},"Option button","/design-system/components/option-button",{"title":357,"_path":358,"layout":11},"Page action","/design-system/components/page-action",{"title":360,"_path":361,"layout":11},"Pagination","/design-system/components/pagination",{"title":363,"_path":364,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":366,"_path":367,"layout":11},"Profile","/design-system/components/profile",{"title":369,"_path":370,"layout":11},"Radio button","/design-system/components/radio-button",{"title":372,"_path":373,"layout":11},"Related links","/design-system/components/related-links",{"title":375,"_path":376,"layout":11},"Results listing","/design-system/components/results-listing",{"title":378,"_path":379,"layout":11},"Search bar","/design-system/components/search-bar",{"title":381,"_path":382,"layout":11},"Skip link","/design-system/components/skip-link",{"title":384,"_path":385,"layout":11},"Social share","/design-system/components/social-share",{"title":387,"_path":388,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":390,"_path":391,"layout":11},"Table","/design-system/components/table",{"title":393,"_path":394,"layout":11},"Tabs","/design-system/components/tabs",{"title":396,"_path":397,"layout":11},"Tag","/design-system/components/tag",{"title":399,"_path":400,"layout":11},"Text area","/design-system/components/text-area",{"title":402,"_path":403,"layout":11},"Timeline","/design-system/components/timeline",{"title":405,"_path":406,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":408,"_path":409,"children":410,"layout":11},"Ripple Framework","/framework",[411,412,430,452],{"title":408,"_path":409,"layout":11},{"title":413,"_path":414,"children":415},"Key Concepts","/framework/key-concepts",[416,418,421,424,427],{"title":217,"_path":417,"layout":11},"/framework/key-concepts/nuxt",{"title":419,"_path":420,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":422,"_path":423,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":425,"_path":426,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":428,"_path":429,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":431,"_path":432,"children":433},"Guides","/framework/guides",[434,437,440,443,446,449],{"title":435,"_path":436,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":438,"_path":439,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":441,"_path":442,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":444,"_path":445,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":447,"_path":448,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":450,"_path":451,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":453,"_path":454,"layout":11},"Core modules","/framework/core-modules",["Reactive",456],{"module-navigation":457},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Support</h1><p class="rpl-type-p-large" data-v-3163c6df>How to get help</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->The <a href="https://www.vic.gov.au/ripple-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Ripple design system<!--]--><!--]--><!----><!--]--></a> is maintained by the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> team at the Victorian Department of Government Services.<!--]--></p><p><!--[-->You can reach out to us via the following channels:<!--]--></p><h3 id="for-technical-and-project-support"><a href="#for-technical-and-project-support"><!--[-->For technical and project support<!--]--></a></h3><ul><!--[--><li><!--[-->join the discussion on <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->log a request through our <a href="https://digital-vic.atlassian.net/servicedesk/customer/portals" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->helpdesk<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->sign up to the <a href="https://vic-sdp.slack.com" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->SDP Slack<!--]--><!--]--><!----><!--]--></a> (Open to projects with an MoU for application support)<!--]--></li><!--]--></ul><h2 id="design-enquiries"><a href="#design-enquiries"><!--[-->Design enquiries<!--]--></a></h2><p><!--[-->Email: <a href="mailto:design@dpc.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->design@dpc.vic.gov.au<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 id="general-enquiries"><a href="#general-enquiries"><!--[-->General enquiries<!--]--></a></h2><p><!--[--><a href="https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Raise a request<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/3.getting-support.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/getting-support/_payload.json">[{"state":1,"_errors":455,"serverRendered":458,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":144,"$sdd-globals":158,"$sdd-navigation":159},{"/design-system/about/getting-support":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":139,"_id":140,"_source":141,"_file":142,"_extension":143},"/design-system/about/getting-support","about",false,"","Support","How to get help","page",{"type":13,"children":14,"toc":132},"root",[15,43,48,55,98,105,116,122],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20,23,32,34,41],{"type":21,"value":22},"text","The ",{"type":16,"tag":24,"props":25,"children":29},"a",{"href":26,"rel":27},"https://www.vic.gov.au/ripple-design-system",[28],"nofollow",[30],{"type":21,"value":31},"Ripple design system",{"type":21,"value":33}," is maintained by the ",{"type":16,"tag":24,"props":35,"children":38},{"href":36,"rel":37},"https://www.vic.gov.au/single-digital-presence",[28],[39],{"type":21,"value":40},"Single Digital Presence (SDP)",{"type":21,"value":42}," team at the Victorian Department of Government Services.",{"type":16,"tag":17,"props":44,"children":45},{},[46],{"type":21,"value":47},"You can reach out to us via the following channels:",{"type":16,"tag":49,"props":50,"children":52},"h3",{"id":51},"for-technical-and-project-support",[53],{"type":21,"value":54},"For technical and project support",{"type":16,"tag":56,"props":57,"children":58},"ul",{},[59,72,84],{"type":16,"tag":60,"props":61,"children":62},"li",{},[63,65],{"type":21,"value":64},"join the discussion on ",{"type":16,"tag":24,"props":66,"children":69},{"href":67,"rel":68},"https://github.com/dpc-sdp/ripple-framework/discussions",[28],[70],{"type":21,"value":71},"GitHub",{"type":16,"tag":60,"props":73,"children":74},{},[75,77],{"type":21,"value":76},"log a request through our ",{"type":16,"tag":24,"props":78,"children":81},{"href":79,"rel":80},"https://digital-vic.atlassian.net/servicedesk/customer/portals",[28],[82],{"type":21,"value":83},"helpdesk",{"type":16,"tag":60,"props":85,"children":86},{},[87,89,96],{"type":21,"value":88},"sign up to the ",{"type":16,"tag":24,"props":90,"children":93},{"href":91,"rel":92},"https://vic-sdp.slack.com",[28],[94],{"type":21,"value":95},"SDP Slack",{"type":21,"value":97}," (Open to projects with an MoU for application support)",{"type":16,"tag":99,"props":100,"children":102},"h2",{"id":101},"design-enquiries",[103],{"type":21,"value":104},"Design enquiries",{"type":16,"tag":17,"props":106,"children":107},{},[108,110],{"type":21,"value":109},"Email: ",{"type":16,"tag":24,"props":111,"children":113},{"href":112},"mailto:design@dpc.vic.gov.au",[114],{"type":21,"value":115},"design@dpc.vic.gov.au",{"type":16,"tag":99,"props":117,"children":119},{"id":118},"general-enquiries",[120],{"type":21,"value":121},"General enquiries",{"type":16,"tag":17,"props":123,"children":124},{},[125],{"type":16,"tag":24,"props":126,"children":129},{"href":127,"rel":128},"https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497",[28],[130],{"type":21,"value":131},"Raise a request",{"title":8,"searchDepth":133,"depth":133,"links":134},2,[135,137,138],{"id":51,"depth":136,"text":54},3,{"id":101,"depth":133,"text":104},{"id":118,"depth":133,"text":121},"markdown","content:design-system:1.about:3.getting-support.md","content","design-system/1.about/3.getting-support.md","md",{"/design-system/about/getting-support":145},[146,152],{"_path":147,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":148,"description":149,"layout":11,"_type":139,"_id":150,"_source":141,"_file":151,"_extension":143},"/design-system/about/whos-it-for","Who's it for?","Built by government, for government.","content:design-system:1.about:2.whos-it-for.md","design-system/1.about/2.whos-it-for.md",{"_path":153,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":154,"description":155,"layout":11,"_type":139,"_id":156,"_source":141,"_file":157,"_extension":143},"/design-system/about/contributing","Contributing","Found an issue?","content:design-system:1.about:4.contributing.md","design-system/1.about/4.contributing.md",{},[160,165,407],{"title":161,"_path":162,"icon":163,"layout":164},"Ripple Design System","/","carbon:home","home",{"title":166,"_path":167,"children":168},"Design System","/design-system",[169,179,195,225,259],{"title":170,"_path":171,"children":172},"About","/design-system/about",[173,176,177,178],{"title":174,"_path":175,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":148,"_path":147,"layout":11},{"title":9,"_path":5,"layout":11},{"title":154,"_path":153,"layout":11},{"title":180,"_path":181,"children":182},"Design","/design-system/design",[183,186,189,192],{"title":184,"_path":185,"layout":11},"Getting started","/design-system/design/getting-started",{"title":187,"_path":188,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":190,"_path":191,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":193,"_path":194,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":196,"_path":197,"children":198},"Develop","/design-system/develop",[199,201,203,206],{"title":184,"_path":200,"layout":11},"/design-system/develop/getting-started",{"title":154,"_path":202,"layout":11},"/design-system/develop/contributing",{"title":204,"_path":205,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":207,"_path":208,"children":209,"layout":11},"Usage","/design-system/develop/usage",[210,213,216,219,222],{"title":211,"_path":212,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":214,"_path":215,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":217,"_path":218,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":220,"_path":221,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":223,"_path":224,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":226,"_path":227,"children":228},"Styles","/design-system/styles",[229,232,235,238,241,244,247,250,253,256],{"title":230,"_path":231,"layout":11},"Colour","/design-system/styles/colour",{"title":233,"_path":234,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":236,"_path":237,"layout":11},"Grid","/design-system/styles/grid",{"title":239,"_path":240,"layout":11},"Icons","/design-system/styles/icons",{"title":242,"_path":243,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":245,"_path":246,"layout":11},"Layout","/design-system/styles/layout",{"title":248,"_path":249,"layout":11},"Logo","/design-system/styles/logo",{"title":251,"_path":252,"layout":11},"Motion","/design-system/styles/motion",{"title":254,"_path":255,"layout":11},"Spacing","/design-system/styles/spacing",{"title":257,"_path":258,"layout":11},"Typography","/design-system/styles/typography",{"title":260,"_path":261,"children":262},"Components","/design-system/components",[263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404],{"title":264,"_path":265,"layout":11},"Accordion","/design-system/components/accordion",{"title":267,"_path":268,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":270,"_path":271,"layout":11},"Alert","/design-system/components/alert",{"title":273,"_path":274,"layout":11},"Block quote","/design-system/components/block-quote",{"title":276,"_path":277,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":279,"_path":280,"layout":11},"Button","/design-system/components/button",{"title":282,"_path":283,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":285,"_path":286,"layout":11},"Callout","/design-system/components/callout",{"title":288,"_path":289,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":291,"_path":292,"layout":11},"Card","/design-system/components/card",{"title":294,"_path":295,"layout":11},"Carousel","/design-system/components/carousel",{"title":297,"_path":298,"layout":11},"Category grid","/design-system/components/category-grid",{"title":300,"_path":301,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":303,"_path":304,"layout":11},"Chip","/design-system/components/chip",{"title":306,"_path":307,"layout":11},"Contact us","/design-system/components/contact-us",{"title":309,"_path":310,"layout":11},"Date input","/design-system/components/date-input",{"title":312,"_path":313,"layout":11},"Detail list","/design-system/components/detail-list",{"title":315,"_path":316,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":318,"_path":319,"layout":11},"File","/design-system/components/file",{"title":321,"_path":322,"layout":11},"Footer","/design-system/components/footer",{"title":324,"_path":325,"layout":11},"Form alert","/design-system/components/form-alert",{"title":327,"_path":328,"layout":11},"Form","/design-system/components/form",{"title":330,"_path":331,"layout":11},"Header","/design-system/components/header",{"title":333,"_path":334,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":336,"_path":337,"layout":11},"Input field","/design-system/components/input-field",{"title":339,"_path":340,"layout":11},"Key dates","/design-system/components/key-dates",{"title":342,"_path":343,"layout":11},"Media embed","/design-system/components/media-embed",{"title":345,"_path":346,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":348,"_path":349,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":351,"_path":352,"layout":11},"Media","/design-system/components/media",{"title":354,"_path":355,"layout":11},"Option button","/design-system/components/option-button",{"title":357,"_path":358,"layout":11},"Page action","/design-system/components/page-action",{"title":360,"_path":361,"layout":11},"Pagination","/design-system/components/pagination",{"title":363,"_path":364,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":366,"_path":367,"layout":11},"Profile","/design-system/components/profile",{"title":369,"_path":370,"layout":11},"Radio button","/design-system/components/radio-button",{"title":372,"_path":373,"layout":11},"Related links","/design-system/components/related-links",{"title":375,"_path":376,"layout":11},"Results listing","/design-system/components/results-listing",{"title":378,"_path":379,"layout":11},"Search bar","/design-system/components/search-bar",{"title":381,"_path":382,"layout":11},"Skip link","/design-system/components/skip-link",{"title":384,"_path":385,"layout":11},"Social share","/design-system/components/social-share",{"title":387,"_path":388,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":390,"_path":391,"layout":11},"Table","/design-system/components/table",{"title":393,"_path":394,"layout":11},"Tabs","/design-system/components/tabs",{"title":396,"_path":397,"layout":11},"Tag","/design-system/components/tag",{"title":399,"_path":400,"layout":11},"Text area","/design-system/components/text-area",{"title":402,"_path":403,"layout":11},"Timeline","/design-system/components/timeline",{"title":405,"_path":406,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":408,"_path":409,"children":410,"layout":11},"Ripple Framework","/framework",[411,412,430,452],{"title":408,"_path":409,"layout":11},{"title":413,"_path":414,"children":415},"Key Concepts","/framework/key-concepts",[416,418,421,424,427],{"title":217,"_path":417,"layout":11},"/framework/key-concepts/nuxt",{"title":419,"_path":420,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":422,"_path":423,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":425,"_path":426,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":428,"_path":429,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":431,"_path":432,"children":433},"Guides","/framework/guides",[434,437,440,443,446,449],{"title":435,"_path":436,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":438,"_path":439,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":441,"_path":442,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":444,"_path":445,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":447,"_path":448,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":450,"_path":451,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":453,"_path":454,"layout":11},"Core modules","/framework/core-modules",["Reactive",456],{"module-navigation":457},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/about/what-is-ripple/index.html b/design-system/about/what-is-ripple/index.html index 4f1b090665..f16c19087b 100644 --- a/design-system/about/what-is-ripple/index.html +++ b/design-system/about/what-is-ripple/index.html @@ -24,7 +24,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>What is Ripple?</h1><p class="rpl-type-p-large" data-v-3163c6df>Ripple is the digital design system of the Victorian government</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.<!--]--></p><p><!--[-->Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:<!--]--></p><ul><!--[--><li><!--[-->makes it easier for citizens to <strong><!--[-->find<!--]--></strong>, <strong><!--[-->understand<!--]--></strong> and <strong><!--[-->use<!--]--></strong> government information<!--]--></li><li><!--[-->makes creating Brand Victoria approved content, assets and sites easy<!--]--></li><li><!--[-->increases delivery speed for digital products and services.<!--]--></li><!--]--></ul><p><!--[-->Over 50 government websites use Ripple, including our main <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->vic.gov.au<!--]--><!--]--><!----><!--]--></a> platform. These sites attract millions of views per month.<!--]--></p><p><!--[--><img src="/assets/img/sites.png" alt="Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au" class="docs-center-img"><!--]--></p><h2 id="why-use-ripple"><a href="#why-use-ripple"><!--[-->Why use Ripple?<!--]--></a></h2><h3 id="ripple-solves-the-hard-problems-so-you-dont-have-to"><a href="#ripple-solves-the-hard-problems-so-you-dont-have-to"><!--[-->Ripple solves the hard problems so you don’t have to<!--]--></a></h3><p><!--[-->We spent the past 5 years refining Ripple based on user feedback to ensure it:<!--]--></p><ul><!--[--><li><!--[-->meets the publishing needs of government users<!--]--></li><li><!--[-->makes it easier for citizens to interact with government services.<!--]--></li><!--]--></ul><p><!--[-->Ripple users can be confident their site’s design and development is based on industry standards and best practices for:<!--]--></p><ul><!--[--><li><!--[-->accessibility<!--]--></li><li><!--[-->SEO<!--]--></li><li><!--[-->security<!--]--></li><li><!--[-->performance.<!--]--></li><!--]--></ul><p><!--[-->Users can easily navigate sites regardless of technical ability, location or device.<!--]--></p><p><!--[-->Designers and developers can create consistent digital experiences across Victorian Government sites.<!--]--></p><h3 id="ripple-gives-you-efficient-and-reusable-digital-resources"><a href="#ripple-gives-you-efficient-and-reusable-digital-resources"><!--[-->Ripple gives you efficient and reusable digital resources<!--]--></a></h3><p><!--[-->Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.<!--]--></p><p><!--[-->It provides a set of standards to manage design at scale, to:<!--]--></p><ul><!--[--><li><!--[-->reduce redundancy<!--]--></li><li><!--[-->create a shared language<!--]--></li><li><!--[-->provide visual consistency.<!--]--></li><!--]--></ul><p><!--[-->Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.<!--]--></p><h3 id="ripple-is-by-government-for-government"><a href="#ripple-is-by-government-for-government"><!--[-->Ripple is by government, for government<!--]--></a></h3><p><!--[-->The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.<!--]--></p><h2 id="who-can-use-ripple"><a href="#who-can-use-ripple"><!--[-->Who can use Ripple?<!--]--></a></h2><p><!--[-->Ripple is open to all departments or agencies that use Victorian Government branding. Visit the <a href="/design-system/about/whos-it-for" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Who's it for?<!--]--><!--]--><!----><!--]--></a> page for more information.<!--]--></p><p><!--[-->Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Usage<!--]--><!--]--><!----><!--]--></a> page for more information.<!--]--></p><h2 id="how-do-i-find-out-more"><a href="#how-do-i-find-out-more"><!--[-->How do I find out more?<!--]--></a></h2><p><!--[-->If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit <a href="https://www.vic.gov.au/work-sdp" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/work-sdp<!--]--><!--]--><!----><!--]--></a> or contact <a href="mailto:digital@dpc.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->digital@dpc.vic.gov.au<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->To find out more about the Single Digital Presence program, please visit <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/single-digital-presence<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/1.what-is-ripple.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/what-is-ripple/_payload.json">[{"state":1,"_errors":635,"serverRendered":306,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":302,"$sdd-globals":346,"$sdd-navigation":347},{"/design-system/about/what-is-ripple":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":297,"_id":298,"_source":299,"_file":300,"_extension":301},"/design-system/about/what-is-ripple","about",false,"","What is Ripple?","Ripple is the digital design system of the Victorian government","page",{"type":13,"children":14,"toc":286},"root",[15,23,28,70,86,96,103,110,115,128,133,156,161,166,172,177,182,200,205,211,216,222,235,247,253,274],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":22},"text","Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.",{"type":16,"tag":17,"props":24,"children":25},{},[26],{"type":21,"value":27},"Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:",{"type":16,"tag":29,"props":30,"children":31},"ul",{},[32,60,65],{"type":16,"tag":33,"props":34,"children":35},"li",{},[36,38,44,46,51,53,58],{"type":21,"value":37},"makes it easier for citizens to ",{"type":16,"tag":39,"props":40,"children":41},"strong",{},[42],{"type":21,"value":43},"find",{"type":21,"value":45},", ",{"type":16,"tag":39,"props":47,"children":48},{},[49],{"type":21,"value":50},"understand",{"type":21,"value":52}," and ",{"type":16,"tag":39,"props":54,"children":55},{},[56],{"type":21,"value":57},"use",{"type":21,"value":59}," government information",{"type":16,"tag":33,"props":61,"children":62},{},[63],{"type":21,"value":64},"makes creating Brand Victoria approved content, assets and sites easy",{"type":16,"tag":33,"props":66,"children":67},{},[68],{"type":21,"value":69},"increases delivery speed for digital products and services.",{"type":16,"tag":17,"props":71,"children":72},{},[73,75,84],{"type":21,"value":74},"Over 50 government websites use Ripple, including our main ",{"type":16,"tag":76,"props":77,"children":81},"a",{"href":78,"rel":79},"https://www.vic.gov.au",[80],"nofollow",[82],{"type":21,"value":83},"vic.gov.au",{"type":21,"value":85}," platform. These sites attract millions of views per month.",{"type":16,"tag":17,"props":87,"children":88},{},[89],{"type":16,"tag":90,"props":91,"children":95},"img",{"alt":92,"class":93,"src":94},"Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au","docs-center-img","/assets/img/sites.png",[],{"type":16,"tag":97,"props":98,"children":100},"h2",{"id":99},"why-use-ripple",[101],{"type":21,"value":102},"Why use Ripple?",{"type":16,"tag":104,"props":105,"children":107},"h3",{"id":106},"ripple-solves-the-hard-problems-so-you-dont-have-to",[108],{"type":21,"value":109},"Ripple solves the hard problems so you don’t have to",{"type":16,"tag":17,"props":111,"children":112},{},[113],{"type":21,"value":114},"We spent the past 5 years refining Ripple based on user feedback to ensure it:",{"type":16,"tag":29,"props":116,"children":117},{},[118,123],{"type":16,"tag":33,"props":119,"children":120},{},[121],{"type":21,"value":122},"meets the publishing needs of government users",{"type":16,"tag":33,"props":124,"children":125},{},[126],{"type":21,"value":127},"makes it easier for citizens to interact with government services.",{"type":16,"tag":17,"props":129,"children":130},{},[131],{"type":21,"value":132},"Ripple users can be confident their site’s design and development is based on industry standards and best practices for:",{"type":16,"tag":29,"props":134,"children":135},{},[136,141,146,151],{"type":16,"tag":33,"props":137,"children":138},{},[139],{"type":21,"value":140},"accessibility",{"type":16,"tag":33,"props":142,"children":143},{},[144],{"type":21,"value":145},"SEO",{"type":16,"tag":33,"props":147,"children":148},{},[149],{"type":21,"value":150},"security",{"type":16,"tag":33,"props":152,"children":153},{},[154],{"type":21,"value":155},"performance.",{"type":16,"tag":17,"props":157,"children":158},{},[159],{"type":21,"value":160},"Users can easily navigate sites regardless of technical ability, location or device.",{"type":16,"tag":17,"props":162,"children":163},{},[164],{"type":21,"value":165},"Designers and developers can create consistent digital experiences across Victorian Government sites.",{"type":16,"tag":104,"props":167,"children":169},{"id":168},"ripple-gives-you-efficient-and-reusable-digital-resources",[170],{"type":21,"value":171},"Ripple gives you efficient and reusable digital resources",{"type":16,"tag":17,"props":173,"children":174},{},[175],{"type":21,"value":176},"Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.",{"type":16,"tag":17,"props":178,"children":179},{},[180],{"type":21,"value":181},"It provides a set of standards to manage design at scale, to:",{"type":16,"tag":29,"props":183,"children":184},{},[185,190,195],{"type":16,"tag":33,"props":186,"children":187},{},[188],{"type":21,"value":189},"reduce redundancy",{"type":16,"tag":33,"props":191,"children":192},{},[193],{"type":21,"value":194},"create a shared language",{"type":16,"tag":33,"props":196,"children":197},{},[198],{"type":21,"value":199},"provide visual consistency.",{"type":16,"tag":17,"props":201,"children":202},{},[203],{"type":21,"value":204},"Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.",{"type":16,"tag":104,"props":206,"children":208},{"id":207},"ripple-is-by-government-for-government",[209],{"type":21,"value":210},"Ripple is by government, for government",{"type":16,"tag":17,"props":212,"children":213},{},[214],{"type":21,"value":215},"The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.",{"type":16,"tag":97,"props":217,"children":219},{"id":218},"who-can-use-ripple",[220],{"type":21,"value":221},"Who can use Ripple?",{"type":16,"tag":17,"props":223,"children":224},{},[225,227,233],{"type":21,"value":226},"Ripple is open to all departments or agencies that use Victorian Government branding. Visit the ",{"type":16,"tag":76,"props":228,"children":230},{"href":229},"/design-system/about/whos-it-for",[231],{"type":21,"value":232},"Who's it for?",{"type":21,"value":234}," page for more information.",{"type":16,"tag":17,"props":236,"children":237},{},[238,240,246],{"type":21,"value":239},"Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the ",{"type":16,"tag":76,"props":241,"children":243},{"href":242},"/design-system/develop/usage",[244],{"type":21,"value":245},"Usage",{"type":21,"value":234},{"type":16,"tag":97,"props":248,"children":250},{"id":249},"how-do-i-find-out-more",[251],{"type":21,"value":252},"How do I find out more?",{"type":16,"tag":17,"props":254,"children":255},{},[256,258,264,266,272],{"type":21,"value":257},"If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit ",{"type":16,"tag":76,"props":259,"children":262},{"href":260,"rel":261},"https://www.vic.gov.au/work-sdp",[80],[263],{"type":21,"value":260},{"type":21,"value":265}," or contact ",{"type":16,"tag":76,"props":267,"children":269},{"href":268},"mailto:digital@dpc.vic.gov.au",[270],{"type":21,"value":271},"digital@dpc.vic.gov.au",{"type":21,"value":273},".",{"type":16,"tag":17,"props":275,"children":276},{},[277,279,285],{"type":21,"value":278},"To find out more about the Single Digital Presence program, please visit ",{"type":16,"tag":76,"props":280,"children":283},{"href":281,"rel":282},"https://www.vic.gov.au/single-digital-presence",[80],[284],{"type":21,"value":281},{"type":21,"value":273},{"title":8,"searchDepth":287,"depth":287,"links":288},2,[289,295,296],{"id":99,"depth":287,"text":102,"children":290},[291,293,294],{"id":106,"depth":292,"text":109},3,{"id":168,"depth":292,"text":171},{"id":207,"depth":292,"text":210},{"id":218,"depth":287,"text":221},{"id":249,"depth":287,"text":252},"markdown","content:design-system:1.about:1.what-is-ripple.md","content","design-system/1.about/1.what-is-ripple.md","md",{"/design-system/about/what-is-ripple":303},[304,342],{"_path":305,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"_empty":306,"title":307,"description":308,"icon":309,"layout":310,"primaryCTA":311,"secondaryCTA":317,"modulesCTA":323,"quickLink1":327,"quickLink2":330,"quickLink3":333,"framework":337,"_type":297,"_id":340,"_source":299,"_file":341,"_extension":301},"/",true,"Ripple Design System","Ripple is the design system for Victorian government digital products","carbon:home","home",{"title":312,"description":313,"image":314,"url":316},"For Designers","Information for designers using Ripple to create brand Victoria compliant digital experiences.",{"src":315},"/assets/img/for-designers.png","/design-system/design/getting-started",{"title":318,"description":319,"image":320,"url":322},"For Developers","How to get started implementing Ripple UI components in digital products.",{"src":321},"/assets/img/for-developers.png","/design-system/develop/getting-started",{"title":324,"description":325,"url":326},"Modules","Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","/framework",{"title":328,"description":329,"url":5},"About Ripple","Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.",{"title":331,"description":332,"url":229},"Who should use it","Ripple is built by government for government to deliver services Victorians trust and rely on.",{"title":334,"description":335,"url":336},"Design principles","The guiding principles that are the foundation of the Ripple Design System.","/design-system/design/our-design-principles",{"title":338,"description":339,"url":326},"Ripple framework","Ripple framework contains the tools for building SDP sites using Ripple design system components.","content:1.index.md","1.index.md",{"_path":229,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":232,"description":343,"layout":11,"_type":297,"_id":344,"_source":299,"_file":345,"_extension":301},"Built by government, for government.","content:design-system:1.about:2.whos-it-for.md","design-system/1.about/2.whos-it-for.md",{},[348,349,588],{"title":307,"_path":305,"icon":309,"layout":310},{"title":350,"_path":351,"children":352},"Design System","/design-system",[353,365,379,406,440],{"title":354,"_path":355,"children":356},"About","/design-system/about",[357,358,359,362],{"title":9,"_path":5,"layout":11},{"title":232,"_path":229,"layout":11},{"title":360,"_path":361,"layout":11},"Support","/design-system/about/getting-support",{"title":363,"_path":364,"layout":11},"Contributing","/design-system/about/contributing",{"title":366,"_path":367,"children":368},"Design","/design-system/design",[369,371,373,376],{"title":370,"_path":316,"layout":11},"Getting started",{"title":372,"_path":336,"layout":11},"Our design principles",{"title":374,"_path":375,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":377,"_path":378,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":380,"_path":381,"children":382},"Develop","/design-system/develop",[383,384,386,389],{"title":370,"_path":322,"layout":11},{"title":363,"_path":385,"layout":11},"/design-system/develop/contributing",{"title":387,"_path":388,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":245,"_path":242,"children":390,"layout":11},[391,394,397,400,403],{"title":392,"_path":393,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":395,"_path":396,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":398,"_path":399,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":401,"_path":402,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":404,"_path":405,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":407,"_path":408,"children":409},"Styles","/design-system/styles",[410,413,416,419,422,425,428,431,434,437],{"title":411,"_path":412,"layout":11},"Colour","/design-system/styles/colour",{"title":414,"_path":415,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":417,"_path":418,"layout":11},"Grid","/design-system/styles/grid",{"title":420,"_path":421,"layout":11},"Icons","/design-system/styles/icons",{"title":423,"_path":424,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":426,"_path":427,"layout":11},"Layout","/design-system/styles/layout",{"title":429,"_path":430,"layout":11},"Logo","/design-system/styles/logo",{"title":432,"_path":433,"layout":11},"Motion","/design-system/styles/motion",{"title":435,"_path":436,"layout":11},"Spacing","/design-system/styles/spacing",{"title":438,"_path":439,"layout":11},"Typography","/design-system/styles/typography",{"title":441,"_path":442,"children":443},"Components","/design-system/components",[444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573,576,579,582,585],{"title":445,"_path":446,"layout":11},"Accordion","/design-system/components/accordion",{"title":448,"_path":449,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":451,"_path":452,"layout":11},"Alert","/design-system/components/alert",{"title":454,"_path":455,"layout":11},"Block quote","/design-system/components/block-quote",{"title":457,"_path":458,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":460,"_path":461,"layout":11},"Button","/design-system/components/button",{"title":463,"_path":464,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":466,"_path":467,"layout":11},"Callout","/design-system/components/callout",{"title":469,"_path":470,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":472,"_path":473,"layout":11},"Card","/design-system/components/card",{"title":475,"_path":476,"layout":11},"Carousel","/design-system/components/carousel",{"title":478,"_path":479,"layout":11},"Category grid","/design-system/components/category-grid",{"title":481,"_path":482,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":484,"_path":485,"layout":11},"Chip","/design-system/components/chip",{"title":487,"_path":488,"layout":11},"Contact us","/design-system/components/contact-us",{"title":490,"_path":491,"layout":11},"Date input","/design-system/components/date-input",{"title":493,"_path":494,"layout":11},"Detail list","/design-system/components/detail-list",{"title":496,"_path":497,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":499,"_path":500,"layout":11},"File","/design-system/components/file",{"title":502,"_path":503,"layout":11},"Footer","/design-system/components/footer",{"title":505,"_path":506,"layout":11},"Form alert","/design-system/components/form-alert",{"title":508,"_path":509,"layout":11},"Form","/design-system/components/form",{"title":511,"_path":512,"layout":11},"Header","/design-system/components/header",{"title":514,"_path":515,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":517,"_path":518,"layout":11},"Input field","/design-system/components/input-field",{"title":520,"_path":521,"layout":11},"Key dates","/design-system/components/key-dates",{"title":523,"_path":524,"layout":11},"Media embed","/design-system/components/media-embed",{"title":526,"_path":527,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":529,"_path":530,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":532,"_path":533,"layout":11},"Media","/design-system/components/media",{"title":535,"_path":536,"layout":11},"Option button","/design-system/components/option-button",{"title":538,"_path":539,"layout":11},"Page action","/design-system/components/page-action",{"title":541,"_path":542,"layout":11},"Pagination","/design-system/components/pagination",{"title":544,"_path":545,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":547,"_path":548,"layout":11},"Profile","/design-system/components/profile",{"title":550,"_path":551,"layout":11},"Radio button","/design-system/components/radio-button",{"title":553,"_path":554,"layout":11},"Related links","/design-system/components/related-links",{"title":556,"_path":557,"layout":11},"Results listing","/design-system/components/results-listing",{"title":559,"_path":560,"layout":11},"Search bar","/design-system/components/search-bar",{"title":562,"_path":563,"layout":11},"Skip link","/design-system/components/skip-link",{"title":565,"_path":566,"layout":11},"Social share","/design-system/components/social-share",{"title":568,"_path":569,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":571,"_path":572,"layout":11},"Table","/design-system/components/table",{"title":574,"_path":575,"layout":11},"Tabs","/design-system/components/tabs",{"title":577,"_path":578,"layout":11},"Tag","/design-system/components/tag",{"title":580,"_path":581,"layout":11},"Text area","/design-system/components/text-area",{"title":583,"_path":584,"layout":11},"Timeline","/design-system/components/timeline",{"title":586,"_path":587,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":589,"_path":326,"children":590,"layout":11},"Ripple Framework",[591,592,610,632],{"title":589,"_path":326,"layout":11},{"title":593,"_path":594,"children":595},"Key Concepts","/framework/key-concepts",[596,598,601,604,607],{"title":398,"_path":597,"layout":11},"/framework/key-concepts/nuxt",{"title":599,"_path":600,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":602,"_path":603,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":605,"_path":606,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":608,"_path":609,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":611,"_path":612,"children":613},"Guides","/framework/guides",[614,617,620,623,626,629],{"title":615,"_path":616,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":618,"_path":619,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":621,"_path":622,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":624,"_path":625,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":627,"_path":628,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":630,"_path":631,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":633,"_path":634,"layout":11},"Core modules","/framework/core-modules",["Reactive",636],{"module-navigation":637},null]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>What is Ripple?</h1><p class="rpl-type-p-large" data-v-3163c6df>Ripple is the digital design system of the Victorian government</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.<!--]--></p><p><!--[-->Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:<!--]--></p><ul><!--[--><li><!--[-->makes it easier for citizens to <strong><!--[-->find<!--]--></strong>, <strong><!--[-->understand<!--]--></strong> and <strong><!--[-->use<!--]--></strong> government information<!--]--></li><li><!--[-->makes creating Brand Victoria approved content, assets and sites easy<!--]--></li><li><!--[-->increases delivery speed for digital products and services.<!--]--></li><!--]--></ul><p><!--[-->Over 50 government websites use Ripple, including our main <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->vic.gov.au<!--]--><!--]--><!----><!--]--></a> platform. These sites attract millions of views per month.<!--]--></p><p><!--[--><img src="/assets/img/sites.png" alt="Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au" class="docs-center-img"><!--]--></p><h2 id="why-use-ripple"><a href="#why-use-ripple"><!--[-->Why use Ripple?<!--]--></a></h2><h3 id="ripple-solves-the-hard-problems-so-you-dont-have-to"><a href="#ripple-solves-the-hard-problems-so-you-dont-have-to"><!--[-->Ripple solves the hard problems so you don’t have to<!--]--></a></h3><p><!--[-->We spent the past 5 years refining Ripple based on user feedback to ensure it:<!--]--></p><ul><!--[--><li><!--[-->meets the publishing needs of government users<!--]--></li><li><!--[-->makes it easier for citizens to interact with government services.<!--]--></li><!--]--></ul><p><!--[-->Ripple users can be confident their site’s design and development is based on industry standards and best practices for:<!--]--></p><ul><!--[--><li><!--[-->accessibility<!--]--></li><li><!--[-->SEO<!--]--></li><li><!--[-->security<!--]--></li><li><!--[-->performance.<!--]--></li><!--]--></ul><p><!--[-->Users can easily navigate sites regardless of technical ability, location or device.<!--]--></p><p><!--[-->Designers and developers can create consistent digital experiences across Victorian Government sites.<!--]--></p><h3 id="ripple-gives-you-efficient-and-reusable-digital-resources"><a href="#ripple-gives-you-efficient-and-reusable-digital-resources"><!--[-->Ripple gives you efficient and reusable digital resources<!--]--></a></h3><p><!--[-->Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.<!--]--></p><p><!--[-->It provides a set of standards to manage design at scale, to:<!--]--></p><ul><!--[--><li><!--[-->reduce redundancy<!--]--></li><li><!--[-->create a shared language<!--]--></li><li><!--[-->provide visual consistency.<!--]--></li><!--]--></ul><p><!--[-->Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.<!--]--></p><h3 id="ripple-is-by-government-for-government"><a href="#ripple-is-by-government-for-government"><!--[-->Ripple is by government, for government<!--]--></a></h3><p><!--[-->The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.<!--]--></p><h2 id="who-can-use-ripple"><a href="#who-can-use-ripple"><!--[-->Who can use Ripple?<!--]--></a></h2><p><!--[-->Ripple is open to all departments or agencies that use Victorian Government branding. Visit the <a href="/design-system/about/whos-it-for" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Who's it for?<!--]--><!--]--><!----><!--]--></a> page for more information.<!--]--></p><p><!--[-->Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Usage<!--]--><!--]--><!----><!--]--></a> page for more information.<!--]--></p><h2 id="how-do-i-find-out-more"><a href="#how-do-i-find-out-more"><!--[-->How do I find out more?<!--]--></a></h2><p><!--[-->If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit <a href="https://www.vic.gov.au/work-sdp" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/work-sdp<!--]--><!--]--><!----><!--]--></a> or contact <a href="mailto:digital@dpc.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->digital@dpc.vic.gov.au<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->To find out more about the Single Digital Presence program, please visit <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/single-digital-presence<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/1.what-is-ripple.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/what-is-ripple/_payload.json">[{"state":1,"_errors":635,"serverRendered":306,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":302,"$sdd-globals":346,"$sdd-navigation":347},{"/design-system/about/what-is-ripple":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":297,"_id":298,"_source":299,"_file":300,"_extension":301},"/design-system/about/what-is-ripple","about",false,"","What is Ripple?","Ripple is the digital design system of the Victorian government","page",{"type":13,"children":14,"toc":286},"root",[15,23,28,70,86,96,103,110,115,128,133,156,161,166,172,177,182,200,205,211,216,222,235,247,253,274],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":22},"text","Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.",{"type":16,"tag":17,"props":24,"children":25},{},[26],{"type":21,"value":27},"Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:",{"type":16,"tag":29,"props":30,"children":31},"ul",{},[32,60,65],{"type":16,"tag":33,"props":34,"children":35},"li",{},[36,38,44,46,51,53,58],{"type":21,"value":37},"makes it easier for citizens to ",{"type":16,"tag":39,"props":40,"children":41},"strong",{},[42],{"type":21,"value":43},"find",{"type":21,"value":45},", ",{"type":16,"tag":39,"props":47,"children":48},{},[49],{"type":21,"value":50},"understand",{"type":21,"value":52}," and ",{"type":16,"tag":39,"props":54,"children":55},{},[56],{"type":21,"value":57},"use",{"type":21,"value":59}," government information",{"type":16,"tag":33,"props":61,"children":62},{},[63],{"type":21,"value":64},"makes creating Brand Victoria approved content, assets and sites easy",{"type":16,"tag":33,"props":66,"children":67},{},[68],{"type":21,"value":69},"increases delivery speed for digital products and services.",{"type":16,"tag":17,"props":71,"children":72},{},[73,75,84],{"type":21,"value":74},"Over 50 government websites use Ripple, including our main ",{"type":16,"tag":76,"props":77,"children":81},"a",{"href":78,"rel":79},"https://www.vic.gov.au",[80],"nofollow",[82],{"type":21,"value":83},"vic.gov.au",{"type":21,"value":85}," platform. These sites attract millions of views per month.",{"type":16,"tag":17,"props":87,"children":88},{},[89],{"type":16,"tag":90,"props":91,"children":95},"img",{"alt":92,"class":93,"src":94},"Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au","docs-center-img","/assets/img/sites.png",[],{"type":16,"tag":97,"props":98,"children":100},"h2",{"id":99},"why-use-ripple",[101],{"type":21,"value":102},"Why use Ripple?",{"type":16,"tag":104,"props":105,"children":107},"h3",{"id":106},"ripple-solves-the-hard-problems-so-you-dont-have-to",[108],{"type":21,"value":109},"Ripple solves the hard problems so you don’t have to",{"type":16,"tag":17,"props":111,"children":112},{},[113],{"type":21,"value":114},"We spent the past 5 years refining Ripple based on user feedback to ensure it:",{"type":16,"tag":29,"props":116,"children":117},{},[118,123],{"type":16,"tag":33,"props":119,"children":120},{},[121],{"type":21,"value":122},"meets the publishing needs of government users",{"type":16,"tag":33,"props":124,"children":125},{},[126],{"type":21,"value":127},"makes it easier for citizens to interact with government services.",{"type":16,"tag":17,"props":129,"children":130},{},[131],{"type":21,"value":132},"Ripple users can be confident their site’s design and development is based on industry standards and best practices for:",{"type":16,"tag":29,"props":134,"children":135},{},[136,141,146,151],{"type":16,"tag":33,"props":137,"children":138},{},[139],{"type":21,"value":140},"accessibility",{"type":16,"tag":33,"props":142,"children":143},{},[144],{"type":21,"value":145},"SEO",{"type":16,"tag":33,"props":147,"children":148},{},[149],{"type":21,"value":150},"security",{"type":16,"tag":33,"props":152,"children":153},{},[154],{"type":21,"value":155},"performance.",{"type":16,"tag":17,"props":157,"children":158},{},[159],{"type":21,"value":160},"Users can easily navigate sites regardless of technical ability, location or device.",{"type":16,"tag":17,"props":162,"children":163},{},[164],{"type":21,"value":165},"Designers and developers can create consistent digital experiences across Victorian Government sites.",{"type":16,"tag":104,"props":167,"children":169},{"id":168},"ripple-gives-you-efficient-and-reusable-digital-resources",[170],{"type":21,"value":171},"Ripple gives you efficient and reusable digital resources",{"type":16,"tag":17,"props":173,"children":174},{},[175],{"type":21,"value":176},"Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.",{"type":16,"tag":17,"props":178,"children":179},{},[180],{"type":21,"value":181},"It provides a set of standards to manage design at scale, to:",{"type":16,"tag":29,"props":183,"children":184},{},[185,190,195],{"type":16,"tag":33,"props":186,"children":187},{},[188],{"type":21,"value":189},"reduce redundancy",{"type":16,"tag":33,"props":191,"children":192},{},[193],{"type":21,"value":194},"create a shared language",{"type":16,"tag":33,"props":196,"children":197},{},[198],{"type":21,"value":199},"provide visual consistency.",{"type":16,"tag":17,"props":201,"children":202},{},[203],{"type":21,"value":204},"Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.",{"type":16,"tag":104,"props":206,"children":208},{"id":207},"ripple-is-by-government-for-government",[209],{"type":21,"value":210},"Ripple is by government, for government",{"type":16,"tag":17,"props":212,"children":213},{},[214],{"type":21,"value":215},"The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.",{"type":16,"tag":97,"props":217,"children":219},{"id":218},"who-can-use-ripple",[220],{"type":21,"value":221},"Who can use Ripple?",{"type":16,"tag":17,"props":223,"children":224},{},[225,227,233],{"type":21,"value":226},"Ripple is open to all departments or agencies that use Victorian Government branding. Visit the ",{"type":16,"tag":76,"props":228,"children":230},{"href":229},"/design-system/about/whos-it-for",[231],{"type":21,"value":232},"Who's it for?",{"type":21,"value":234}," page for more information.",{"type":16,"tag":17,"props":236,"children":237},{},[238,240,246],{"type":21,"value":239},"Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the ",{"type":16,"tag":76,"props":241,"children":243},{"href":242},"/design-system/develop/usage",[244],{"type":21,"value":245},"Usage",{"type":21,"value":234},{"type":16,"tag":97,"props":248,"children":250},{"id":249},"how-do-i-find-out-more",[251],{"type":21,"value":252},"How do I find out more?",{"type":16,"tag":17,"props":254,"children":255},{},[256,258,264,266,272],{"type":21,"value":257},"If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit ",{"type":16,"tag":76,"props":259,"children":262},{"href":260,"rel":261},"https://www.vic.gov.au/work-sdp",[80],[263],{"type":21,"value":260},{"type":21,"value":265}," or contact ",{"type":16,"tag":76,"props":267,"children":269},{"href":268},"mailto:digital@dpc.vic.gov.au",[270],{"type":21,"value":271},"digital@dpc.vic.gov.au",{"type":21,"value":273},".",{"type":16,"tag":17,"props":275,"children":276},{},[277,279,285],{"type":21,"value":278},"To find out more about the Single Digital Presence program, please visit ",{"type":16,"tag":76,"props":280,"children":283},{"href":281,"rel":282},"https://www.vic.gov.au/single-digital-presence",[80],[284],{"type":21,"value":281},{"type":21,"value":273},{"title":8,"searchDepth":287,"depth":287,"links":288},2,[289,295,296],{"id":99,"depth":287,"text":102,"children":290},[291,293,294],{"id":106,"depth":292,"text":109},3,{"id":168,"depth":292,"text":171},{"id":207,"depth":292,"text":210},{"id":218,"depth":287,"text":221},{"id":249,"depth":287,"text":252},"markdown","content:design-system:1.about:1.what-is-ripple.md","content","design-system/1.about/1.what-is-ripple.md","md",{"/design-system/about/what-is-ripple":303},[304,342],{"_path":305,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"_empty":306,"title":307,"description":308,"icon":309,"layout":310,"primaryCTA":311,"secondaryCTA":317,"modulesCTA":323,"quickLink1":327,"quickLink2":330,"quickLink3":333,"framework":337,"_type":297,"_id":340,"_source":299,"_file":341,"_extension":301},"/",true,"Ripple Design System","Ripple is the design system for Victorian government digital products","carbon:home","home",{"title":312,"description":313,"image":314,"url":316},"For Designers","Information for designers using Ripple to create brand Victoria compliant digital experiences.",{"src":315},"/assets/img/for-designers.png","/design-system/design/getting-started",{"title":318,"description":319,"image":320,"url":322},"For Developers","How to get started implementing Ripple UI components in digital products.",{"src":321},"/assets/img/for-developers.png","/design-system/develop/getting-started",{"title":324,"description":325,"url":326},"Modules","Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","/framework",{"title":328,"description":329,"url":5},"About Ripple","Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.",{"title":331,"description":332,"url":229},"Who should use it","Ripple is built by government for government to deliver services Victorians trust and rely on.",{"title":334,"description":335,"url":336},"Design principles","The guiding principles that are the foundation of the Ripple Design System.","/design-system/design/our-design-principles",{"title":338,"description":339,"url":326},"Ripple framework","Ripple framework contains the tools for building SDP sites using Ripple design system components.","content:1.index.md","1.index.md",{"_path":229,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":232,"description":343,"layout":11,"_type":297,"_id":344,"_source":299,"_file":345,"_extension":301},"Built by government, for government.","content:design-system:1.about:2.whos-it-for.md","design-system/1.about/2.whos-it-for.md",{},[348,349,588],{"title":307,"_path":305,"icon":309,"layout":310},{"title":350,"_path":351,"children":352},"Design System","/design-system",[353,365,379,406,440],{"title":354,"_path":355,"children":356},"About","/design-system/about",[357,358,359,362],{"title":9,"_path":5,"layout":11},{"title":232,"_path":229,"layout":11},{"title":360,"_path":361,"layout":11},"Support","/design-system/about/getting-support",{"title":363,"_path":364,"layout":11},"Contributing","/design-system/about/contributing",{"title":366,"_path":367,"children":368},"Design","/design-system/design",[369,371,373,376],{"title":370,"_path":316,"layout":11},"Getting started",{"title":372,"_path":336,"layout":11},"Our design principles",{"title":374,"_path":375,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":377,"_path":378,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":380,"_path":381,"children":382},"Develop","/design-system/develop",[383,384,386,389],{"title":370,"_path":322,"layout":11},{"title":363,"_path":385,"layout":11},"/design-system/develop/contributing",{"title":387,"_path":388,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":245,"_path":242,"children":390,"layout":11},[391,394,397,400,403],{"title":392,"_path":393,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":395,"_path":396,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":398,"_path":399,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":401,"_path":402,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":404,"_path":405,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":407,"_path":408,"children":409},"Styles","/design-system/styles",[410,413,416,419,422,425,428,431,434,437],{"title":411,"_path":412,"layout":11},"Colour","/design-system/styles/colour",{"title":414,"_path":415,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":417,"_path":418,"layout":11},"Grid","/design-system/styles/grid",{"title":420,"_path":421,"layout":11},"Icons","/design-system/styles/icons",{"title":423,"_path":424,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":426,"_path":427,"layout":11},"Layout","/design-system/styles/layout",{"title":429,"_path":430,"layout":11},"Logo","/design-system/styles/logo",{"title":432,"_path":433,"layout":11},"Motion","/design-system/styles/motion",{"title":435,"_path":436,"layout":11},"Spacing","/design-system/styles/spacing",{"title":438,"_path":439,"layout":11},"Typography","/design-system/styles/typography",{"title":441,"_path":442,"children":443},"Components","/design-system/components",[444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573,576,579,582,585],{"title":445,"_path":446,"layout":11},"Accordion","/design-system/components/accordion",{"title":448,"_path":449,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":451,"_path":452,"layout":11},"Alert","/design-system/components/alert",{"title":454,"_path":455,"layout":11},"Block quote","/design-system/components/block-quote",{"title":457,"_path":458,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":460,"_path":461,"layout":11},"Button","/design-system/components/button",{"title":463,"_path":464,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":466,"_path":467,"layout":11},"Callout","/design-system/components/callout",{"title":469,"_path":470,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":472,"_path":473,"layout":11},"Card","/design-system/components/card",{"title":475,"_path":476,"layout":11},"Carousel","/design-system/components/carousel",{"title":478,"_path":479,"layout":11},"Category grid","/design-system/components/category-grid",{"title":481,"_path":482,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":484,"_path":485,"layout":11},"Chip","/design-system/components/chip",{"title":487,"_path":488,"layout":11},"Contact us","/design-system/components/contact-us",{"title":490,"_path":491,"layout":11},"Date input","/design-system/components/date-input",{"title":493,"_path":494,"layout":11},"Detail list","/design-system/components/detail-list",{"title":496,"_path":497,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":499,"_path":500,"layout":11},"File","/design-system/components/file",{"title":502,"_path":503,"layout":11},"Footer","/design-system/components/footer",{"title":505,"_path":506,"layout":11},"Form alert","/design-system/components/form-alert",{"title":508,"_path":509,"layout":11},"Form","/design-system/components/form",{"title":511,"_path":512,"layout":11},"Header","/design-system/components/header",{"title":514,"_path":515,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":517,"_path":518,"layout":11},"Input field","/design-system/components/input-field",{"title":520,"_path":521,"layout":11},"Key dates","/design-system/components/key-dates",{"title":523,"_path":524,"layout":11},"Media embed","/design-system/components/media-embed",{"title":526,"_path":527,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":529,"_path":530,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":532,"_path":533,"layout":11},"Media","/design-system/components/media",{"title":535,"_path":536,"layout":11},"Option button","/design-system/components/option-button",{"title":538,"_path":539,"layout":11},"Page action","/design-system/components/page-action",{"title":541,"_path":542,"layout":11},"Pagination","/design-system/components/pagination",{"title":544,"_path":545,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":547,"_path":548,"layout":11},"Profile","/design-system/components/profile",{"title":550,"_path":551,"layout":11},"Radio button","/design-system/components/radio-button",{"title":553,"_path":554,"layout":11},"Related links","/design-system/components/related-links",{"title":556,"_path":557,"layout":11},"Results listing","/design-system/components/results-listing",{"title":559,"_path":560,"layout":11},"Search bar","/design-system/components/search-bar",{"title":562,"_path":563,"layout":11},"Skip link","/design-system/components/skip-link",{"title":565,"_path":566,"layout":11},"Social share","/design-system/components/social-share",{"title":568,"_path":569,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":571,"_path":572,"layout":11},"Table","/design-system/components/table",{"title":574,"_path":575,"layout":11},"Tabs","/design-system/components/tabs",{"title":577,"_path":578,"layout":11},"Tag","/design-system/components/tag",{"title":580,"_path":581,"layout":11},"Text area","/design-system/components/text-area",{"title":583,"_path":584,"layout":11},"Timeline","/design-system/components/timeline",{"title":586,"_path":587,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":589,"_path":326,"children":590,"layout":11},"Ripple Framework",[591,592,610,632],{"title":589,"_path":326,"layout":11},{"title":593,"_path":594,"children":595},"Key Concepts","/framework/key-concepts",[596,598,601,604,607],{"title":398,"_path":597,"layout":11},"/framework/key-concepts/nuxt",{"title":599,"_path":600,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":602,"_path":603,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":605,"_path":606,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":608,"_path":609,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":611,"_path":612,"children":613},"Guides","/framework/guides",[614,617,620,623,626,629],{"title":615,"_path":616,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":618,"_path":619,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":621,"_path":622,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":624,"_path":625,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":627,"_path":628,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":630,"_path":631,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":633,"_path":634,"layout":11},"Core modules","/framework/core-modules",["Reactive",636],{"module-navigation":637},null]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/about/whos-it-for/index.html b/design-system/about/whos-it-for/index.html index a4054e3a45..a3c24a0a22 100644 --- a/design-system/about/whos-it-for/index.html +++ b/design-system/about/whos-it-for/index.html @@ -24,7 +24,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Who's it for?</h1><p class="rpl-type-p-large" data-v-3163c6df>Built by government, for government.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="who-can-use-ripple"><a href="#who-can-use-ripple"><!--[-->Who can use Ripple?<!--]--></a></h2><p><!--[-->Ripple is available to all departments and agencies that use Victorian Government branding.<!--]--></p><ul><!--[--><li><!--[--><strong><!--[-->Designers<!--]--></strong> can easily and quickly create wireframes, high-fidelity designs and prototypes.<!--]--></li><li><!--[--><strong><!--[-->Developers<!--]--></strong> can access technical specifications to create pixel-perfect code.<!--]--></li><li><!--[--><strong><!--[-->Content creators<!--]--></strong> can design page concepts, knowing their layouts will accurately reflect the finished product.<!--]--></li><li><!--[--><strong><!--[-->Product owners<!--]--></strong> and stakeholders can review designs and provide feedback.<!--]--></li><!--]--></ul><h2 id="what-should-i-use-ripple-for"><a href="#what-should-i-use-ripple-for"><!--[-->What should I use Ripple for?<!--]--></a></h2><p><!--[-->Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> platform.<!--]--></p><p><!--[-->Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way.<!--]--></p><p><!--[-->Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision.<!--]--></p><p><!--[-->It also means Ripple is not a general purpose design system for use outside of Brand Victoria.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand.<!--]--></p><!--]--></blockquote><h2 id="how-do-i-use-ripple"><a href="#how-do-i-use-ripple"><!--[-->How do I use Ripple?<!--]--></a></h2><p><!--[-->Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content.<!--]--></p><p><!--[-->It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:<!--]--></p><ul><!--[--><li><!--[-->building your own components<!--]--></li><li><!--[-->referencing the Ripple styles<!--]--></li><li><!--[-->importing the Ripple components.<!--]--></li><!--]--></ul><p><!--[-->Visit the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Usage<!--]--><!--]--><!----><!--]--></a> page for instructions.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/2.whos-it-for.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/whos-it-for/_payload.json">[{"state":1,"_errors":489,"serverRendered":492,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":180,"$sdd-globals":194,"$sdd-navigation":195},{"/design-system/about/whos-it-for":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":175,"_id":176,"_source":177,"_file":178,"_extension":179},"/design-system/about/whos-it-for","about",false,"","Who's it for?","Built by government, for government.","page",{"type":13,"children":14,"toc":169},"root",[15,24,30,76,82,98,103,108,113,122,128,133,138,156],{"type":16,"tag":17,"props":18,"children":20},"element","h2",{"id":19},"who-can-use-ripple",[21],{"type":22,"value":23},"text","Who can use Ripple?",{"type":16,"tag":25,"props":26,"children":27},"p",{},[28],{"type":22,"value":29},"Ripple is available to all departments and agencies that use Victorian Government branding.",{"type":16,"tag":31,"props":32,"children":33},"ul",{},[34,46,56,66],{"type":16,"tag":35,"props":36,"children":37},"li",{},[38,44],{"type":16,"tag":39,"props":40,"children":41},"strong",{},[42],{"type":22,"value":43},"Designers",{"type":22,"value":45}," can easily and quickly create wireframes, high-fidelity designs and prototypes.",{"type":16,"tag":35,"props":47,"children":48},{},[49,54],{"type":16,"tag":39,"props":50,"children":51},{},[52],{"type":22,"value":53},"Developers",{"type":22,"value":55}," can access technical specifications to create pixel-perfect code.",{"type":16,"tag":35,"props":57,"children":58},{},[59,64],{"type":16,"tag":39,"props":60,"children":61},{},[62],{"type":22,"value":63},"Content creators",{"type":22,"value":65}," can design page concepts, knowing their layouts will accurately reflect the finished product.",{"type":16,"tag":35,"props":67,"children":68},{},[69,74],{"type":16,"tag":39,"props":70,"children":71},{},[72],{"type":22,"value":73},"Product owners",{"type":22,"value":75}," and stakeholders can review designs and provide feedback.",{"type":16,"tag":17,"props":77,"children":79},{"id":78},"what-should-i-use-ripple-for",[80],{"type":22,"value":81},"What should I use Ripple for?",{"type":16,"tag":25,"props":83,"children":84},{},[85,87,96],{"type":22,"value":86},"Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the ",{"type":16,"tag":88,"props":89,"children":93},"a",{"href":90,"rel":91},"https://www.vic.gov.au/single-digital-presence",[92],"nofollow",[94],{"type":22,"value":95},"Single Digital Presence (SDP)",{"type":22,"value":97}," platform.",{"type":16,"tag":25,"props":99,"children":100},{},[101],{"type":22,"value":102},"Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way.",{"type":16,"tag":25,"props":104,"children":105},{},[106],{"type":22,"value":107},"Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision.",{"type":16,"tag":25,"props":109,"children":110},{},[111],{"type":22,"value":112},"It also means Ripple is not a general purpose design system for use outside of Brand Victoria.",{"type":16,"tag":114,"props":115,"children":116},"blockquote",{},[117],{"type":16,"tag":25,"props":118,"children":119},{},[120],{"type":22,"value":121},"Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand.",{"type":16,"tag":17,"props":123,"children":125},{"id":124},"how-do-i-use-ripple",[126],{"type":22,"value":127},"How do I use Ripple?",{"type":16,"tag":25,"props":129,"children":130},{},[131],{"type":22,"value":132},"Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content.",{"type":16,"tag":25,"props":134,"children":135},{},[136],{"type":22,"value":137},"It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:",{"type":16,"tag":31,"props":139,"children":140},{},[141,146,151],{"type":16,"tag":35,"props":142,"children":143},{},[144],{"type":22,"value":145},"building your own components",{"type":16,"tag":35,"props":147,"children":148},{},[149],{"type":22,"value":150},"referencing the Ripple styles",{"type":16,"tag":35,"props":152,"children":153},{},[154],{"type":22,"value":155},"importing the Ripple components.",{"type":16,"tag":25,"props":157,"children":158},{},[159,161,167],{"type":22,"value":160},"Visit the ",{"type":16,"tag":88,"props":162,"children":164},{"href":163},"/design-system/develop/usage",[165],{"type":22,"value":166},"Usage",{"type":22,"value":168}," page for instructions.",{"title":8,"searchDepth":170,"depth":170,"links":171},2,[172,173,174],{"id":19,"depth":170,"text":23},{"id":78,"depth":170,"text":81},{"id":124,"depth":170,"text":127},"markdown","content:design-system:1.about:2.whos-it-for.md","content","design-system/1.about/2.whos-it-for.md","md",{"/design-system/about/whos-it-for":181},[182,188],{"_path":183,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":184,"description":185,"layout":11,"_type":175,"_id":186,"_source":177,"_file":187,"_extension":179},"/design-system/about/what-is-ripple","What is Ripple?","Ripple is the digital design system of the Victorian government","content:design-system:1.about:1.what-is-ripple.md","design-system/1.about/1.what-is-ripple.md",{"_path":189,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":190,"description":191,"layout":11,"_type":175,"_id":192,"_source":177,"_file":193,"_extension":179},"/design-system/about/getting-support","Support","How to get help","content:design-system:1.about:3.getting-support.md","design-system/1.about/3.getting-support.md",{},[196,201,441],{"title":197,"_path":198,"icon":199,"layout":200},"Ripple Design System","/","carbon:home","home",{"title":202,"_path":203,"children":204},"Design System","/design-system",[205,215,231,259,293],{"title":206,"_path":207,"children":208},"About","/design-system/about",[209,210,211,212],{"title":184,"_path":183,"layout":11},{"title":9,"_path":5,"layout":11},{"title":190,"_path":189,"layout":11},{"title":213,"_path":214,"layout":11},"Contributing","/design-system/about/contributing",{"title":216,"_path":217,"children":218},"Design","/design-system/design",[219,222,225,228],{"title":220,"_path":221,"layout":11},"Getting started","/design-system/design/getting-started",{"title":223,"_path":224,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":226,"_path":227,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":229,"_path":230,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":232,"_path":233,"children":234},"Develop","/design-system/develop",[235,237,239,242],{"title":220,"_path":236,"layout":11},"/design-system/develop/getting-started",{"title":213,"_path":238,"layout":11},"/design-system/develop/contributing",{"title":240,"_path":241,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":166,"_path":163,"children":243,"layout":11},[244,247,250,253,256],{"title":245,"_path":246,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":248,"_path":249,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":251,"_path":252,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":254,"_path":255,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":257,"_path":258,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":260,"_path":261,"children":262},"Styles","/design-system/styles",[263,266,269,272,275,278,281,284,287,290],{"title":264,"_path":265,"layout":11},"Colour","/design-system/styles/colour",{"title":267,"_path":268,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":270,"_path":271,"layout":11},"Grid","/design-system/styles/grid",{"title":273,"_path":274,"layout":11},"Icons","/design-system/styles/icons",{"title":276,"_path":277,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":279,"_path":280,"layout":11},"Layout","/design-system/styles/layout",{"title":282,"_path":283,"layout":11},"Logo","/design-system/styles/logo",{"title":285,"_path":286,"layout":11},"Motion","/design-system/styles/motion",{"title":288,"_path":289,"layout":11},"Spacing","/design-system/styles/spacing",{"title":291,"_path":292,"layout":11},"Typography","/design-system/styles/typography",{"title":294,"_path":295,"children":296},"Components","/design-system/components",[297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438],{"title":298,"_path":299,"layout":11},"Accordion","/design-system/components/accordion",{"title":301,"_path":302,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":304,"_path":305,"layout":11},"Alert","/design-system/components/alert",{"title":307,"_path":308,"layout":11},"Block quote","/design-system/components/block-quote",{"title":310,"_path":311,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":313,"_path":314,"layout":11},"Button","/design-system/components/button",{"title":316,"_path":317,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":319,"_path":320,"layout":11},"Callout","/design-system/components/callout",{"title":322,"_path":323,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":325,"_path":326,"layout":11},"Card","/design-system/components/card",{"title":328,"_path":329,"layout":11},"Carousel","/design-system/components/carousel",{"title":331,"_path":332,"layout":11},"Category grid","/design-system/components/category-grid",{"title":334,"_path":335,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":337,"_path":338,"layout":11},"Chip","/design-system/components/chip",{"title":340,"_path":341,"layout":11},"Contact us","/design-system/components/contact-us",{"title":343,"_path":344,"layout":11},"Date input","/design-system/components/date-input",{"title":346,"_path":347,"layout":11},"Detail list","/design-system/components/detail-list",{"title":349,"_path":350,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":352,"_path":353,"layout":11},"File","/design-system/components/file",{"title":355,"_path":356,"layout":11},"Footer","/design-system/components/footer",{"title":358,"_path":359,"layout":11},"Form alert","/design-system/components/form-alert",{"title":361,"_path":362,"layout":11},"Form","/design-system/components/form",{"title":364,"_path":365,"layout":11},"Header","/design-system/components/header",{"title":367,"_path":368,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":370,"_path":371,"layout":11},"Input field","/design-system/components/input-field",{"title":373,"_path":374,"layout":11},"Key dates","/design-system/components/key-dates",{"title":376,"_path":377,"layout":11},"Media embed","/design-system/components/media-embed",{"title":379,"_path":380,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":382,"_path":383,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":385,"_path":386,"layout":11},"Media","/design-system/components/media",{"title":388,"_path":389,"layout":11},"Option button","/design-system/components/option-button",{"title":391,"_path":392,"layout":11},"Page action","/design-system/components/page-action",{"title":394,"_path":395,"layout":11},"Pagination","/design-system/components/pagination",{"title":397,"_path":398,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":400,"_path":401,"layout":11},"Profile","/design-system/components/profile",{"title":403,"_path":404,"layout":11},"Radio button","/design-system/components/radio-button",{"title":406,"_path":407,"layout":11},"Related links","/design-system/components/related-links",{"title":409,"_path":410,"layout":11},"Results listing","/design-system/components/results-listing",{"title":412,"_path":413,"layout":11},"Search bar","/design-system/components/search-bar",{"title":415,"_path":416,"layout":11},"Skip link","/design-system/components/skip-link",{"title":418,"_path":419,"layout":11},"Social share","/design-system/components/social-share",{"title":421,"_path":422,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":424,"_path":425,"layout":11},"Table","/design-system/components/table",{"title":427,"_path":428,"layout":11},"Tabs","/design-system/components/tabs",{"title":430,"_path":431,"layout":11},"Tag","/design-system/components/tag",{"title":433,"_path":434,"layout":11},"Text area","/design-system/components/text-area",{"title":436,"_path":437,"layout":11},"Timeline","/design-system/components/timeline",{"title":439,"_path":440,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":442,"_path":443,"children":444,"layout":11},"Ripple Framework","/framework",[445,446,464,486],{"title":442,"_path":443,"layout":11},{"title":447,"_path":448,"children":449},"Key Concepts","/framework/key-concepts",[450,452,455,458,461],{"title":251,"_path":451,"layout":11},"/framework/key-concepts/nuxt",{"title":453,"_path":454,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":456,"_path":457,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":459,"_path":460,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":462,"_path":463,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,480,483],{"title":469,"_path":470,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":479,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":481,"_path":482,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":484,"_path":485,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":487,"_path":488,"layout":11},"Core modules","/framework/core-modules",["Reactive",490],{"module-navigation":491},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Who's it for?</h1><p class="rpl-type-p-large" data-v-3163c6df>Built by government, for government.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="who-can-use-ripple"><a href="#who-can-use-ripple"><!--[-->Who can use Ripple?<!--]--></a></h2><p><!--[-->Ripple is available to all departments and agencies that use Victorian Government branding.<!--]--></p><ul><!--[--><li><!--[--><strong><!--[-->Designers<!--]--></strong> can easily and quickly create wireframes, high-fidelity designs and prototypes.<!--]--></li><li><!--[--><strong><!--[-->Developers<!--]--></strong> can access technical specifications to create pixel-perfect code.<!--]--></li><li><!--[--><strong><!--[-->Content creators<!--]--></strong> can design page concepts, knowing their layouts will accurately reflect the finished product.<!--]--></li><li><!--[--><strong><!--[-->Product owners<!--]--></strong> and stakeholders can review designs and provide feedback.<!--]--></li><!--]--></ul><h2 id="what-should-i-use-ripple-for"><a href="#what-should-i-use-ripple-for"><!--[-->What should I use Ripple for?<!--]--></a></h2><p><!--[-->Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> platform.<!--]--></p><p><!--[-->Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way.<!--]--></p><p><!--[-->Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision.<!--]--></p><p><!--[-->It also means Ripple is not a general purpose design system for use outside of Brand Victoria.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand.<!--]--></p><!--]--></blockquote><h2 id="how-do-i-use-ripple"><a href="#how-do-i-use-ripple"><!--[-->How do I use Ripple?<!--]--></a></h2><p><!--[-->Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content.<!--]--></p><p><!--[-->It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:<!--]--></p><ul><!--[--><li><!--[-->building your own components<!--]--></li><li><!--[-->referencing the Ripple styles<!--]--></li><li><!--[-->importing the Ripple components.<!--]--></li><!--]--></ul><p><!--[-->Visit the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Usage<!--]--><!--]--><!----><!--]--></a> page for instructions.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/2.whos-it-for.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/whos-it-for/_payload.json">[{"state":1,"_errors":489,"serverRendered":492,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":180,"$sdd-globals":194,"$sdd-navigation":195},{"/design-system/about/whos-it-for":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":175,"_id":176,"_source":177,"_file":178,"_extension":179},"/design-system/about/whos-it-for","about",false,"","Who's it for?","Built by government, for government.","page",{"type":13,"children":14,"toc":169},"root",[15,24,30,76,82,98,103,108,113,122,128,133,138,156],{"type":16,"tag":17,"props":18,"children":20},"element","h2",{"id":19},"who-can-use-ripple",[21],{"type":22,"value":23},"text","Who can use Ripple?",{"type":16,"tag":25,"props":26,"children":27},"p",{},[28],{"type":22,"value":29},"Ripple is available to all departments and agencies that use Victorian Government branding.",{"type":16,"tag":31,"props":32,"children":33},"ul",{},[34,46,56,66],{"type":16,"tag":35,"props":36,"children":37},"li",{},[38,44],{"type":16,"tag":39,"props":40,"children":41},"strong",{},[42],{"type":22,"value":43},"Designers",{"type":22,"value":45}," can easily and quickly create wireframes, high-fidelity designs and prototypes.",{"type":16,"tag":35,"props":47,"children":48},{},[49,54],{"type":16,"tag":39,"props":50,"children":51},{},[52],{"type":22,"value":53},"Developers",{"type":22,"value":55}," can access technical specifications to create pixel-perfect code.",{"type":16,"tag":35,"props":57,"children":58},{},[59,64],{"type":16,"tag":39,"props":60,"children":61},{},[62],{"type":22,"value":63},"Content creators",{"type":22,"value":65}," can design page concepts, knowing their layouts will accurately reflect the finished product.",{"type":16,"tag":35,"props":67,"children":68},{},[69,74],{"type":16,"tag":39,"props":70,"children":71},{},[72],{"type":22,"value":73},"Product owners",{"type":22,"value":75}," and stakeholders can review designs and provide feedback.",{"type":16,"tag":17,"props":77,"children":79},{"id":78},"what-should-i-use-ripple-for",[80],{"type":22,"value":81},"What should I use Ripple for?",{"type":16,"tag":25,"props":83,"children":84},{},[85,87,96],{"type":22,"value":86},"Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the ",{"type":16,"tag":88,"props":89,"children":93},"a",{"href":90,"rel":91},"https://www.vic.gov.au/single-digital-presence",[92],"nofollow",[94],{"type":22,"value":95},"Single Digital Presence (SDP)",{"type":22,"value":97}," platform.",{"type":16,"tag":25,"props":99,"children":100},{},[101],{"type":22,"value":102},"Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way.",{"type":16,"tag":25,"props":104,"children":105},{},[106],{"type":22,"value":107},"Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision.",{"type":16,"tag":25,"props":109,"children":110},{},[111],{"type":22,"value":112},"It also means Ripple is not a general purpose design system for use outside of Brand Victoria.",{"type":16,"tag":114,"props":115,"children":116},"blockquote",{},[117],{"type":16,"tag":25,"props":118,"children":119},{},[120],{"type":22,"value":121},"Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand.",{"type":16,"tag":17,"props":123,"children":125},{"id":124},"how-do-i-use-ripple",[126],{"type":22,"value":127},"How do I use Ripple?",{"type":16,"tag":25,"props":129,"children":130},{},[131],{"type":22,"value":132},"Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content.",{"type":16,"tag":25,"props":134,"children":135},{},[136],{"type":22,"value":137},"It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:",{"type":16,"tag":31,"props":139,"children":140},{},[141,146,151],{"type":16,"tag":35,"props":142,"children":143},{},[144],{"type":22,"value":145},"building your own components",{"type":16,"tag":35,"props":147,"children":148},{},[149],{"type":22,"value":150},"referencing the Ripple styles",{"type":16,"tag":35,"props":152,"children":153},{},[154],{"type":22,"value":155},"importing the Ripple components.",{"type":16,"tag":25,"props":157,"children":158},{},[159,161,167],{"type":22,"value":160},"Visit the ",{"type":16,"tag":88,"props":162,"children":164},{"href":163},"/design-system/develop/usage",[165],{"type":22,"value":166},"Usage",{"type":22,"value":168}," page for instructions.",{"title":8,"searchDepth":170,"depth":170,"links":171},2,[172,173,174],{"id":19,"depth":170,"text":23},{"id":78,"depth":170,"text":81},{"id":124,"depth":170,"text":127},"markdown","content:design-system:1.about:2.whos-it-for.md","content","design-system/1.about/2.whos-it-for.md","md",{"/design-system/about/whos-it-for":181},[182,188],{"_path":183,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":184,"description":185,"layout":11,"_type":175,"_id":186,"_source":177,"_file":187,"_extension":179},"/design-system/about/what-is-ripple","What is Ripple?","Ripple is the digital design system of the Victorian government","content:design-system:1.about:1.what-is-ripple.md","design-system/1.about/1.what-is-ripple.md",{"_path":189,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":190,"description":191,"layout":11,"_type":175,"_id":192,"_source":177,"_file":193,"_extension":179},"/design-system/about/getting-support","Support","How to get help","content:design-system:1.about:3.getting-support.md","design-system/1.about/3.getting-support.md",{},[196,201,441],{"title":197,"_path":198,"icon":199,"layout":200},"Ripple Design System","/","carbon:home","home",{"title":202,"_path":203,"children":204},"Design System","/design-system",[205,215,231,259,293],{"title":206,"_path":207,"children":208},"About","/design-system/about",[209,210,211,212],{"title":184,"_path":183,"layout":11},{"title":9,"_path":5,"layout":11},{"title":190,"_path":189,"layout":11},{"title":213,"_path":214,"layout":11},"Contributing","/design-system/about/contributing",{"title":216,"_path":217,"children":218},"Design","/design-system/design",[219,222,225,228],{"title":220,"_path":221,"layout":11},"Getting started","/design-system/design/getting-started",{"title":223,"_path":224,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":226,"_path":227,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":229,"_path":230,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":232,"_path":233,"children":234},"Develop","/design-system/develop",[235,237,239,242],{"title":220,"_path":236,"layout":11},"/design-system/develop/getting-started",{"title":213,"_path":238,"layout":11},"/design-system/develop/contributing",{"title":240,"_path":241,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":166,"_path":163,"children":243,"layout":11},[244,247,250,253,256],{"title":245,"_path":246,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":248,"_path":249,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":251,"_path":252,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":254,"_path":255,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":257,"_path":258,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":260,"_path":261,"children":262},"Styles","/design-system/styles",[263,266,269,272,275,278,281,284,287,290],{"title":264,"_path":265,"layout":11},"Colour","/design-system/styles/colour",{"title":267,"_path":268,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":270,"_path":271,"layout":11},"Grid","/design-system/styles/grid",{"title":273,"_path":274,"layout":11},"Icons","/design-system/styles/icons",{"title":276,"_path":277,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":279,"_path":280,"layout":11},"Layout","/design-system/styles/layout",{"title":282,"_path":283,"layout":11},"Logo","/design-system/styles/logo",{"title":285,"_path":286,"layout":11},"Motion","/design-system/styles/motion",{"title":288,"_path":289,"layout":11},"Spacing","/design-system/styles/spacing",{"title":291,"_path":292,"layout":11},"Typography","/design-system/styles/typography",{"title":294,"_path":295,"children":296},"Components","/design-system/components",[297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438],{"title":298,"_path":299,"layout":11},"Accordion","/design-system/components/accordion",{"title":301,"_path":302,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":304,"_path":305,"layout":11},"Alert","/design-system/components/alert",{"title":307,"_path":308,"layout":11},"Block quote","/design-system/components/block-quote",{"title":310,"_path":311,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":313,"_path":314,"layout":11},"Button","/design-system/components/button",{"title":316,"_path":317,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":319,"_path":320,"layout":11},"Callout","/design-system/components/callout",{"title":322,"_path":323,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":325,"_path":326,"layout":11},"Card","/design-system/components/card",{"title":328,"_path":329,"layout":11},"Carousel","/design-system/components/carousel",{"title":331,"_path":332,"layout":11},"Category grid","/design-system/components/category-grid",{"title":334,"_path":335,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":337,"_path":338,"layout":11},"Chip","/design-system/components/chip",{"title":340,"_path":341,"layout":11},"Contact us","/design-system/components/contact-us",{"title":343,"_path":344,"layout":11},"Date input","/design-system/components/date-input",{"title":346,"_path":347,"layout":11},"Detail list","/design-system/components/detail-list",{"title":349,"_path":350,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":352,"_path":353,"layout":11},"File","/design-system/components/file",{"title":355,"_path":356,"layout":11},"Footer","/design-system/components/footer",{"title":358,"_path":359,"layout":11},"Form alert","/design-system/components/form-alert",{"title":361,"_path":362,"layout":11},"Form","/design-system/components/form",{"title":364,"_path":365,"layout":11},"Header","/design-system/components/header",{"title":367,"_path":368,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":370,"_path":371,"layout":11},"Input field","/design-system/components/input-field",{"title":373,"_path":374,"layout":11},"Key dates","/design-system/components/key-dates",{"title":376,"_path":377,"layout":11},"Media embed","/design-system/components/media-embed",{"title":379,"_path":380,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":382,"_path":383,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":385,"_path":386,"layout":11},"Media","/design-system/components/media",{"title":388,"_path":389,"layout":11},"Option button","/design-system/components/option-button",{"title":391,"_path":392,"layout":11},"Page action","/design-system/components/page-action",{"title":394,"_path":395,"layout":11},"Pagination","/design-system/components/pagination",{"title":397,"_path":398,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":400,"_path":401,"layout":11},"Profile","/design-system/components/profile",{"title":403,"_path":404,"layout":11},"Radio button","/design-system/components/radio-button",{"title":406,"_path":407,"layout":11},"Related links","/design-system/components/related-links",{"title":409,"_path":410,"layout":11},"Results listing","/design-system/components/results-listing",{"title":412,"_path":413,"layout":11},"Search bar","/design-system/components/search-bar",{"title":415,"_path":416,"layout":11},"Skip link","/design-system/components/skip-link",{"title":418,"_path":419,"layout":11},"Social share","/design-system/components/social-share",{"title":421,"_path":422,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":424,"_path":425,"layout":11},"Table","/design-system/components/table",{"title":427,"_path":428,"layout":11},"Tabs","/design-system/components/tabs",{"title":430,"_path":431,"layout":11},"Tag","/design-system/components/tag",{"title":433,"_path":434,"layout":11},"Text area","/design-system/components/text-area",{"title":436,"_path":437,"layout":11},"Timeline","/design-system/components/timeline",{"title":439,"_path":440,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":442,"_path":443,"children":444,"layout":11},"Ripple Framework","/framework",[445,446,464,486],{"title":442,"_path":443,"layout":11},{"title":447,"_path":448,"children":449},"Key Concepts","/framework/key-concepts",[450,452,455,458,461],{"title":251,"_path":451,"layout":11},"/framework/key-concepts/nuxt",{"title":453,"_path":454,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":456,"_path":457,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":459,"_path":460,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":462,"_path":463,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,480,483],{"title":469,"_path":470,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":479,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":481,"_path":482,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":484,"_path":485,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":487,"_path":488,"layout":11},"Core modules","/framework/core-modules",["Reactive",490],{"module-navigation":491},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/accordion/index.html b/design-system/components/accordion/index.html index d0f794ee62..26895e238c 100644 --- a/design-system/components/accordion/index.html +++ b/design-system/components/accordion/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Accordion</h1><p class="rpl-type-p-large" data-v-3163c6df>The Accordion component is a panel designed to save space by hiding and revealing content as required.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use accordions only if it will benefit the user. You should have evidence of this.<!--]--></p><p><!--[-->Using accordions will allow users to:<!--]--></p><ul><!--[--><li><!--[-->view related sections of content quickly<!--]--></li><li><!--[-->choose which content isn’t relevant to them by showing or hiding sections.<!--]--></li><!--]--></ul><p><!--[-->Always test accordions with users first. Depending on what the user needs, hiding content could present problems.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Fill the entire width of the content area.<!--]--></li><li><!--[-->Embed into the body content area of any landing page.<!--]--></li><li><!--[-->Use the 'numbered' variant when a sequential order is important.<!--]--></li><li><!--[-->Include links and format text in accordions, as required.<!--]--></li><li><!--[-->Use to conceal content that may only apply to specific users who can choose to show or hide content.<!--]--></li><li><!--[-->Make sure accordion headings are descriptive and succinct.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use a single accordion.<!--]--></li><li><!--[-->Avoid putting all page content into accordions.<!--]--></li><li><!--[-->Don't use accordions for important information all users need to read.<!--]--></li><li><!--[-->Putting accordions in accordions can confuse the user.<!--]--></li><li><!--[-->Don't use an accordion if doing so will slow the page load time.<!--]--></li><li><!--[-->Don't disable sections.<!--]--></li><!--]--></ul><h3 id="collapse-allexpand-all"><a href="#collapse-allexpand-all"><!--[-->Collapse all/Expand all<!--]--></a></h3><p><!--[-->Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content.<!--]--></p><p><!--[-->Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles.<!--]--></p><p><!--[-->The other option is to remove the accordions and display the content without them.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The accordion has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->numbered.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="numbered"><a href="#numbered"><!--[-->Numbered<!--]--></a></h3><p><!--[-->Use the numbered variant when it is important the content is read in sequential order.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&args=numbered:true&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&args=numbered:true&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Accordions use colour to:<!--]--></p><ul><!--[--><li><!--[-->represent interactions such as hover and active states<!--]--></li><li><!--[-->give prominence to the active displayed content section.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/accordion.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/accordion/_payload.json">[{"state":1,"_errors":596,"serverRendered":599,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":287,"$sdd-globals":302,"$sdd-navigation":303},{"/design-system/components/accordion":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":282,"_id":283,"_source":284,"_file":285,"_extension":286},"/design-system/components/accordion","components",false,"","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","page","Core",{"type":14,"children":15,"toc":268},"root",[16,25,31,36,51,56,61,68,101,107,140,146,151,156,161,165,171,176,189,194,197,203,208,212,215,221,226,239,246],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use accordions only if it will benefit the user. You should have evidence of this.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Using accordions will allow users to:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"view related sections of content quickly",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"choose which content isn’t relevant to them by showing or hiding sections.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"Always test accordions with users first. Depending on what the user needs, hiding content could present problems.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-containers-accordion--accordion",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81,86,91,96],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Fill the entire width of the content area.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Embed into the body content area of any landing page.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Use the 'numbered' variant when a sequential order is important.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Include links and format text in accordions, as required.",{"type":17,"tag":41,"props":92,"children":93},{},[94],{"type":23,"value":95},"Use to conceal content that may only apply to specific users who can choose to show or hide content.",{"type":17,"tag":41,"props":97,"children":98},{},[99],{"type":23,"value":100},"Make sure accordion headings are descriptive and succinct.",{"type":17,"tag":62,"props":102,"children":104},{"id":103},"when-and-how-not-to-use",[105],{"type":23,"value":106},"When and how not to use",{"type":17,"tag":37,"props":108,"children":109},{},[110,115,120,125,130,135],{"type":17,"tag":41,"props":111,"children":112},{},[113],{"type":23,"value":114},"Never use a single accordion.",{"type":17,"tag":41,"props":116,"children":117},{},[118],{"type":23,"value":119},"Avoid putting all page content into accordions.",{"type":17,"tag":41,"props":121,"children":122},{},[123],{"type":23,"value":124},"Don't use accordions for important information all users need to read.",{"type":17,"tag":41,"props":126,"children":127},{},[128],{"type":23,"value":129},"Putting accordions in accordions can confuse the user.",{"type":17,"tag":41,"props":131,"children":132},{},[133],{"type":23,"value":134},"Don't use an accordion if doing so will slow the page load time.",{"type":17,"tag":41,"props":136,"children":137},{},[138],{"type":23,"value":139},"Don't disable sections.",{"type":17,"tag":62,"props":141,"children":143},{"id":142},"collapse-allexpand-all",[144],{"type":23,"value":145},"Collapse all/Expand all",{"type":17,"tag":26,"props":147,"children":148},{},[149],{"type":23,"value":150},"Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content.",{"type":17,"tag":26,"props":152,"children":153},{},[154],{"type":23,"value":155},"Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles.",{"type":17,"tag":26,"props":157,"children":158},{},[159],{"type":23,"value":160},"The other option is to remove the accordions and display the content without them.",{"type":17,"tag":162,"props":163,"children":164},"hr",{},[],{"type":17,"tag":18,"props":166,"children":168},{"id":167},"variants",[169],{"type":23,"value":170},"Variants",{"type":17,"tag":26,"props":172,"children":173},{},[174],{"type":23,"value":175},"The accordion has 2 variants:",{"type":17,"tag":37,"props":177,"children":178},{},[179,184],{"type":17,"tag":41,"props":180,"children":181},{},[182],{"type":23,"value":183},"default",{"type":17,"tag":41,"props":185,"children":186},{},[187],{"type":23,"value":188},"numbered.",{"type":17,"tag":62,"props":190,"children":191},{"id":183},[192],{"type":23,"value":193},"Default",{"type":17,"tag":57,"props":195,"children":196},{"id":59},[],{"type":17,"tag":62,"props":198,"children":200},{"id":199},"numbered",[201],{"type":23,"value":202},"Numbered",{"type":17,"tag":26,"props":204,"children":205},{},[206],{"type":23,"value":207},"Use the numbered variant when it is important the content is read in sequential order.",{"type":17,"tag":57,"props":209,"children":211},{"id":210},"core-containers-accordion--accordion&args=numbered:true",[],{"type":17,"tag":162,"props":213,"children":214},{},[],{"type":17,"tag":18,"props":216,"children":218},{"id":217},"theming",[219],{"type":23,"value":220},"Theming",{"type":17,"tag":26,"props":222,"children":223},{},[224],{"type":23,"value":225},"Accordions use colour to:",{"type":17,"tag":37,"props":227,"children":228},{},[229,234],{"type":17,"tag":41,"props":230,"children":231},{},[232],{"type":23,"value":233},"represent interactions such as hover and active states",{"type":17,"tag":41,"props":235,"children":236},{},[237],{"type":23,"value":238},"give prominence to the active displayed content section.",{"type":17,"tag":240,"props":241,"children":242},"docs-theme-chooser",{},[243],{"type":17,"tag":57,"props":244,"children":245},{"id":59},[],{"type":17,"tag":26,"props":247,"children":248},{},[249,251,258,260,266],{"type":23,"value":250},"To create your own theme see ",{"type":17,"tag":252,"props":253,"children":255},"a",{"href":254},"/design-system/design/theming-guidance-for-designers",[256],{"type":23,"value":257},"theming guidance for designers",{"type":23,"value":259}," or ",{"type":17,"tag":252,"props":261,"children":263},{"href":262},"/design-system/develop/theming",[264],{"type":23,"value":265},"theming guidance for developers",{"type":23,"value":267},".",{"title":8,"searchDepth":269,"depth":269,"links":270},2,[271,277,281],{"id":20,"depth":269,"text":24,"children":272},[273,275,276],{"id":64,"depth":274,"text":67},3,{"id":103,"depth":274,"text":106},{"id":142,"depth":274,"text":145},{"id":167,"depth":269,"text":170,"children":278},[279,280],{"id":183,"depth":274,"text":193},{"id":199,"depth":274,"text":202},{"id":217,"depth":269,"text":220},"markdown","content:design-system:5.components:accordion.md","content","design-system/5.components/accordion.md","md",{"/design-system/components/accordion":288},[289,296],{"_path":290,"_dir":291,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":292,"description":293,"layout":11,"label":12,"_type":282,"_id":294,"_source":284,"_file":295,"_extension":286},"/design-system/styles/typography","styles","Typography","Type styles are used to present content clearly.","content:design-system:4.styles:typography.md","design-system/4.styles/typography.md",{"_path":297,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":298,"description":299,"layout":11,"label":12,"_type":282,"_id":300,"_source":284,"_file":301,"_extension":286},"/design-system/components/acknowledgment","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","content:design-system:5.components:acknowledgment.md","design-system/5.components/acknowledgment.md",{},[304,309,548],{"title":305,"_path":306,"icon":307,"layout":308},"Ripple Design System","/","carbon:home","home",{"title":310,"_path":311,"children":312},"Design System","/design-system",[313,329,344,372,404],{"title":314,"_path":315,"children":316},"About","/design-system/about",[317,320,323,326],{"title":318,"_path":319,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":321,"_path":322,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":324,"_path":325,"layout":11},"Support","/design-system/about/getting-support",{"title":327,"_path":328,"layout":11},"Contributing","/design-system/about/contributing",{"title":330,"_path":331,"children":332},"Design","/design-system/design",[333,336,339,342],{"title":334,"_path":335,"layout":11},"Getting started","/design-system/design/getting-started",{"title":337,"_path":338,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":340,"_path":341,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":343,"_path":254,"layout":11},"Theming guidance for designers",{"title":345,"_path":346,"children":347},"Develop","/design-system/develop",[348,350,352,354],{"title":334,"_path":349,"layout":11},"/design-system/develop/getting-started",{"title":327,"_path":351,"layout":11},"/design-system/develop/contributing",{"title":353,"_path":262,"layout":11},"Theme and brand application",{"title":24,"_path":355,"children":356,"layout":11},"/design-system/develop/usage",[357,360,363,366,369],{"title":358,"_path":359,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":361,"_path":362,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":364,"_path":365,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":367,"_path":368,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":370,"_path":371,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":373,"_path":374,"children":375},"Styles","/design-system/styles",[376,379,382,385,388,391,394,397,400,403],{"title":377,"_path":378,"layout":11},"Colour","/design-system/styles/colour",{"title":380,"_path":381,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":383,"_path":384,"layout":11},"Grid","/design-system/styles/grid",{"title":386,"_path":387,"layout":11},"Icons","/design-system/styles/icons",{"title":389,"_path":390,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":392,"_path":393,"layout":11},"Layout","/design-system/styles/layout",{"title":395,"_path":396,"layout":11},"Logo","/design-system/styles/logo",{"title":398,"_path":399,"layout":11},"Motion","/design-system/styles/motion",{"title":401,"_path":402,"layout":11},"Spacing","/design-system/styles/spacing",{"title":292,"_path":290,"layout":11},{"title":405,"_path":406,"children":407},"Components","/design-system/components",[408,409,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545],{"title":9,"_path":5,"layout":11},{"title":298,"_path":297,"layout":11},{"title":411,"_path":412,"layout":11},"Alert","/design-system/components/alert",{"title":414,"_path":415,"layout":11},"Block quote","/design-system/components/block-quote",{"title":417,"_path":418,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":420,"_path":421,"layout":11},"Button","/design-system/components/button",{"title":423,"_path":424,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":426,"_path":427,"layout":11},"Callout","/design-system/components/callout",{"title":429,"_path":430,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":432,"_path":433,"layout":11},"Card","/design-system/components/card",{"title":435,"_path":436,"layout":11},"Carousel","/design-system/components/carousel",{"title":438,"_path":439,"layout":11},"Category grid","/design-system/components/category-grid",{"title":441,"_path":442,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":444,"_path":445,"layout":11},"Chip","/design-system/components/chip",{"title":447,"_path":448,"layout":11},"Contact us","/design-system/components/contact-us",{"title":450,"_path":451,"layout":11},"Date input","/design-system/components/date-input",{"title":453,"_path":454,"layout":11},"Detail list","/design-system/components/detail-list",{"title":456,"_path":457,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":459,"_path":460,"layout":11},"File","/design-system/components/file",{"title":462,"_path":463,"layout":11},"Footer","/design-system/components/footer",{"title":465,"_path":466,"layout":11},"Form alert","/design-system/components/form-alert",{"title":468,"_path":469,"layout":11},"Form","/design-system/components/form",{"title":471,"_path":472,"layout":11},"Header","/design-system/components/header",{"title":474,"_path":475,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":477,"_path":478,"layout":11},"Input field","/design-system/components/input-field",{"title":480,"_path":481,"layout":11},"Key dates","/design-system/components/key-dates",{"title":483,"_path":484,"layout":11},"Media embed","/design-system/components/media-embed",{"title":486,"_path":487,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":489,"_path":490,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":492,"_path":493,"layout":11},"Media","/design-system/components/media",{"title":495,"_path":496,"layout":11},"Option button","/design-system/components/option-button",{"title":498,"_path":499,"layout":11},"Page action","/design-system/components/page-action",{"title":501,"_path":502,"layout":11},"Pagination","/design-system/components/pagination",{"title":504,"_path":505,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":507,"_path":508,"layout":11},"Profile","/design-system/components/profile",{"title":510,"_path":511,"layout":11},"Radio button","/design-system/components/radio-button",{"title":513,"_path":514,"layout":11},"Related links","/design-system/components/related-links",{"title":516,"_path":517,"layout":11},"Results listing","/design-system/components/results-listing",{"title":519,"_path":520,"layout":11},"Search bar","/design-system/components/search-bar",{"title":522,"_path":523,"layout":11},"Skip link","/design-system/components/skip-link",{"title":525,"_path":526,"layout":11},"Social share","/design-system/components/social-share",{"title":528,"_path":529,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":531,"_path":532,"layout":11},"Table","/design-system/components/table",{"title":534,"_path":535,"layout":11},"Tabs","/design-system/components/tabs",{"title":537,"_path":538,"layout":11},"Tag","/design-system/components/tag",{"title":540,"_path":541,"layout":11},"Text area","/design-system/components/text-area",{"title":543,"_path":544,"layout":11},"Timeline","/design-system/components/timeline",{"title":546,"_path":547,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":549,"_path":550,"children":551,"layout":11},"Ripple Framework","/framework",[552,553,571,593],{"title":549,"_path":550,"layout":11},{"title":554,"_path":555,"children":556},"Key Concepts","/framework/key-concepts",[557,559,562,565,568],{"title":364,"_path":558,"layout":11},"/framework/key-concepts/nuxt",{"title":560,"_path":561,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":563,"_path":564,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":566,"_path":567,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":569,"_path":570,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":572,"_path":573,"children":574},"Guides","/framework/guides",[575,578,581,584,587,590],{"title":576,"_path":577,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":579,"_path":580,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":582,"_path":583,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":585,"_path":586,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":588,"_path":589,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":591,"_path":592,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":594,"_path":595,"layout":11},"Core modules","/framework/core-modules",["Reactive",597],{"module-navigation":598},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Accordion</h1><p class="rpl-type-p-large" data-v-3163c6df>The Accordion component is a panel designed to save space by hiding and revealing content as required.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use accordions only if it will benefit the user. You should have evidence of this.<!--]--></p><p><!--[-->Using accordions will allow users to:<!--]--></p><ul><!--[--><li><!--[-->view related sections of content quickly<!--]--></li><li><!--[-->choose which content isn’t relevant to them by showing or hiding sections.<!--]--></li><!--]--></ul><p><!--[-->Always test accordions with users first. Depending on what the user needs, hiding content could present problems.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Fill the entire width of the content area.<!--]--></li><li><!--[-->Embed into the body content area of any landing page.<!--]--></li><li><!--[-->Use the 'numbered' variant when a sequential order is important.<!--]--></li><li><!--[-->Include links and format text in accordions, as required.<!--]--></li><li><!--[-->Use to conceal content that may only apply to specific users who can choose to show or hide content.<!--]--></li><li><!--[-->Make sure accordion headings are descriptive and succinct.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use a single accordion.<!--]--></li><li><!--[-->Avoid putting all page content into accordions.<!--]--></li><li><!--[-->Don't use accordions for important information all users need to read.<!--]--></li><li><!--[-->Putting accordions in accordions can confuse the user.<!--]--></li><li><!--[-->Don't use an accordion if doing so will slow the page load time.<!--]--></li><li><!--[-->Don't disable sections.<!--]--></li><!--]--></ul><h3 id="collapse-allexpand-all"><a href="#collapse-allexpand-all"><!--[-->Collapse all/Expand all<!--]--></a></h3><p><!--[-->Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content.<!--]--></p><p><!--[-->Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles.<!--]--></p><p><!--[-->The other option is to remove the accordions and display the content without them.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The accordion has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->numbered.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="numbered"><a href="#numbered"><!--[-->Numbered<!--]--></a></h3><p><!--[-->Use the numbered variant when it is important the content is read in sequential order.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&args=numbered:true&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&args=numbered:true&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Accordions use colour to:<!--]--></p><ul><!--[--><li><!--[-->represent interactions such as hover and active states<!--]--></li><li><!--[-->give prominence to the active displayed content section.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/accordion.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/accordion/_payload.json">[{"state":1,"_errors":596,"serverRendered":599,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":287,"$sdd-globals":302,"$sdd-navigation":303},{"/design-system/components/accordion":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":282,"_id":283,"_source":284,"_file":285,"_extension":286},"/design-system/components/accordion","components",false,"","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","page","Core",{"type":14,"children":15,"toc":268},"root",[16,25,31,36,51,56,61,68,101,107,140,146,151,156,161,165,171,176,189,194,197,203,208,212,215,221,226,239,246],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use accordions only if it will benefit the user. You should have evidence of this.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Using accordions will allow users to:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"view related sections of content quickly",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"choose which content isn’t relevant to them by showing or hiding sections.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"Always test accordions with users first. Depending on what the user needs, hiding content could present problems.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-containers-accordion--accordion",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81,86,91,96],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Fill the entire width of the content area.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Embed into the body content area of any landing page.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Use the 'numbered' variant when a sequential order is important.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Include links and format text in accordions, as required.",{"type":17,"tag":41,"props":92,"children":93},{},[94],{"type":23,"value":95},"Use to conceal content that may only apply to specific users who can choose to show or hide content.",{"type":17,"tag":41,"props":97,"children":98},{},[99],{"type":23,"value":100},"Make sure accordion headings are descriptive and succinct.",{"type":17,"tag":62,"props":102,"children":104},{"id":103},"when-and-how-not-to-use",[105],{"type":23,"value":106},"When and how not to use",{"type":17,"tag":37,"props":108,"children":109},{},[110,115,120,125,130,135],{"type":17,"tag":41,"props":111,"children":112},{},[113],{"type":23,"value":114},"Never use a single accordion.",{"type":17,"tag":41,"props":116,"children":117},{},[118],{"type":23,"value":119},"Avoid putting all page content into accordions.",{"type":17,"tag":41,"props":121,"children":122},{},[123],{"type":23,"value":124},"Don't use accordions for important information all users need to read.",{"type":17,"tag":41,"props":126,"children":127},{},[128],{"type":23,"value":129},"Putting accordions in accordions can confuse the user.",{"type":17,"tag":41,"props":131,"children":132},{},[133],{"type":23,"value":134},"Don't use an accordion if doing so will slow the page load time.",{"type":17,"tag":41,"props":136,"children":137},{},[138],{"type":23,"value":139},"Don't disable sections.",{"type":17,"tag":62,"props":141,"children":143},{"id":142},"collapse-allexpand-all",[144],{"type":23,"value":145},"Collapse all/Expand all",{"type":17,"tag":26,"props":147,"children":148},{},[149],{"type":23,"value":150},"Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content.",{"type":17,"tag":26,"props":152,"children":153},{},[154],{"type":23,"value":155},"Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles.",{"type":17,"tag":26,"props":157,"children":158},{},[159],{"type":23,"value":160},"The other option is to remove the accordions and display the content without them.",{"type":17,"tag":162,"props":163,"children":164},"hr",{},[],{"type":17,"tag":18,"props":166,"children":168},{"id":167},"variants",[169],{"type":23,"value":170},"Variants",{"type":17,"tag":26,"props":172,"children":173},{},[174],{"type":23,"value":175},"The accordion has 2 variants:",{"type":17,"tag":37,"props":177,"children":178},{},[179,184],{"type":17,"tag":41,"props":180,"children":181},{},[182],{"type":23,"value":183},"default",{"type":17,"tag":41,"props":185,"children":186},{},[187],{"type":23,"value":188},"numbered.",{"type":17,"tag":62,"props":190,"children":191},{"id":183},[192],{"type":23,"value":193},"Default",{"type":17,"tag":57,"props":195,"children":196},{"id":59},[],{"type":17,"tag":62,"props":198,"children":200},{"id":199},"numbered",[201],{"type":23,"value":202},"Numbered",{"type":17,"tag":26,"props":204,"children":205},{},[206],{"type":23,"value":207},"Use the numbered variant when it is important the content is read in sequential order.",{"type":17,"tag":57,"props":209,"children":211},{"id":210},"core-containers-accordion--accordion&args=numbered:true",[],{"type":17,"tag":162,"props":213,"children":214},{},[],{"type":17,"tag":18,"props":216,"children":218},{"id":217},"theming",[219],{"type":23,"value":220},"Theming",{"type":17,"tag":26,"props":222,"children":223},{},[224],{"type":23,"value":225},"Accordions use colour to:",{"type":17,"tag":37,"props":227,"children":228},{},[229,234],{"type":17,"tag":41,"props":230,"children":231},{},[232],{"type":23,"value":233},"represent interactions such as hover and active states",{"type":17,"tag":41,"props":235,"children":236},{},[237],{"type":23,"value":238},"give prominence to the active displayed content section.",{"type":17,"tag":240,"props":241,"children":242},"docs-theme-chooser",{},[243],{"type":17,"tag":57,"props":244,"children":245},{"id":59},[],{"type":17,"tag":26,"props":247,"children":248},{},[249,251,258,260,266],{"type":23,"value":250},"To create your own theme see ",{"type":17,"tag":252,"props":253,"children":255},"a",{"href":254},"/design-system/design/theming-guidance-for-designers",[256],{"type":23,"value":257},"theming guidance for designers",{"type":23,"value":259}," or ",{"type":17,"tag":252,"props":261,"children":263},{"href":262},"/design-system/develop/theming",[264],{"type":23,"value":265},"theming guidance for developers",{"type":23,"value":267},".",{"title":8,"searchDepth":269,"depth":269,"links":270},2,[271,277,281],{"id":20,"depth":269,"text":24,"children":272},[273,275,276],{"id":64,"depth":274,"text":67},3,{"id":103,"depth":274,"text":106},{"id":142,"depth":274,"text":145},{"id":167,"depth":269,"text":170,"children":278},[279,280],{"id":183,"depth":274,"text":193},{"id":199,"depth":274,"text":202},{"id":217,"depth":269,"text":220},"markdown","content:design-system:5.components:accordion.md","content","design-system/5.components/accordion.md","md",{"/design-system/components/accordion":288},[289,296],{"_path":290,"_dir":291,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":292,"description":293,"layout":11,"label":12,"_type":282,"_id":294,"_source":284,"_file":295,"_extension":286},"/design-system/styles/typography","styles","Typography","Type styles are used to present content clearly.","content:design-system:4.styles:typography.md","design-system/4.styles/typography.md",{"_path":297,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":298,"description":299,"layout":11,"label":12,"_type":282,"_id":300,"_source":284,"_file":301,"_extension":286},"/design-system/components/acknowledgment","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","content:design-system:5.components:acknowledgment.md","design-system/5.components/acknowledgment.md",{},[304,309,548],{"title":305,"_path":306,"icon":307,"layout":308},"Ripple Design System","/","carbon:home","home",{"title":310,"_path":311,"children":312},"Design System","/design-system",[313,329,344,372,404],{"title":314,"_path":315,"children":316},"About","/design-system/about",[317,320,323,326],{"title":318,"_path":319,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":321,"_path":322,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":324,"_path":325,"layout":11},"Support","/design-system/about/getting-support",{"title":327,"_path":328,"layout":11},"Contributing","/design-system/about/contributing",{"title":330,"_path":331,"children":332},"Design","/design-system/design",[333,336,339,342],{"title":334,"_path":335,"layout":11},"Getting started","/design-system/design/getting-started",{"title":337,"_path":338,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":340,"_path":341,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":343,"_path":254,"layout":11},"Theming guidance for designers",{"title":345,"_path":346,"children":347},"Develop","/design-system/develop",[348,350,352,354],{"title":334,"_path":349,"layout":11},"/design-system/develop/getting-started",{"title":327,"_path":351,"layout":11},"/design-system/develop/contributing",{"title":353,"_path":262,"layout":11},"Theme and brand application",{"title":24,"_path":355,"children":356,"layout":11},"/design-system/develop/usage",[357,360,363,366,369],{"title":358,"_path":359,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":361,"_path":362,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":364,"_path":365,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":367,"_path":368,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":370,"_path":371,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":373,"_path":374,"children":375},"Styles","/design-system/styles",[376,379,382,385,388,391,394,397,400,403],{"title":377,"_path":378,"layout":11},"Colour","/design-system/styles/colour",{"title":380,"_path":381,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":383,"_path":384,"layout":11},"Grid","/design-system/styles/grid",{"title":386,"_path":387,"layout":11},"Icons","/design-system/styles/icons",{"title":389,"_path":390,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":392,"_path":393,"layout":11},"Layout","/design-system/styles/layout",{"title":395,"_path":396,"layout":11},"Logo","/design-system/styles/logo",{"title":398,"_path":399,"layout":11},"Motion","/design-system/styles/motion",{"title":401,"_path":402,"layout":11},"Spacing","/design-system/styles/spacing",{"title":292,"_path":290,"layout":11},{"title":405,"_path":406,"children":407},"Components","/design-system/components",[408,409,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545],{"title":9,"_path":5,"layout":11},{"title":298,"_path":297,"layout":11},{"title":411,"_path":412,"layout":11},"Alert","/design-system/components/alert",{"title":414,"_path":415,"layout":11},"Block quote","/design-system/components/block-quote",{"title":417,"_path":418,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":420,"_path":421,"layout":11},"Button","/design-system/components/button",{"title":423,"_path":424,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":426,"_path":427,"layout":11},"Callout","/design-system/components/callout",{"title":429,"_path":430,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":432,"_path":433,"layout":11},"Card","/design-system/components/card",{"title":435,"_path":436,"layout":11},"Carousel","/design-system/components/carousel",{"title":438,"_path":439,"layout":11},"Category grid","/design-system/components/category-grid",{"title":441,"_path":442,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":444,"_path":445,"layout":11},"Chip","/design-system/components/chip",{"title":447,"_path":448,"layout":11},"Contact us","/design-system/components/contact-us",{"title":450,"_path":451,"layout":11},"Date input","/design-system/components/date-input",{"title":453,"_path":454,"layout":11},"Detail list","/design-system/components/detail-list",{"title":456,"_path":457,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":459,"_path":460,"layout":11},"File","/design-system/components/file",{"title":462,"_path":463,"layout":11},"Footer","/design-system/components/footer",{"title":465,"_path":466,"layout":11},"Form alert","/design-system/components/form-alert",{"title":468,"_path":469,"layout":11},"Form","/design-system/components/form",{"title":471,"_path":472,"layout":11},"Header","/design-system/components/header",{"title":474,"_path":475,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":477,"_path":478,"layout":11},"Input field","/design-system/components/input-field",{"title":480,"_path":481,"layout":11},"Key dates","/design-system/components/key-dates",{"title":483,"_path":484,"layout":11},"Media embed","/design-system/components/media-embed",{"title":486,"_path":487,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":489,"_path":490,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":492,"_path":493,"layout":11},"Media","/design-system/components/media",{"title":495,"_path":496,"layout":11},"Option button","/design-system/components/option-button",{"title":498,"_path":499,"layout":11},"Page action","/design-system/components/page-action",{"title":501,"_path":502,"layout":11},"Pagination","/design-system/components/pagination",{"title":504,"_path":505,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":507,"_path":508,"layout":11},"Profile","/design-system/components/profile",{"title":510,"_path":511,"layout":11},"Radio button","/design-system/components/radio-button",{"title":513,"_path":514,"layout":11},"Related links","/design-system/components/related-links",{"title":516,"_path":517,"layout":11},"Results listing","/design-system/components/results-listing",{"title":519,"_path":520,"layout":11},"Search bar","/design-system/components/search-bar",{"title":522,"_path":523,"layout":11},"Skip link","/design-system/components/skip-link",{"title":525,"_path":526,"layout":11},"Social share","/design-system/components/social-share",{"title":528,"_path":529,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":531,"_path":532,"layout":11},"Table","/design-system/components/table",{"title":534,"_path":535,"layout":11},"Tabs","/design-system/components/tabs",{"title":537,"_path":538,"layout":11},"Tag","/design-system/components/tag",{"title":540,"_path":541,"layout":11},"Text area","/design-system/components/text-area",{"title":543,"_path":544,"layout":11},"Timeline","/design-system/components/timeline",{"title":546,"_path":547,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":549,"_path":550,"children":551,"layout":11},"Ripple Framework","/framework",[552,553,571,593],{"title":549,"_path":550,"layout":11},{"title":554,"_path":555,"children":556},"Key Concepts","/framework/key-concepts",[557,559,562,565,568],{"title":364,"_path":558,"layout":11},"/framework/key-concepts/nuxt",{"title":560,"_path":561,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":563,"_path":564,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":566,"_path":567,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":569,"_path":570,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":572,"_path":573,"children":574},"Guides","/framework/guides",[575,578,581,584,587,590],{"title":576,"_path":577,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":579,"_path":580,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":582,"_path":583,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":585,"_path":586,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":588,"_path":589,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":591,"_path":592,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":594,"_path":595,"layout":11},"Core modules","/framework/core-modules",["Reactive",597],{"module-navigation":598},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/acknowledgment/index.html b/design-system/components/acknowledgment/index.html index 44918946cc..0fc68506b7 100644 --- a/design-system/components/acknowledgment/index.html +++ b/design-system/components/acknowledgment/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Acknowledgement</h1><p class="rpl-type-p-large" data-v-3163c6df>The Acknowledgement component pays respect to the First Peoples of Victoria.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->The Acknowledgement of Traditional Owners message:<!--]--></p><ul><!--[--><li><!--[-->displays alongside the Aboriginal and Torres Strait Islander flags<!--]--></li><li><!--[-->is used in the footer.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-acknowledgement--acknowledgement&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-acknowledgement--acknowledgement&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use this component to display the Acknowledgement of Traditional Owners message.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><p><!--[-->Do not change the:<!--]--></p><ul><!--[--><li><!--[-->Aboriginal and Torres Strait Islander flags<!--]--></li><li><!--[-->Acknowledgement of Traditional Owners wording.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/acknowledgment.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/acknowledgment/_payload.json">[{"state":1,"_errors":413,"serverRendered":416,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":103,"$sdd-globals":117,"$sdd-navigation":118},{"/design-system/components/acknowledgment":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":98,"_id":99,"_source":100,"_file":101,"_extension":102},"/design-system/components/acknowledgment","components",false,"","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","page","Core",{"type":14,"children":15,"toc":90},"root",[16,25,31,46,51,58,66,72,77],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"The Acknowledgement of Traditional Owners message:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"displays alongside the Aboriginal and Torres Strait Islander flags",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"is used in the footer.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"core-containers-acknowledgement--acknowledgement",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"when-and-how-to-use",[56],{"type":23,"value":57},"When and how to use",{"type":17,"tag":32,"props":59,"children":60},{},[61],{"type":17,"tag":36,"props":62,"children":63},{},[64],{"type":23,"value":65},"Use this component to display the Acknowledgement of Traditional Owners message.",{"type":17,"tag":52,"props":67,"children":69},{"id":68},"when-and-how-not-to-use",[70],{"type":23,"value":71},"When and how not to use",{"type":17,"tag":26,"props":73,"children":74},{},[75],{"type":23,"value":76},"Do not change the:",{"type":17,"tag":32,"props":78,"children":79},{},[80,85],{"type":17,"tag":36,"props":81,"children":82},{},[83],{"type":23,"value":84},"Aboriginal and Torres Strait Islander flags",{"type":17,"tag":36,"props":86,"children":87},{},[88],{"type":23,"value":89},"Acknowledgement of Traditional Owners wording.",{"title":8,"searchDepth":91,"depth":91,"links":92},2,[93],{"id":20,"depth":91,"text":24,"children":94},[95,97],{"id":54,"depth":96,"text":57},3,{"id":68,"depth":96,"text":71},"markdown","content:design-system:5.components:acknowledgment.md","content","design-system/5.components/acknowledgment.md","md",{"/design-system/components/acknowledgment":104},[105,111],{"_path":106,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":107,"description":108,"layout":11,"label":12,"_type":98,"_id":109,"_source":100,"_file":110,"_extension":102},"/design-system/components/accordion","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","content:design-system:5.components:accordion.md","design-system/5.components/accordion.md",{"_path":112,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":113,"description":114,"layout":11,"label":12,"_type":98,"_id":115,"_source":100,"_file":116,"_extension":102},"/design-system/components/alert","Alert","The Alert component display required actions or important messages to users.","content:design-system:5.components:alert.md","design-system/5.components/alert.md",{},[119,124,365],{"title":120,"_path":121,"icon":122,"layout":123},"Ripple Design System","/","carbon:home","home",{"title":125,"_path":126,"children":127},"Design System","/design-system",[128,144,160,189,223],{"title":129,"_path":130,"children":131},"About","/design-system/about",[132,135,138,141],{"title":133,"_path":134,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":136,"_path":137,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":139,"_path":140,"layout":11},"Support","/design-system/about/getting-support",{"title":142,"_path":143,"layout":11},"Contributing","/design-system/about/contributing",{"title":145,"_path":146,"children":147},"Design","/design-system/design",[148,151,154,157],{"title":149,"_path":150,"layout":11},"Getting started","/design-system/design/getting-started",{"title":152,"_path":153,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":155,"_path":156,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":158,"_path":159,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":161,"_path":162,"children":163},"Develop","/design-system/develop",[164,166,168,171],{"title":149,"_path":165,"layout":11},"/design-system/develop/getting-started",{"title":142,"_path":167,"layout":11},"/design-system/develop/contributing",{"title":169,"_path":170,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":172,"children":173,"layout":11},"/design-system/develop/usage",[174,177,180,183,186],{"title":175,"_path":176,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":178,"_path":179,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":181,"_path":182,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":184,"_path":185,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":187,"_path":188,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":190,"_path":191,"children":192},"Styles","/design-system/styles",[193,196,199,202,205,208,211,214,217,220],{"title":194,"_path":195,"layout":11},"Colour","/design-system/styles/colour",{"title":197,"_path":198,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":200,"_path":201,"layout":11},"Grid","/design-system/styles/grid",{"title":203,"_path":204,"layout":11},"Icons","/design-system/styles/icons",{"title":206,"_path":207,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":209,"_path":210,"layout":11},"Layout","/design-system/styles/layout",{"title":212,"_path":213,"layout":11},"Logo","/design-system/styles/logo",{"title":215,"_path":216,"layout":11},"Motion","/design-system/styles/motion",{"title":218,"_path":219,"layout":11},"Spacing","/design-system/styles/spacing",{"title":221,"_path":222,"layout":11},"Typography","/design-system/styles/typography",{"title":224,"_path":225,"children":226},"Components","/design-system/components",[227,228,229,230,233,236,239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362],{"title":107,"_path":106,"layout":11},{"title":9,"_path":5,"layout":11},{"title":113,"_path":112,"layout":11},{"title":231,"_path":232,"layout":11},"Block quote","/design-system/components/block-quote",{"title":234,"_path":235,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":237,"_path":238,"layout":11},"Button","/design-system/components/button",{"title":240,"_path":241,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":243,"_path":244,"layout":11},"Callout","/design-system/components/callout",{"title":246,"_path":247,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":249,"_path":250,"layout":11},"Card","/design-system/components/card",{"title":252,"_path":253,"layout":11},"Carousel","/design-system/components/carousel",{"title":255,"_path":256,"layout":11},"Category grid","/design-system/components/category-grid",{"title":258,"_path":259,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":261,"_path":262,"layout":11},"Chip","/design-system/components/chip",{"title":264,"_path":265,"layout":11},"Contact us","/design-system/components/contact-us",{"title":267,"_path":268,"layout":11},"Date input","/design-system/components/date-input",{"title":270,"_path":271,"layout":11},"Detail list","/design-system/components/detail-list",{"title":273,"_path":274,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":276,"_path":277,"layout":11},"File","/design-system/components/file",{"title":279,"_path":280,"layout":11},"Footer","/design-system/components/footer",{"title":282,"_path":283,"layout":11},"Form alert","/design-system/components/form-alert",{"title":285,"_path":286,"layout":11},"Form","/design-system/components/form",{"title":288,"_path":289,"layout":11},"Header","/design-system/components/header",{"title":291,"_path":292,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":294,"_path":295,"layout":11},"Input field","/design-system/components/input-field",{"title":297,"_path":298,"layout":11},"Key dates","/design-system/components/key-dates",{"title":300,"_path":301,"layout":11},"Media embed","/design-system/components/media-embed",{"title":303,"_path":304,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":306,"_path":307,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":309,"_path":310,"layout":11},"Media","/design-system/components/media",{"title":312,"_path":313,"layout":11},"Option button","/design-system/components/option-button",{"title":315,"_path":316,"layout":11},"Page action","/design-system/components/page-action",{"title":318,"_path":319,"layout":11},"Pagination","/design-system/components/pagination",{"title":321,"_path":322,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":324,"_path":325,"layout":11},"Profile","/design-system/components/profile",{"title":327,"_path":328,"layout":11},"Radio button","/design-system/components/radio-button",{"title":330,"_path":331,"layout":11},"Related links","/design-system/components/related-links",{"title":333,"_path":334,"layout":11},"Results listing","/design-system/components/results-listing",{"title":336,"_path":337,"layout":11},"Search bar","/design-system/components/search-bar",{"title":339,"_path":340,"layout":11},"Skip link","/design-system/components/skip-link",{"title":342,"_path":343,"layout":11},"Social share","/design-system/components/social-share",{"title":345,"_path":346,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":348,"_path":349,"layout":11},"Table","/design-system/components/table",{"title":351,"_path":352,"layout":11},"Tabs","/design-system/components/tabs",{"title":354,"_path":355,"layout":11},"Tag","/design-system/components/tag",{"title":357,"_path":358,"layout":11},"Text area","/design-system/components/text-area",{"title":360,"_path":361,"layout":11},"Timeline","/design-system/components/timeline",{"title":363,"_path":364,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":366,"_path":367,"children":368,"layout":11},"Ripple Framework","/framework",[369,370,388,410],{"title":366,"_path":367,"layout":11},{"title":371,"_path":372,"children":373},"Key Concepts","/framework/key-concepts",[374,376,379,382,385],{"title":181,"_path":375,"layout":11},"/framework/key-concepts/nuxt",{"title":377,"_path":378,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":380,"_path":381,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":383,"_path":384,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":386,"_path":387,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":389,"_path":390,"children":391},"Guides","/framework/guides",[392,395,398,401,404,407],{"title":393,"_path":394,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":396,"_path":397,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":399,"_path":400,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":402,"_path":403,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":405,"_path":406,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":408,"_path":409,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":411,"_path":412,"layout":11},"Core modules","/framework/core-modules",["Reactive",414],{"module-navigation":415},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Acknowledgement</h1><p class="rpl-type-p-large" data-v-3163c6df>The Acknowledgement component pays respect to the First Peoples of Victoria.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->The Acknowledgement of Traditional Owners message:<!--]--></p><ul><!--[--><li><!--[-->displays alongside the Aboriginal and Torres Strait Islander flags<!--]--></li><li><!--[-->is used in the footer.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-acknowledgement--acknowledgement&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-acknowledgement--acknowledgement&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use this component to display the Acknowledgement of Traditional Owners message.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><p><!--[-->Do not change the:<!--]--></p><ul><!--[--><li><!--[-->Aboriginal and Torres Strait Islander flags<!--]--></li><li><!--[-->Acknowledgement of Traditional Owners wording.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/acknowledgment.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/acknowledgment/_payload.json">[{"state":1,"_errors":413,"serverRendered":416,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":103,"$sdd-globals":117,"$sdd-navigation":118},{"/design-system/components/acknowledgment":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":98,"_id":99,"_source":100,"_file":101,"_extension":102},"/design-system/components/acknowledgment","components",false,"","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","page","Core",{"type":14,"children":15,"toc":90},"root",[16,25,31,46,51,58,66,72,77],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"The Acknowledgement of Traditional Owners message:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"displays alongside the Aboriginal and Torres Strait Islander flags",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"is used in the footer.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"core-containers-acknowledgement--acknowledgement",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"when-and-how-to-use",[56],{"type":23,"value":57},"When and how to use",{"type":17,"tag":32,"props":59,"children":60},{},[61],{"type":17,"tag":36,"props":62,"children":63},{},[64],{"type":23,"value":65},"Use this component to display the Acknowledgement of Traditional Owners message.",{"type":17,"tag":52,"props":67,"children":69},{"id":68},"when-and-how-not-to-use",[70],{"type":23,"value":71},"When and how not to use",{"type":17,"tag":26,"props":73,"children":74},{},[75],{"type":23,"value":76},"Do not change the:",{"type":17,"tag":32,"props":78,"children":79},{},[80,85],{"type":17,"tag":36,"props":81,"children":82},{},[83],{"type":23,"value":84},"Aboriginal and Torres Strait Islander flags",{"type":17,"tag":36,"props":86,"children":87},{},[88],{"type":23,"value":89},"Acknowledgement of Traditional Owners wording.",{"title":8,"searchDepth":91,"depth":91,"links":92},2,[93],{"id":20,"depth":91,"text":24,"children":94},[95,97],{"id":54,"depth":96,"text":57},3,{"id":68,"depth":96,"text":71},"markdown","content:design-system:5.components:acknowledgment.md","content","design-system/5.components/acknowledgment.md","md",{"/design-system/components/acknowledgment":104},[105,111],{"_path":106,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":107,"description":108,"layout":11,"label":12,"_type":98,"_id":109,"_source":100,"_file":110,"_extension":102},"/design-system/components/accordion","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","content:design-system:5.components:accordion.md","design-system/5.components/accordion.md",{"_path":112,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":113,"description":114,"layout":11,"label":12,"_type":98,"_id":115,"_source":100,"_file":116,"_extension":102},"/design-system/components/alert","Alert","The Alert component display required actions or important messages to users.","content:design-system:5.components:alert.md","design-system/5.components/alert.md",{},[119,124,365],{"title":120,"_path":121,"icon":122,"layout":123},"Ripple Design System","/","carbon:home","home",{"title":125,"_path":126,"children":127},"Design System","/design-system",[128,144,160,189,223],{"title":129,"_path":130,"children":131},"About","/design-system/about",[132,135,138,141],{"title":133,"_path":134,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":136,"_path":137,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":139,"_path":140,"layout":11},"Support","/design-system/about/getting-support",{"title":142,"_path":143,"layout":11},"Contributing","/design-system/about/contributing",{"title":145,"_path":146,"children":147},"Design","/design-system/design",[148,151,154,157],{"title":149,"_path":150,"layout":11},"Getting started","/design-system/design/getting-started",{"title":152,"_path":153,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":155,"_path":156,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":158,"_path":159,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":161,"_path":162,"children":163},"Develop","/design-system/develop",[164,166,168,171],{"title":149,"_path":165,"layout":11},"/design-system/develop/getting-started",{"title":142,"_path":167,"layout":11},"/design-system/develop/contributing",{"title":169,"_path":170,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":172,"children":173,"layout":11},"/design-system/develop/usage",[174,177,180,183,186],{"title":175,"_path":176,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":178,"_path":179,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":181,"_path":182,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":184,"_path":185,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":187,"_path":188,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":190,"_path":191,"children":192},"Styles","/design-system/styles",[193,196,199,202,205,208,211,214,217,220],{"title":194,"_path":195,"layout":11},"Colour","/design-system/styles/colour",{"title":197,"_path":198,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":200,"_path":201,"layout":11},"Grid","/design-system/styles/grid",{"title":203,"_path":204,"layout":11},"Icons","/design-system/styles/icons",{"title":206,"_path":207,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":209,"_path":210,"layout":11},"Layout","/design-system/styles/layout",{"title":212,"_path":213,"layout":11},"Logo","/design-system/styles/logo",{"title":215,"_path":216,"layout":11},"Motion","/design-system/styles/motion",{"title":218,"_path":219,"layout":11},"Spacing","/design-system/styles/spacing",{"title":221,"_path":222,"layout":11},"Typography","/design-system/styles/typography",{"title":224,"_path":225,"children":226},"Components","/design-system/components",[227,228,229,230,233,236,239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362],{"title":107,"_path":106,"layout":11},{"title":9,"_path":5,"layout":11},{"title":113,"_path":112,"layout":11},{"title":231,"_path":232,"layout":11},"Block quote","/design-system/components/block-quote",{"title":234,"_path":235,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":237,"_path":238,"layout":11},"Button","/design-system/components/button",{"title":240,"_path":241,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":243,"_path":244,"layout":11},"Callout","/design-system/components/callout",{"title":246,"_path":247,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":249,"_path":250,"layout":11},"Card","/design-system/components/card",{"title":252,"_path":253,"layout":11},"Carousel","/design-system/components/carousel",{"title":255,"_path":256,"layout":11},"Category grid","/design-system/components/category-grid",{"title":258,"_path":259,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":261,"_path":262,"layout":11},"Chip","/design-system/components/chip",{"title":264,"_path":265,"layout":11},"Contact us","/design-system/components/contact-us",{"title":267,"_path":268,"layout":11},"Date input","/design-system/components/date-input",{"title":270,"_path":271,"layout":11},"Detail list","/design-system/components/detail-list",{"title":273,"_path":274,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":276,"_path":277,"layout":11},"File","/design-system/components/file",{"title":279,"_path":280,"layout":11},"Footer","/design-system/components/footer",{"title":282,"_path":283,"layout":11},"Form alert","/design-system/components/form-alert",{"title":285,"_path":286,"layout":11},"Form","/design-system/components/form",{"title":288,"_path":289,"layout":11},"Header","/design-system/components/header",{"title":291,"_path":292,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":294,"_path":295,"layout":11},"Input field","/design-system/components/input-field",{"title":297,"_path":298,"layout":11},"Key dates","/design-system/components/key-dates",{"title":300,"_path":301,"layout":11},"Media embed","/design-system/components/media-embed",{"title":303,"_path":304,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":306,"_path":307,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":309,"_path":310,"layout":11},"Media","/design-system/components/media",{"title":312,"_path":313,"layout":11},"Option button","/design-system/components/option-button",{"title":315,"_path":316,"layout":11},"Page action","/design-system/components/page-action",{"title":318,"_path":319,"layout":11},"Pagination","/design-system/components/pagination",{"title":321,"_path":322,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":324,"_path":325,"layout":11},"Profile","/design-system/components/profile",{"title":327,"_path":328,"layout":11},"Radio button","/design-system/components/radio-button",{"title":330,"_path":331,"layout":11},"Related links","/design-system/components/related-links",{"title":333,"_path":334,"layout":11},"Results listing","/design-system/components/results-listing",{"title":336,"_path":337,"layout":11},"Search bar","/design-system/components/search-bar",{"title":339,"_path":340,"layout":11},"Skip link","/design-system/components/skip-link",{"title":342,"_path":343,"layout":11},"Social share","/design-system/components/social-share",{"title":345,"_path":346,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":348,"_path":349,"layout":11},"Table","/design-system/components/table",{"title":351,"_path":352,"layout":11},"Tabs","/design-system/components/tabs",{"title":354,"_path":355,"layout":11},"Tag","/design-system/components/tag",{"title":357,"_path":358,"layout":11},"Text area","/design-system/components/text-area",{"title":360,"_path":361,"layout":11},"Timeline","/design-system/components/timeline",{"title":363,"_path":364,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":366,"_path":367,"children":368,"layout":11},"Ripple Framework","/framework",[369,370,388,410],{"title":366,"_path":367,"layout":11},{"title":371,"_path":372,"children":373},"Key Concepts","/framework/key-concepts",[374,376,379,382,385],{"title":181,"_path":375,"layout":11},"/framework/key-concepts/nuxt",{"title":377,"_path":378,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":380,"_path":381,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":383,"_path":384,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":386,"_path":387,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":389,"_path":390,"children":391},"Guides","/framework/guides",[392,395,398,401,404,407],{"title":393,"_path":394,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":396,"_path":397,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":399,"_path":400,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":402,"_path":403,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":405,"_path":406,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":408,"_path":409,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":411,"_path":412,"layout":11},"Core modules","/framework/core-modules",["Reactive",414],{"module-navigation":415},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/alert/index.html b/design-system/components/alert/index.html index 7228640eba..e666feddd5 100644 --- a/design-system/components/alert/index.html +++ b/design-system/components/alert/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Alert</h1><p class="rpl-type-p-large" data-v-3163c6df>The Alert component display required actions or important messages to users.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Alerts attract a user's attention with important messages or required actions. They appear at the top of pages.<!--]--></p><p><!--[-->Alerts are:<!--]--></p><ul><!--[--><li><!--[-->intrusive by design<!--]--></li><li><!--[-->created on purpose<!--]--></li><li><!--[-->dismissible by a user<!--]--></li><li><!--[-->not triggered by user action or back-end event.<!--]--></li><!--]--></ul><p><!--[-->Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--information&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--information&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only use an alert if its message or action applies to an entire product or site.<!--]--></li><li><!--[-->Write the alert in plain language that's clean and concise to minimise a user's cognitive load.<!--]--></li><li><!--[-->If the user needs more information or to complete an action, use link text for the call to action.<!--]--></li><li><!--[-->Place the alert at the top of the screen before the header.<!--]--></li><li><!--[-->Only use the critical alert setting for messages or actions that warrant it.<!--]--></li><li><!--[-->Limit actions to one per alert banner.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use an alert if its message applies only to that feature or page.<!--]--></li><li><!--[-->Alerts shouldn't cover other components, only pushing down page content.<!--]--></li><li><!--[-->Don't use alerts for actions initiated by the user or backend.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->An alert’s styling is according to its meaning and uses semantic colours.<!--]--></p><p><!--[-->Alert colours include:<!--]--></p><ul><!--[--><li><!--[-->grey for general information<!--]--></li><li><!--[-->orange for a minor warning<!--]--></li><li><!--[-->red for a critical error or expected dangerous event.<!--]--></li><!--]--></ul><h3 id="information"><a href="#information"><!--[-->Information<!--]--></a></h3><ul><!--[--><li><!--[-->To communicate general information to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--information&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--information&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="warning"><a href="#warning"><!--[-->Warning<!--]--></a></h3><ul><!--[--><li><!--[-->To communicate a minor warnings to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--warning&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--warning&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="critical"><a href="#critical"><!--[-->Critical<!--]--></a></h3><ul><!--[--><li><!--[-->To communicate a critical error has occurred or dangerous event is expected to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--danger&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--danger&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="alert-ordering"><a href="#alert-ordering"><!--[-->Alert ordering<!--]--></a></h2><p><!--[-->So that users view alerts in order of importance, they appear in priority order:<!--]--></p><ol><!--[--><li><!--[-->Critical.<!--]--></li><li><!--[-->Warning.<!--]--></li><li><!--[-->Information.<!--]--></li><!--]--></ol><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--stacked&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--stacked&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/alert.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/alert/_payload.json">[{"state":1,"_errors":592,"serverRendered":595,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":282,"$sdd-globals":296,"$sdd-navigation":297},{"/design-system/components/alert":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":277,"_id":278,"_source":279,"_file":280,"_extension":281},"/design-system/components/alert","components",false,"","Alert","The Alert component display required actions or important messages to users.","page","Core",{"type":14,"children":15,"toc":263},"root",[16,25,31,36,61,66,71,78,111,117,135,139,145,150,155,173,179,187,190,196,204,208,214,222,226,229,235,240,259],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Alerts attract a user's attention with important messages or required actions. They appear at the top of pages.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Alerts are:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"intrusive by design",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"created on purpose",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"dismissible by a user",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"not triggered by user action or back-end event.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.",{"type":17,"tag":67,"props":68,"children":70},"docs-example",{"id":69},"core-containers-alert--information",[],{"type":17,"tag":72,"props":73,"children":75},"h3",{"id":74},"when-and-how-to-use",[76],{"type":23,"value":77},"When and how to use",{"type":17,"tag":37,"props":79,"children":80},{},[81,86,91,96,101,106],{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Only use an alert if its message or action applies to an entire product or site.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Write the alert in plain language that's clean and concise to minimise a user's cognitive load.",{"type":17,"tag":41,"props":92,"children":93},{},[94],{"type":23,"value":95},"If the user needs more information or to complete an action, use link text for the call to action.",{"type":17,"tag":41,"props":97,"children":98},{},[99],{"type":23,"value":100},"Place the alert at the top of the screen before the header.",{"type":17,"tag":41,"props":102,"children":103},{},[104],{"type":23,"value":105},"Only use the critical alert setting for messages or actions that warrant it.",{"type":17,"tag":41,"props":107,"children":108},{},[109],{"type":23,"value":110},"Limit actions to one per alert banner.",{"type":17,"tag":72,"props":112,"children":114},{"id":113},"when-and-how-not-to-use",[115],{"type":23,"value":116},"When and how not to use",{"type":17,"tag":37,"props":118,"children":119},{},[120,125,130],{"type":17,"tag":41,"props":121,"children":122},{},[123],{"type":23,"value":124},"Don’t use an alert if its message applies only to that feature or page.",{"type":17,"tag":41,"props":126,"children":127},{},[128],{"type":23,"value":129},"Alerts shouldn't cover other components, only pushing down page content.",{"type":17,"tag":41,"props":131,"children":132},{},[133],{"type":23,"value":134},"Don't use alerts for actions initiated by the user or backend.",{"type":17,"tag":136,"props":137,"children":138},"hr",{},[],{"type":17,"tag":18,"props":140,"children":142},{"id":141},"variants",[143],{"type":23,"value":144},"Variants",{"type":17,"tag":26,"props":146,"children":147},{},[148],{"type":23,"value":149},"An alert’s styling is according to its meaning and uses semantic colours.",{"type":17,"tag":26,"props":151,"children":152},{},[153],{"type":23,"value":154},"Alert colours include:",{"type":17,"tag":37,"props":156,"children":157},{},[158,163,168],{"type":17,"tag":41,"props":159,"children":160},{},[161],{"type":23,"value":162},"grey for general information",{"type":17,"tag":41,"props":164,"children":165},{},[166],{"type":23,"value":167},"orange for a minor warning",{"type":17,"tag":41,"props":169,"children":170},{},[171],{"type":23,"value":172},"red for a critical error or expected dangerous event.",{"type":17,"tag":72,"props":174,"children":176},{"id":175},"information",[177],{"type":23,"value":178},"Information",{"type":17,"tag":37,"props":180,"children":181},{},[182],{"type":17,"tag":41,"props":183,"children":184},{},[185],{"type":23,"value":186},"To communicate general information to users.",{"type":17,"tag":67,"props":188,"children":189},{"id":69},[],{"type":17,"tag":72,"props":191,"children":193},{"id":192},"warning",[194],{"type":23,"value":195},"Warning",{"type":17,"tag":37,"props":197,"children":198},{},[199],{"type":17,"tag":41,"props":200,"children":201},{},[202],{"type":23,"value":203},"To communicate a minor warnings to users.",{"type":17,"tag":67,"props":205,"children":207},{"id":206},"core-containers-alert--warning",[],{"type":17,"tag":72,"props":209,"children":211},{"id":210},"critical",[212],{"type":23,"value":213},"Critical",{"type":17,"tag":37,"props":215,"children":216},{},[217],{"type":17,"tag":41,"props":218,"children":219},{},[220],{"type":23,"value":221},"To communicate a critical error has occurred or dangerous event is expected to users.",{"type":17,"tag":67,"props":223,"children":225},{"id":224},"core-containers-alert--danger",[],{"type":17,"tag":136,"props":227,"children":228},{},[],{"type":17,"tag":18,"props":230,"children":232},{"id":231},"alert-ordering",[233],{"type":23,"value":234},"Alert ordering",{"type":17,"tag":26,"props":236,"children":237},{},[238],{"type":23,"value":239},"So that users view alerts in order of importance, they appear in priority order:",{"type":17,"tag":241,"props":242,"children":243},"ol",{},[244,249,254],{"type":17,"tag":41,"props":245,"children":246},{},[247],{"type":23,"value":248},"Critical.",{"type":17,"tag":41,"props":250,"children":251},{},[252],{"type":23,"value":253},"Warning.",{"type":17,"tag":41,"props":255,"children":256},{},[257],{"type":23,"value":258},"Information.",{"type":17,"tag":67,"props":260,"children":262},{"id":261},"core-containers-alert--stacked",[],{"title":8,"searchDepth":264,"depth":264,"links":265},2,[266,271,276],{"id":20,"depth":264,"text":24,"children":267},[268,270],{"id":74,"depth":269,"text":77},3,{"id":113,"depth":269,"text":116},{"id":141,"depth":264,"text":144,"children":272},[273,274,275],{"id":175,"depth":269,"text":178},{"id":192,"depth":269,"text":195},{"id":210,"depth":269,"text":213},{"id":231,"depth":264,"text":234},"markdown","content:design-system:5.components:alert.md","content","design-system/5.components/alert.md","md",{"/design-system/components/alert":283},[284,290],{"_path":285,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":286,"description":287,"layout":11,"label":12,"_type":277,"_id":288,"_source":279,"_file":289,"_extension":281},"/design-system/components/acknowledgment","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","content:design-system:5.components:acknowledgment.md","design-system/5.components/acknowledgment.md",{"_path":291,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":292,"description":293,"layout":11,"label":12,"_type":277,"_id":294,"_source":279,"_file":295,"_extension":281},"/design-system/components/block-quote","Block quote","The Block quote component adds emphasis to a quote.","content:design-system:5.components:block-quote.md","design-system/5.components/block-quote.md",{},[298,303,544],{"title":299,"_path":300,"icon":301,"layout":302},"Ripple Design System","/","carbon:home","home",{"title":304,"_path":305,"children":306},"Design System","/design-system",[307,323,339,368,402],{"title":308,"_path":309,"children":310},"About","/design-system/about",[311,314,317,320],{"title":312,"_path":313,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":315,"_path":316,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":318,"_path":319,"layout":11},"Support","/design-system/about/getting-support",{"title":321,"_path":322,"layout":11},"Contributing","/design-system/about/contributing",{"title":324,"_path":325,"children":326},"Design","/design-system/design",[327,330,333,336],{"title":328,"_path":329,"layout":11},"Getting started","/design-system/design/getting-started",{"title":331,"_path":332,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":334,"_path":335,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":337,"_path":338,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":340,"_path":341,"children":342},"Develop","/design-system/develop",[343,345,347,350],{"title":328,"_path":344,"layout":11},"/design-system/develop/getting-started",{"title":321,"_path":346,"layout":11},"/design-system/develop/contributing",{"title":348,"_path":349,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":351,"children":352,"layout":11},"/design-system/develop/usage",[353,356,359,362,365],{"title":354,"_path":355,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":357,"_path":358,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":360,"_path":361,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":363,"_path":364,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":366,"_path":367,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":369,"_path":370,"children":371},"Styles","/design-system/styles",[372,375,378,381,384,387,390,393,396,399],{"title":373,"_path":374,"layout":11},"Colour","/design-system/styles/colour",{"title":376,"_path":377,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":379,"_path":380,"layout":11},"Grid","/design-system/styles/grid",{"title":382,"_path":383,"layout":11},"Icons","/design-system/styles/icons",{"title":385,"_path":386,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":388,"_path":389,"layout":11},"Layout","/design-system/styles/layout",{"title":391,"_path":392,"layout":11},"Logo","/design-system/styles/logo",{"title":394,"_path":395,"layout":11},"Motion","/design-system/styles/motion",{"title":397,"_path":398,"layout":11},"Spacing","/design-system/styles/spacing",{"title":400,"_path":401,"layout":11},"Typography","/design-system/styles/typography",{"title":403,"_path":404,"children":405},"Components","/design-system/components",[406,409,410,411,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541],{"title":407,"_path":408,"layout":11},"Accordion","/design-system/components/accordion",{"title":286,"_path":285,"layout":11},{"title":9,"_path":5,"layout":11},{"title":292,"_path":291,"layout":11},{"title":413,"_path":414,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":416,"_path":417,"layout":11},"Button","/design-system/components/button",{"title":419,"_path":420,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":422,"_path":423,"layout":11},"Callout","/design-system/components/callout",{"title":425,"_path":426,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":428,"_path":429,"layout":11},"Card","/design-system/components/card",{"title":431,"_path":432,"layout":11},"Carousel","/design-system/components/carousel",{"title":434,"_path":435,"layout":11},"Category grid","/design-system/components/category-grid",{"title":437,"_path":438,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":440,"_path":441,"layout":11},"Chip","/design-system/components/chip",{"title":443,"_path":444,"layout":11},"Contact us","/design-system/components/contact-us",{"title":446,"_path":447,"layout":11},"Date input","/design-system/components/date-input",{"title":449,"_path":450,"layout":11},"Detail list","/design-system/components/detail-list",{"title":452,"_path":453,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":455,"_path":456,"layout":11},"File","/design-system/components/file",{"title":458,"_path":459,"layout":11},"Footer","/design-system/components/footer",{"title":461,"_path":462,"layout":11},"Form alert","/design-system/components/form-alert",{"title":464,"_path":465,"layout":11},"Form","/design-system/components/form",{"title":467,"_path":468,"layout":11},"Header","/design-system/components/header",{"title":470,"_path":471,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":473,"_path":474,"layout":11},"Input field","/design-system/components/input-field",{"title":476,"_path":477,"layout":11},"Key dates","/design-system/components/key-dates",{"title":479,"_path":480,"layout":11},"Media embed","/design-system/components/media-embed",{"title":482,"_path":483,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":485,"_path":486,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":488,"_path":489,"layout":11},"Media","/design-system/components/media",{"title":491,"_path":492,"layout":11},"Option button","/design-system/components/option-button",{"title":494,"_path":495,"layout":11},"Page action","/design-system/components/page-action",{"title":497,"_path":498,"layout":11},"Pagination","/design-system/components/pagination",{"title":500,"_path":501,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":503,"_path":504,"layout":11},"Profile","/design-system/components/profile",{"title":506,"_path":507,"layout":11},"Radio button","/design-system/components/radio-button",{"title":509,"_path":510,"layout":11},"Related links","/design-system/components/related-links",{"title":512,"_path":513,"layout":11},"Results listing","/design-system/components/results-listing",{"title":515,"_path":516,"layout":11},"Search bar","/design-system/components/search-bar",{"title":518,"_path":519,"layout":11},"Skip link","/design-system/components/skip-link",{"title":521,"_path":522,"layout":11},"Social share","/design-system/components/social-share",{"title":524,"_path":525,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":527,"_path":528,"layout":11},"Table","/design-system/components/table",{"title":530,"_path":531,"layout":11},"Tabs","/design-system/components/tabs",{"title":533,"_path":534,"layout":11},"Tag","/design-system/components/tag",{"title":536,"_path":537,"layout":11},"Text area","/design-system/components/text-area",{"title":539,"_path":540,"layout":11},"Timeline","/design-system/components/timeline",{"title":542,"_path":543,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":545,"_path":546,"children":547,"layout":11},"Ripple Framework","/framework",[548,549,567,589],{"title":545,"_path":546,"layout":11},{"title":550,"_path":551,"children":552},"Key Concepts","/framework/key-concepts",[553,555,558,561,564],{"title":360,"_path":554,"layout":11},"/framework/key-concepts/nuxt",{"title":556,"_path":557,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":559,"_path":560,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":562,"_path":563,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":565,"_path":566,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":568,"_path":569,"children":570},"Guides","/framework/guides",[571,574,577,580,583,586],{"title":572,"_path":573,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":575,"_path":576,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":578,"_path":579,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":581,"_path":582,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":584,"_path":585,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":587,"_path":588,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":590,"_path":591,"layout":11},"Core modules","/framework/core-modules",["Reactive",593],{"module-navigation":594},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Alert</h1><p class="rpl-type-p-large" data-v-3163c6df>The Alert component display required actions or important messages to users.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Alerts attract a user's attention with important messages or required actions. They appear at the top of pages.<!--]--></p><p><!--[-->Alerts are:<!--]--></p><ul><!--[--><li><!--[-->intrusive by design<!--]--></li><li><!--[-->created on purpose<!--]--></li><li><!--[-->dismissible by a user<!--]--></li><li><!--[-->not triggered by user action or back-end event.<!--]--></li><!--]--></ul><p><!--[-->Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--information&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--information&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only use an alert if its message or action applies to an entire product or site.<!--]--></li><li><!--[-->Write the alert in plain language that's clean and concise to minimise a user's cognitive load.<!--]--></li><li><!--[-->If the user needs more information or to complete an action, use link text for the call to action.<!--]--></li><li><!--[-->Place the alert at the top of the screen before the header.<!--]--></li><li><!--[-->Only use the critical alert setting for messages or actions that warrant it.<!--]--></li><li><!--[-->Limit actions to one per alert banner.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use an alert if its message applies only to that feature or page.<!--]--></li><li><!--[-->Alerts shouldn't cover other components, only pushing down page content.<!--]--></li><li><!--[-->Don't use alerts for actions initiated by the user or backend.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->An alert’s styling is according to its meaning and uses semantic colours.<!--]--></p><p><!--[-->Alert colours include:<!--]--></p><ul><!--[--><li><!--[-->grey for general information<!--]--></li><li><!--[-->orange for a minor warning<!--]--></li><li><!--[-->red for a critical error or expected dangerous event.<!--]--></li><!--]--></ul><h3 id="information"><a href="#information"><!--[-->Information<!--]--></a></h3><ul><!--[--><li><!--[-->To communicate general information to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--information&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--information&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="warning"><a href="#warning"><!--[-->Warning<!--]--></a></h3><ul><!--[--><li><!--[-->To communicate a minor warnings to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--warning&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--warning&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="critical"><a href="#critical"><!--[-->Critical<!--]--></a></h3><ul><!--[--><li><!--[-->To communicate a critical error has occurred or dangerous event is expected to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--danger&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--danger&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="alert-ordering"><a href="#alert-ordering"><!--[-->Alert ordering<!--]--></a></h2><p><!--[-->So that users view alerts in order of importance, they appear in priority order:<!--]--></p><ol><!--[--><li><!--[-->Critical.<!--]--></li><li><!--[-->Warning.<!--]--></li><li><!--[-->Information.<!--]--></li><!--]--></ol><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-alert--stacked&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--stacked&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/alert.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/alert/_payload.json">[{"state":1,"_errors":592,"serverRendered":595,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":282,"$sdd-globals":296,"$sdd-navigation":297},{"/design-system/components/alert":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":277,"_id":278,"_source":279,"_file":280,"_extension":281},"/design-system/components/alert","components",false,"","Alert","The Alert component display required actions or important messages to users.","page","Core",{"type":14,"children":15,"toc":263},"root",[16,25,31,36,61,66,71,78,111,117,135,139,145,150,155,173,179,187,190,196,204,208,214,222,226,229,235,240,259],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Alerts attract a user's attention with important messages or required actions. They appear at the top of pages.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Alerts are:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"intrusive by design",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"created on purpose",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"dismissible by a user",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"not triggered by user action or back-end event.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.",{"type":17,"tag":67,"props":68,"children":70},"docs-example",{"id":69},"core-containers-alert--information",[],{"type":17,"tag":72,"props":73,"children":75},"h3",{"id":74},"when-and-how-to-use",[76],{"type":23,"value":77},"When and how to use",{"type":17,"tag":37,"props":79,"children":80},{},[81,86,91,96,101,106],{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Only use an alert if its message or action applies to an entire product or site.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Write the alert in plain language that's clean and concise to minimise a user's cognitive load.",{"type":17,"tag":41,"props":92,"children":93},{},[94],{"type":23,"value":95},"If the user needs more information or to complete an action, use link text for the call to action.",{"type":17,"tag":41,"props":97,"children":98},{},[99],{"type":23,"value":100},"Place the alert at the top of the screen before the header.",{"type":17,"tag":41,"props":102,"children":103},{},[104],{"type":23,"value":105},"Only use the critical alert setting for messages or actions that warrant it.",{"type":17,"tag":41,"props":107,"children":108},{},[109],{"type":23,"value":110},"Limit actions to one per alert banner.",{"type":17,"tag":72,"props":112,"children":114},{"id":113},"when-and-how-not-to-use",[115],{"type":23,"value":116},"When and how not to use",{"type":17,"tag":37,"props":118,"children":119},{},[120,125,130],{"type":17,"tag":41,"props":121,"children":122},{},[123],{"type":23,"value":124},"Don’t use an alert if its message applies only to that feature or page.",{"type":17,"tag":41,"props":126,"children":127},{},[128],{"type":23,"value":129},"Alerts shouldn't cover other components, only pushing down page content.",{"type":17,"tag":41,"props":131,"children":132},{},[133],{"type":23,"value":134},"Don't use alerts for actions initiated by the user or backend.",{"type":17,"tag":136,"props":137,"children":138},"hr",{},[],{"type":17,"tag":18,"props":140,"children":142},{"id":141},"variants",[143],{"type":23,"value":144},"Variants",{"type":17,"tag":26,"props":146,"children":147},{},[148],{"type":23,"value":149},"An alert’s styling is according to its meaning and uses semantic colours.",{"type":17,"tag":26,"props":151,"children":152},{},[153],{"type":23,"value":154},"Alert colours include:",{"type":17,"tag":37,"props":156,"children":157},{},[158,163,168],{"type":17,"tag":41,"props":159,"children":160},{},[161],{"type":23,"value":162},"grey for general information",{"type":17,"tag":41,"props":164,"children":165},{},[166],{"type":23,"value":167},"orange for a minor warning",{"type":17,"tag":41,"props":169,"children":170},{},[171],{"type":23,"value":172},"red for a critical error or expected dangerous event.",{"type":17,"tag":72,"props":174,"children":176},{"id":175},"information",[177],{"type":23,"value":178},"Information",{"type":17,"tag":37,"props":180,"children":181},{},[182],{"type":17,"tag":41,"props":183,"children":184},{},[185],{"type":23,"value":186},"To communicate general information to users.",{"type":17,"tag":67,"props":188,"children":189},{"id":69},[],{"type":17,"tag":72,"props":191,"children":193},{"id":192},"warning",[194],{"type":23,"value":195},"Warning",{"type":17,"tag":37,"props":197,"children":198},{},[199],{"type":17,"tag":41,"props":200,"children":201},{},[202],{"type":23,"value":203},"To communicate a minor warnings to users.",{"type":17,"tag":67,"props":205,"children":207},{"id":206},"core-containers-alert--warning",[],{"type":17,"tag":72,"props":209,"children":211},{"id":210},"critical",[212],{"type":23,"value":213},"Critical",{"type":17,"tag":37,"props":215,"children":216},{},[217],{"type":17,"tag":41,"props":218,"children":219},{},[220],{"type":23,"value":221},"To communicate a critical error has occurred or dangerous event is expected to users.",{"type":17,"tag":67,"props":223,"children":225},{"id":224},"core-containers-alert--danger",[],{"type":17,"tag":136,"props":227,"children":228},{},[],{"type":17,"tag":18,"props":230,"children":232},{"id":231},"alert-ordering",[233],{"type":23,"value":234},"Alert ordering",{"type":17,"tag":26,"props":236,"children":237},{},[238],{"type":23,"value":239},"So that users view alerts in order of importance, they appear in priority order:",{"type":17,"tag":241,"props":242,"children":243},"ol",{},[244,249,254],{"type":17,"tag":41,"props":245,"children":246},{},[247],{"type":23,"value":248},"Critical.",{"type":17,"tag":41,"props":250,"children":251},{},[252],{"type":23,"value":253},"Warning.",{"type":17,"tag":41,"props":255,"children":256},{},[257],{"type":23,"value":258},"Information.",{"type":17,"tag":67,"props":260,"children":262},{"id":261},"core-containers-alert--stacked",[],{"title":8,"searchDepth":264,"depth":264,"links":265},2,[266,271,276],{"id":20,"depth":264,"text":24,"children":267},[268,270],{"id":74,"depth":269,"text":77},3,{"id":113,"depth":269,"text":116},{"id":141,"depth":264,"text":144,"children":272},[273,274,275],{"id":175,"depth":269,"text":178},{"id":192,"depth":269,"text":195},{"id":210,"depth":269,"text":213},{"id":231,"depth":264,"text":234},"markdown","content:design-system:5.components:alert.md","content","design-system/5.components/alert.md","md",{"/design-system/components/alert":283},[284,290],{"_path":285,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":286,"description":287,"layout":11,"label":12,"_type":277,"_id":288,"_source":279,"_file":289,"_extension":281},"/design-system/components/acknowledgment","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","content:design-system:5.components:acknowledgment.md","design-system/5.components/acknowledgment.md",{"_path":291,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":292,"description":293,"layout":11,"label":12,"_type":277,"_id":294,"_source":279,"_file":295,"_extension":281},"/design-system/components/block-quote","Block quote","The Block quote component adds emphasis to a quote.","content:design-system:5.components:block-quote.md","design-system/5.components/block-quote.md",{},[298,303,544],{"title":299,"_path":300,"icon":301,"layout":302},"Ripple Design System","/","carbon:home","home",{"title":304,"_path":305,"children":306},"Design System","/design-system",[307,323,339,368,402],{"title":308,"_path":309,"children":310},"About","/design-system/about",[311,314,317,320],{"title":312,"_path":313,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":315,"_path":316,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":318,"_path":319,"layout":11},"Support","/design-system/about/getting-support",{"title":321,"_path":322,"layout":11},"Contributing","/design-system/about/contributing",{"title":324,"_path":325,"children":326},"Design","/design-system/design",[327,330,333,336],{"title":328,"_path":329,"layout":11},"Getting started","/design-system/design/getting-started",{"title":331,"_path":332,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":334,"_path":335,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":337,"_path":338,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":340,"_path":341,"children":342},"Develop","/design-system/develop",[343,345,347,350],{"title":328,"_path":344,"layout":11},"/design-system/develop/getting-started",{"title":321,"_path":346,"layout":11},"/design-system/develop/contributing",{"title":348,"_path":349,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":351,"children":352,"layout":11},"/design-system/develop/usage",[353,356,359,362,365],{"title":354,"_path":355,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":357,"_path":358,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":360,"_path":361,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":363,"_path":364,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":366,"_path":367,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":369,"_path":370,"children":371},"Styles","/design-system/styles",[372,375,378,381,384,387,390,393,396,399],{"title":373,"_path":374,"layout":11},"Colour","/design-system/styles/colour",{"title":376,"_path":377,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":379,"_path":380,"layout":11},"Grid","/design-system/styles/grid",{"title":382,"_path":383,"layout":11},"Icons","/design-system/styles/icons",{"title":385,"_path":386,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":388,"_path":389,"layout":11},"Layout","/design-system/styles/layout",{"title":391,"_path":392,"layout":11},"Logo","/design-system/styles/logo",{"title":394,"_path":395,"layout":11},"Motion","/design-system/styles/motion",{"title":397,"_path":398,"layout":11},"Spacing","/design-system/styles/spacing",{"title":400,"_path":401,"layout":11},"Typography","/design-system/styles/typography",{"title":403,"_path":404,"children":405},"Components","/design-system/components",[406,409,410,411,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541],{"title":407,"_path":408,"layout":11},"Accordion","/design-system/components/accordion",{"title":286,"_path":285,"layout":11},{"title":9,"_path":5,"layout":11},{"title":292,"_path":291,"layout":11},{"title":413,"_path":414,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":416,"_path":417,"layout":11},"Button","/design-system/components/button",{"title":419,"_path":420,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":422,"_path":423,"layout":11},"Callout","/design-system/components/callout",{"title":425,"_path":426,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":428,"_path":429,"layout":11},"Card","/design-system/components/card",{"title":431,"_path":432,"layout":11},"Carousel","/design-system/components/carousel",{"title":434,"_path":435,"layout":11},"Category grid","/design-system/components/category-grid",{"title":437,"_path":438,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":440,"_path":441,"layout":11},"Chip","/design-system/components/chip",{"title":443,"_path":444,"layout":11},"Contact us","/design-system/components/contact-us",{"title":446,"_path":447,"layout":11},"Date input","/design-system/components/date-input",{"title":449,"_path":450,"layout":11},"Detail list","/design-system/components/detail-list",{"title":452,"_path":453,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":455,"_path":456,"layout":11},"File","/design-system/components/file",{"title":458,"_path":459,"layout":11},"Footer","/design-system/components/footer",{"title":461,"_path":462,"layout":11},"Form alert","/design-system/components/form-alert",{"title":464,"_path":465,"layout":11},"Form","/design-system/components/form",{"title":467,"_path":468,"layout":11},"Header","/design-system/components/header",{"title":470,"_path":471,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":473,"_path":474,"layout":11},"Input field","/design-system/components/input-field",{"title":476,"_path":477,"layout":11},"Key dates","/design-system/components/key-dates",{"title":479,"_path":480,"layout":11},"Media embed","/design-system/components/media-embed",{"title":482,"_path":483,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":485,"_path":486,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":488,"_path":489,"layout":11},"Media","/design-system/components/media",{"title":491,"_path":492,"layout":11},"Option button","/design-system/components/option-button",{"title":494,"_path":495,"layout":11},"Page action","/design-system/components/page-action",{"title":497,"_path":498,"layout":11},"Pagination","/design-system/components/pagination",{"title":500,"_path":501,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":503,"_path":504,"layout":11},"Profile","/design-system/components/profile",{"title":506,"_path":507,"layout":11},"Radio button","/design-system/components/radio-button",{"title":509,"_path":510,"layout":11},"Related links","/design-system/components/related-links",{"title":512,"_path":513,"layout":11},"Results listing","/design-system/components/results-listing",{"title":515,"_path":516,"layout":11},"Search bar","/design-system/components/search-bar",{"title":518,"_path":519,"layout":11},"Skip link","/design-system/components/skip-link",{"title":521,"_path":522,"layout":11},"Social share","/design-system/components/social-share",{"title":524,"_path":525,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":527,"_path":528,"layout":11},"Table","/design-system/components/table",{"title":530,"_path":531,"layout":11},"Tabs","/design-system/components/tabs",{"title":533,"_path":534,"layout":11},"Tag","/design-system/components/tag",{"title":536,"_path":537,"layout":11},"Text area","/design-system/components/text-area",{"title":539,"_path":540,"layout":11},"Timeline","/design-system/components/timeline",{"title":542,"_path":543,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":545,"_path":546,"children":547,"layout":11},"Ripple Framework","/framework",[548,549,567,589],{"title":545,"_path":546,"layout":11},{"title":550,"_path":551,"children":552},"Key Concepts","/framework/key-concepts",[553,555,558,561,564],{"title":360,"_path":554,"layout":11},"/framework/key-concepts/nuxt",{"title":556,"_path":557,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":559,"_path":560,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":562,"_path":563,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":565,"_path":566,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":568,"_path":569,"children":570},"Guides","/framework/guides",[571,574,577,580,583,586],{"title":572,"_path":573,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":575,"_path":576,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":578,"_path":579,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":581,"_path":582,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":584,"_path":585,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":587,"_path":588,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":590,"_path":591,"layout":11},"Core modules","/framework/core-modules",["Reactive",593],{"module-navigation":594},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/block-quote/index.html b/design-system/components/block-quote/index.html index aa35fd2ccf..c5255ea5f3 100644 --- a/design-system/components/block-quote/index.html +++ b/design-system/components/block-quote/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Block quote</h1><p class="rpl-type-p-large" data-v-3163c6df>The Block quote component adds emphasis to a quote.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use block quotes to emphasise:<!--]--></p><ul><!--[--><li><!--[-->important information<!--]--></li><li><!--[-->excerpts from a source.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--blockquote&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--blockquote&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only use text in block quotes.<!--]--></li><li><!--[-->Always put all the quoted text inside opening and closing quotation marks (' ').<!--]--></li><li><!--[-->Include optional author metadata.<!--]--></li><li><!--[-->You can feature more than one quote by a single author.<!--]--></li><li><!--[-->Only use in content sections.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Do not repeat metadata across different quotes.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The block quote uses colour to add subtle visual prominence.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--blockquote&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--blockquote&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/block-quote.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/block-quote/_payload.json">[{"state":1,"_errors":470,"serverRendered":473,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":160,"$sdd-globals":174,"$sdd-navigation":175},{"/design-system/components/block-quote":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":155,"_id":156,"_source":157,"_file":158,"_extension":159},"/design-system/components/block-quote","components",false,"","Block quote","The Block quote component adds emphasis to a quote.","page","Core",{"type":14,"children":15,"toc":146},"root",[16,25,31,46,51,58,86,92,100,104,110,115,122],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use block quotes to emphasise:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"important information",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"excerpts from a source.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"core-containers-content--blockquote",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"when-and-how-to-use",[56],{"type":23,"value":57},"When and how to use",{"type":17,"tag":32,"props":59,"children":60},{},[61,66,71,76,81],{"type":17,"tag":36,"props":62,"children":63},{},[64],{"type":23,"value":65},"Only use text in block quotes.",{"type":17,"tag":36,"props":67,"children":68},{},[69],{"type":23,"value":70},"Always put all the quoted text inside opening and closing quotation marks (' ').",{"type":17,"tag":36,"props":72,"children":73},{},[74],{"type":23,"value":75},"Include optional author metadata.",{"type":17,"tag":36,"props":77,"children":78},{},[79],{"type":23,"value":80},"You can feature more than one quote by a single author.",{"type":17,"tag":36,"props":82,"children":83},{},[84],{"type":23,"value":85},"Only use in content sections.",{"type":17,"tag":52,"props":87,"children":89},{"id":88},"when-and-how-not-to-use",[90],{"type":23,"value":91},"When and how not to use",{"type":17,"tag":32,"props":93,"children":94},{},[95],{"type":17,"tag":36,"props":96,"children":97},{},[98],{"type":23,"value":99},"Do not repeat metadata across different quotes.",{"type":17,"tag":101,"props":102,"children":103},"hr",{},[],{"type":17,"tag":18,"props":105,"children":107},{"id":106},"theming",[108],{"type":23,"value":109},"Theming",{"type":17,"tag":26,"props":111,"children":112},{},[113],{"type":23,"value":114},"The block quote uses colour to add subtle visual prominence.",{"type":17,"tag":116,"props":117,"children":118},"docs-theme-chooser",{},[119],{"type":17,"tag":47,"props":120,"children":121},{"id":49},[],{"type":17,"tag":26,"props":123,"children":124},{},[125,127,136,138,144],{"type":23,"value":126},"To create your own theme, see ",{"type":17,"tag":128,"props":129,"children":133},"a",{"href":130,"rel":131},"https://www.vic.gov.au",[132],"nofollow",[134],{"type":23,"value":135},"theming guidance for designers",{"type":23,"value":137}," or ",{"type":17,"tag":128,"props":139,"children":141},{"href":130,"rel":140},[132],[142],{"type":23,"value":143},"theming guidance for developers",{"type":23,"value":145},".",{"title":8,"searchDepth":147,"depth":147,"links":148},2,[149,154],{"id":20,"depth":147,"text":24,"children":150},[151,153],{"id":54,"depth":152,"text":57},3,{"id":88,"depth":152,"text":91},{"id":106,"depth":147,"text":109},"markdown","content:design-system:5.components:block-quote.md","content","design-system/5.components/block-quote.md","md",{"/design-system/components/block-quote":161},[162,168],{"_path":163,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":164,"description":165,"layout":11,"label":12,"_type":155,"_id":166,"_source":157,"_file":167,"_extension":159},"/design-system/components/alert","Alert","The Alert component display required actions or important messages to users.","content:design-system:5.components:alert.md","design-system/5.components/alert.md",{"_path":169,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":170,"description":171,"layout":11,"label":12,"_type":155,"_id":172,"_source":157,"_file":173,"_extension":159},"/design-system/components/breadcrumb","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","content:design-system:5.components:breadcrumb.md","design-system/5.components/breadcrumb.md",{},[176,181,422],{"title":177,"_path":178,"icon":179,"layout":180},"Ripple Design System","/","carbon:home","home",{"title":182,"_path":183,"children":184},"Design System","/design-system",[185,201,217,246,280],{"title":186,"_path":187,"children":188},"About","/design-system/about",[189,192,195,198],{"title":190,"_path":191,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":193,"_path":194,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":196,"_path":197,"layout":11},"Support","/design-system/about/getting-support",{"title":199,"_path":200,"layout":11},"Contributing","/design-system/about/contributing",{"title":202,"_path":203,"children":204},"Design","/design-system/design",[205,208,211,214],{"title":206,"_path":207,"layout":11},"Getting started","/design-system/design/getting-started",{"title":209,"_path":210,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":212,"_path":213,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":215,"_path":216,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":218,"_path":219,"children":220},"Develop","/design-system/develop",[221,223,225,228],{"title":206,"_path":222,"layout":11},"/design-system/develop/getting-started",{"title":199,"_path":224,"layout":11},"/design-system/develop/contributing",{"title":226,"_path":227,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":229,"children":230,"layout":11},"/design-system/develop/usage",[231,234,237,240,243],{"title":232,"_path":233,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":235,"_path":236,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":238,"_path":239,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":241,"_path":242,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":244,"_path":245,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":247,"_path":248,"children":249},"Styles","/design-system/styles",[250,253,256,259,262,265,268,271,274,277],{"title":251,"_path":252,"layout":11},"Colour","/design-system/styles/colour",{"title":254,"_path":255,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":257,"_path":258,"layout":11},"Grid","/design-system/styles/grid",{"title":260,"_path":261,"layout":11},"Icons","/design-system/styles/icons",{"title":263,"_path":264,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":266,"_path":267,"layout":11},"Layout","/design-system/styles/layout",{"title":269,"_path":270,"layout":11},"Logo","/design-system/styles/logo",{"title":272,"_path":273,"layout":11},"Motion","/design-system/styles/motion",{"title":275,"_path":276,"layout":11},"Spacing","/design-system/styles/spacing",{"title":278,"_path":279,"layout":11},"Typography","/design-system/styles/typography",{"title":281,"_path":282,"children":283},"Components","/design-system/components",[284,287,290,291,292,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419],{"title":285,"_path":286,"layout":11},"Accordion","/design-system/components/accordion",{"title":288,"_path":289,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":164,"_path":163,"layout":11},{"title":9,"_path":5,"layout":11},{"title":170,"_path":169,"layout":11},{"title":294,"_path":295,"layout":11},"Button","/design-system/components/button",{"title":297,"_path":298,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":300,"_path":301,"layout":11},"Callout","/design-system/components/callout",{"title":303,"_path":304,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":306,"_path":307,"layout":11},"Card","/design-system/components/card",{"title":309,"_path":310,"layout":11},"Carousel","/design-system/components/carousel",{"title":312,"_path":313,"layout":11},"Category grid","/design-system/components/category-grid",{"title":315,"_path":316,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":318,"_path":319,"layout":11},"Chip","/design-system/components/chip",{"title":321,"_path":322,"layout":11},"Contact us","/design-system/components/contact-us",{"title":324,"_path":325,"layout":11},"Date input","/design-system/components/date-input",{"title":327,"_path":328,"layout":11},"Detail list","/design-system/components/detail-list",{"title":330,"_path":331,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":333,"_path":334,"layout":11},"File","/design-system/components/file",{"title":336,"_path":337,"layout":11},"Footer","/design-system/components/footer",{"title":339,"_path":340,"layout":11},"Form alert","/design-system/components/form-alert",{"title":342,"_path":343,"layout":11},"Form","/design-system/components/form",{"title":345,"_path":346,"layout":11},"Header","/design-system/components/header",{"title":348,"_path":349,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":351,"_path":352,"layout":11},"Input field","/design-system/components/input-field",{"title":354,"_path":355,"layout":11},"Key dates","/design-system/components/key-dates",{"title":357,"_path":358,"layout":11},"Media embed","/design-system/components/media-embed",{"title":360,"_path":361,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":363,"_path":364,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":366,"_path":367,"layout":11},"Media","/design-system/components/media",{"title":369,"_path":370,"layout":11},"Option button","/design-system/components/option-button",{"title":372,"_path":373,"layout":11},"Page action","/design-system/components/page-action",{"title":375,"_path":376,"layout":11},"Pagination","/design-system/components/pagination",{"title":378,"_path":379,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":381,"_path":382,"layout":11},"Profile","/design-system/components/profile",{"title":384,"_path":385,"layout":11},"Radio button","/design-system/components/radio-button",{"title":387,"_path":388,"layout":11},"Related links","/design-system/components/related-links",{"title":390,"_path":391,"layout":11},"Results listing","/design-system/components/results-listing",{"title":393,"_path":394,"layout":11},"Search bar","/design-system/components/search-bar",{"title":396,"_path":397,"layout":11},"Skip link","/design-system/components/skip-link",{"title":399,"_path":400,"layout":11},"Social share","/design-system/components/social-share",{"title":402,"_path":403,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":405,"_path":406,"layout":11},"Table","/design-system/components/table",{"title":408,"_path":409,"layout":11},"Tabs","/design-system/components/tabs",{"title":411,"_path":412,"layout":11},"Tag","/design-system/components/tag",{"title":414,"_path":415,"layout":11},"Text area","/design-system/components/text-area",{"title":417,"_path":418,"layout":11},"Timeline","/design-system/components/timeline",{"title":420,"_path":421,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":423,"_path":424,"children":425,"layout":11},"Ripple Framework","/framework",[426,427,445,467],{"title":423,"_path":424,"layout":11},{"title":428,"_path":429,"children":430},"Key Concepts","/framework/key-concepts",[431,433,436,439,442],{"title":238,"_path":432,"layout":11},"/framework/key-concepts/nuxt",{"title":434,"_path":435,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":437,"_path":438,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":440,"_path":441,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":443,"_path":444,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":446,"_path":447,"children":448},"Guides","/framework/guides",[449,452,455,458,461,464],{"title":450,"_path":451,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":453,"_path":454,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":456,"_path":457,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":459,"_path":460,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":462,"_path":463,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":465,"_path":466,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":468,"_path":469,"layout":11},"Core modules","/framework/core-modules",["Reactive",471],{"module-navigation":472},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Block quote</h1><p class="rpl-type-p-large" data-v-3163c6df>The Block quote component adds emphasis to a quote.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use block quotes to emphasise:<!--]--></p><ul><!--[--><li><!--[-->important information<!--]--></li><li><!--[-->excerpts from a source.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--blockquote&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--blockquote&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only use text in block quotes.<!--]--></li><li><!--[-->Always put all the quoted text inside opening and closing quotation marks (' ').<!--]--></li><li><!--[-->Include optional author metadata.<!--]--></li><li><!--[-->You can feature more than one quote by a single author.<!--]--></li><li><!--[-->Only use in content sections.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Do not repeat metadata across different quotes.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The block quote uses colour to add subtle visual prominence.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--blockquote&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--blockquote&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/block-quote.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/block-quote/_payload.json">[{"state":1,"_errors":470,"serverRendered":473,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":160,"$sdd-globals":174,"$sdd-navigation":175},{"/design-system/components/block-quote":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":155,"_id":156,"_source":157,"_file":158,"_extension":159},"/design-system/components/block-quote","components",false,"","Block quote","The Block quote component adds emphasis to a quote.","page","Core",{"type":14,"children":15,"toc":146},"root",[16,25,31,46,51,58,86,92,100,104,110,115,122],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use block quotes to emphasise:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"important information",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"excerpts from a source.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"core-containers-content--blockquote",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"when-and-how-to-use",[56],{"type":23,"value":57},"When and how to use",{"type":17,"tag":32,"props":59,"children":60},{},[61,66,71,76,81],{"type":17,"tag":36,"props":62,"children":63},{},[64],{"type":23,"value":65},"Only use text in block quotes.",{"type":17,"tag":36,"props":67,"children":68},{},[69],{"type":23,"value":70},"Always put all the quoted text inside opening and closing quotation marks (' ').",{"type":17,"tag":36,"props":72,"children":73},{},[74],{"type":23,"value":75},"Include optional author metadata.",{"type":17,"tag":36,"props":77,"children":78},{},[79],{"type":23,"value":80},"You can feature more than one quote by a single author.",{"type":17,"tag":36,"props":82,"children":83},{},[84],{"type":23,"value":85},"Only use in content sections.",{"type":17,"tag":52,"props":87,"children":89},{"id":88},"when-and-how-not-to-use",[90],{"type":23,"value":91},"When and how not to use",{"type":17,"tag":32,"props":93,"children":94},{},[95],{"type":17,"tag":36,"props":96,"children":97},{},[98],{"type":23,"value":99},"Do not repeat metadata across different quotes.",{"type":17,"tag":101,"props":102,"children":103},"hr",{},[],{"type":17,"tag":18,"props":105,"children":107},{"id":106},"theming",[108],{"type":23,"value":109},"Theming",{"type":17,"tag":26,"props":111,"children":112},{},[113],{"type":23,"value":114},"The block quote uses colour to add subtle visual prominence.",{"type":17,"tag":116,"props":117,"children":118},"docs-theme-chooser",{},[119],{"type":17,"tag":47,"props":120,"children":121},{"id":49},[],{"type":17,"tag":26,"props":123,"children":124},{},[125,127,136,138,144],{"type":23,"value":126},"To create your own theme, see ",{"type":17,"tag":128,"props":129,"children":133},"a",{"href":130,"rel":131},"https://www.vic.gov.au",[132],"nofollow",[134],{"type":23,"value":135},"theming guidance for designers",{"type":23,"value":137}," or ",{"type":17,"tag":128,"props":139,"children":141},{"href":130,"rel":140},[132],[142],{"type":23,"value":143},"theming guidance for developers",{"type":23,"value":145},".",{"title":8,"searchDepth":147,"depth":147,"links":148},2,[149,154],{"id":20,"depth":147,"text":24,"children":150},[151,153],{"id":54,"depth":152,"text":57},3,{"id":88,"depth":152,"text":91},{"id":106,"depth":147,"text":109},"markdown","content:design-system:5.components:block-quote.md","content","design-system/5.components/block-quote.md","md",{"/design-system/components/block-quote":161},[162,168],{"_path":163,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":164,"description":165,"layout":11,"label":12,"_type":155,"_id":166,"_source":157,"_file":167,"_extension":159},"/design-system/components/alert","Alert","The Alert component display required actions or important messages to users.","content:design-system:5.components:alert.md","design-system/5.components/alert.md",{"_path":169,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":170,"description":171,"layout":11,"label":12,"_type":155,"_id":172,"_source":157,"_file":173,"_extension":159},"/design-system/components/breadcrumb","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","content:design-system:5.components:breadcrumb.md","design-system/5.components/breadcrumb.md",{},[176,181,422],{"title":177,"_path":178,"icon":179,"layout":180},"Ripple Design System","/","carbon:home","home",{"title":182,"_path":183,"children":184},"Design System","/design-system",[185,201,217,246,280],{"title":186,"_path":187,"children":188},"About","/design-system/about",[189,192,195,198],{"title":190,"_path":191,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":193,"_path":194,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":196,"_path":197,"layout":11},"Support","/design-system/about/getting-support",{"title":199,"_path":200,"layout":11},"Contributing","/design-system/about/contributing",{"title":202,"_path":203,"children":204},"Design","/design-system/design",[205,208,211,214],{"title":206,"_path":207,"layout":11},"Getting started","/design-system/design/getting-started",{"title":209,"_path":210,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":212,"_path":213,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":215,"_path":216,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":218,"_path":219,"children":220},"Develop","/design-system/develop",[221,223,225,228],{"title":206,"_path":222,"layout":11},"/design-system/develop/getting-started",{"title":199,"_path":224,"layout":11},"/design-system/develop/contributing",{"title":226,"_path":227,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":229,"children":230,"layout":11},"/design-system/develop/usage",[231,234,237,240,243],{"title":232,"_path":233,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":235,"_path":236,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":238,"_path":239,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":241,"_path":242,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":244,"_path":245,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":247,"_path":248,"children":249},"Styles","/design-system/styles",[250,253,256,259,262,265,268,271,274,277],{"title":251,"_path":252,"layout":11},"Colour","/design-system/styles/colour",{"title":254,"_path":255,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":257,"_path":258,"layout":11},"Grid","/design-system/styles/grid",{"title":260,"_path":261,"layout":11},"Icons","/design-system/styles/icons",{"title":263,"_path":264,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":266,"_path":267,"layout":11},"Layout","/design-system/styles/layout",{"title":269,"_path":270,"layout":11},"Logo","/design-system/styles/logo",{"title":272,"_path":273,"layout":11},"Motion","/design-system/styles/motion",{"title":275,"_path":276,"layout":11},"Spacing","/design-system/styles/spacing",{"title":278,"_path":279,"layout":11},"Typography","/design-system/styles/typography",{"title":281,"_path":282,"children":283},"Components","/design-system/components",[284,287,290,291,292,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419],{"title":285,"_path":286,"layout":11},"Accordion","/design-system/components/accordion",{"title":288,"_path":289,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":164,"_path":163,"layout":11},{"title":9,"_path":5,"layout":11},{"title":170,"_path":169,"layout":11},{"title":294,"_path":295,"layout":11},"Button","/design-system/components/button",{"title":297,"_path":298,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":300,"_path":301,"layout":11},"Callout","/design-system/components/callout",{"title":303,"_path":304,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":306,"_path":307,"layout":11},"Card","/design-system/components/card",{"title":309,"_path":310,"layout":11},"Carousel","/design-system/components/carousel",{"title":312,"_path":313,"layout":11},"Category grid","/design-system/components/category-grid",{"title":315,"_path":316,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":318,"_path":319,"layout":11},"Chip","/design-system/components/chip",{"title":321,"_path":322,"layout":11},"Contact us","/design-system/components/contact-us",{"title":324,"_path":325,"layout":11},"Date input","/design-system/components/date-input",{"title":327,"_path":328,"layout":11},"Detail list","/design-system/components/detail-list",{"title":330,"_path":331,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":333,"_path":334,"layout":11},"File","/design-system/components/file",{"title":336,"_path":337,"layout":11},"Footer","/design-system/components/footer",{"title":339,"_path":340,"layout":11},"Form alert","/design-system/components/form-alert",{"title":342,"_path":343,"layout":11},"Form","/design-system/components/form",{"title":345,"_path":346,"layout":11},"Header","/design-system/components/header",{"title":348,"_path":349,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":351,"_path":352,"layout":11},"Input field","/design-system/components/input-field",{"title":354,"_path":355,"layout":11},"Key dates","/design-system/components/key-dates",{"title":357,"_path":358,"layout":11},"Media embed","/design-system/components/media-embed",{"title":360,"_path":361,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":363,"_path":364,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":366,"_path":367,"layout":11},"Media","/design-system/components/media",{"title":369,"_path":370,"layout":11},"Option button","/design-system/components/option-button",{"title":372,"_path":373,"layout":11},"Page action","/design-system/components/page-action",{"title":375,"_path":376,"layout":11},"Pagination","/design-system/components/pagination",{"title":378,"_path":379,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":381,"_path":382,"layout":11},"Profile","/design-system/components/profile",{"title":384,"_path":385,"layout":11},"Radio button","/design-system/components/radio-button",{"title":387,"_path":388,"layout":11},"Related links","/design-system/components/related-links",{"title":390,"_path":391,"layout":11},"Results listing","/design-system/components/results-listing",{"title":393,"_path":394,"layout":11},"Search bar","/design-system/components/search-bar",{"title":396,"_path":397,"layout":11},"Skip link","/design-system/components/skip-link",{"title":399,"_path":400,"layout":11},"Social share","/design-system/components/social-share",{"title":402,"_path":403,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":405,"_path":406,"layout":11},"Table","/design-system/components/table",{"title":408,"_path":409,"layout":11},"Tabs","/design-system/components/tabs",{"title":411,"_path":412,"layout":11},"Tag","/design-system/components/tag",{"title":414,"_path":415,"layout":11},"Text area","/design-system/components/text-area",{"title":417,"_path":418,"layout":11},"Timeline","/design-system/components/timeline",{"title":420,"_path":421,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":423,"_path":424,"children":425,"layout":11},"Ripple Framework","/framework",[426,427,445,467],{"title":423,"_path":424,"layout":11},{"title":428,"_path":429,"children":430},"Key Concepts","/framework/key-concepts",[431,433,436,439,442],{"title":238,"_path":432,"layout":11},"/framework/key-concepts/nuxt",{"title":434,"_path":435,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":437,"_path":438,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":440,"_path":441,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":443,"_path":444,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":446,"_path":447,"children":448},"Guides","/framework/guides",[449,452,455,458,461,464],{"title":450,"_path":451,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":453,"_path":454,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":456,"_path":457,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":459,"_path":460,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":462,"_path":463,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":465,"_path":466,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":468,"_path":469,"layout":11},"Core modules","/framework/core-modules",["Reactive",471],{"module-navigation":472},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/breadcrumb/index.html b/design-system/components/breadcrumb/index.html index 700cf3e08d..06e8ae2d5a 100644 --- a/design-system/components/breadcrumb/index.html +++ b/design-system/components/breadcrumb/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Breadcrumb</h1><p class="rpl-type-p-large" data-v-3163c6df>The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line.<!--]--></p><p><!--[-->A breadcrumb displays the parent page, icons and the current page.<!--]--></p><ul><!--[--><li><!--[-->Parent page: this links to the page above the current page in the information architecture.<!--]--></li><li><!--[-->Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy.<!--]--></li><li><!--[-->Current page: this is the page the user is currently on.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Display the breadcrumb at the top left of a page, below the main navigation but above the page title.<!--]--></li><li><!--[-->Always start the breadcrumb with the parent page.<!--]--></li><li><!--[-->Always end the breadcrumb with the current page.<!--]--></li><li><!--[-->Truncate longer names if you've reached the maximum amount of links.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->The breadcrumb does not replace primary navigation.<!--]--></li><li><!--[-->Do not use the breadcrumb to show progress through a linear journey.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="how-the-breadcrumb-works"><a href="#how-the-breadcrumb-works"><!--[-->How the Breadcrumb works<!--]--></a></h2><p><!--[-->On devices with a page resolution under 768px, the breadcrumb displays the parent link only.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The Breadcrumb uses colour to:<!--]--></p><ul><!--[--><li><!--[-->represent possible interactions<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/breadcrumb.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/breadcrumb/_payload.json">[{"state":1,"_errors":508,"serverRendered":511,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":198,"$sdd-globals":212,"$sdd-navigation":213},{"/design-system/components/breadcrumb":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":193,"_id":194,"_source":195,"_file":196,"_extension":197},"/design-system/components/breadcrumb","components",false,"","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","page","Core",{"type":14,"children":15,"toc":183},"root",[16,25,31,36,56,61,68,91,97,110,114,120,125,128,134,139,152,159],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A breadcrumb displays the parent page, icons and the current page.",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"Parent page: this links to the page above the current page in the information architecture.",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy.",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"Current page: this is the page the user is currently on.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-navigation-breadcrumbs--default-story",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81,86],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Display the breadcrumb at the top left of a page, below the main navigation but above the page title.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Always start the breadcrumb with the parent page.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Always end the breadcrumb with the current page.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Truncate longer names if you've reached the maximum amount of links.",{"type":17,"tag":62,"props":92,"children":94},{"id":93},"when-and-how-not-to-use",[95],{"type":23,"value":96},"When and how not to use",{"type":17,"tag":37,"props":98,"children":99},{},[100,105],{"type":17,"tag":41,"props":101,"children":102},{},[103],{"type":23,"value":104},"The breadcrumb does not replace primary navigation.",{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Do not use the breadcrumb to show progress through a linear journey.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"how-the-breadcrumb-works",[118],{"type":23,"value":119},"How the Breadcrumb works",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"On devices with a page resolution under 768px, the breadcrumb displays the parent link only.",{"type":17,"tag":111,"props":126,"children":127},{},[],{"type":17,"tag":18,"props":129,"children":131},{"id":130},"theming",[132],{"type":23,"value":133},"Theming",{"type":17,"tag":26,"props":135,"children":136},{},[137],{"type":23,"value":138},"The Breadcrumb uses colour to:",{"type":17,"tag":37,"props":140,"children":141},{},[142,147],{"type":17,"tag":41,"props":143,"children":144},{},[145],{"type":23,"value":146},"represent possible interactions",{"type":17,"tag":41,"props":148,"children":149},{},[150],{"type":23,"value":151},"interactive states.",{"type":17,"tag":153,"props":154,"children":155},"docs-theme-chooser",{},[156],{"type":17,"tag":57,"props":157,"children":158},{"id":59},[],{"type":17,"tag":26,"props":160,"children":161},{},[162,164,173,175,181],{"type":23,"value":163},"To create your own theme, see ",{"type":17,"tag":165,"props":166,"children":170},"a",{"href":167,"rel":168},"https://www.vic.gov.au",[169],"nofollow",[171],{"type":23,"value":172},"theming guidance for designers",{"type":23,"value":174}," or ",{"type":17,"tag":165,"props":176,"children":178},{"href":167,"rel":177},[169],[179],{"type":23,"value":180},"theming guidance for developers",{"type":23,"value":182},".",{"title":8,"searchDepth":184,"depth":184,"links":185},2,[186,191,192],{"id":20,"depth":184,"text":24,"children":187},[188,190],{"id":64,"depth":189,"text":67},3,{"id":93,"depth":189,"text":96},{"id":116,"depth":184,"text":119},{"id":130,"depth":184,"text":133},"markdown","content:design-system:5.components:breadcrumb.md","content","design-system/5.components/breadcrumb.md","md",{"/design-system/components/breadcrumb":199},[200,206],{"_path":201,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":202,"description":203,"layout":11,"label":12,"_type":193,"_id":204,"_source":195,"_file":205,"_extension":197},"/design-system/components/block-quote","Block quote","The Block quote component adds emphasis to a quote.","content:design-system:5.components:block-quote.md","design-system/5.components/block-quote.md",{"_path":207,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":208,"description":209,"layout":11,"label":12,"_type":193,"_id":210,"_source":195,"_file":211,"_extension":197},"/design-system/components/button","Button","The Button component helps a user to carry out an action.","content:design-system:5.components:button.md","design-system/5.components/button.md",{},[214,219,460],{"title":215,"_path":216,"icon":217,"layout":218},"Ripple Design System","/","carbon:home","home",{"title":220,"_path":221,"children":222},"Design System","/design-system",[223,239,255,284,318],{"title":224,"_path":225,"children":226},"About","/design-system/about",[227,230,233,236],{"title":228,"_path":229,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":231,"_path":232,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":234,"_path":235,"layout":11},"Support","/design-system/about/getting-support",{"title":237,"_path":238,"layout":11},"Contributing","/design-system/about/contributing",{"title":240,"_path":241,"children":242},"Design","/design-system/design",[243,246,249,252],{"title":244,"_path":245,"layout":11},"Getting started","/design-system/design/getting-started",{"title":247,"_path":248,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":250,"_path":251,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":253,"_path":254,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":256,"_path":257,"children":258},"Develop","/design-system/develop",[259,261,263,266],{"title":244,"_path":260,"layout":11},"/design-system/develop/getting-started",{"title":237,"_path":262,"layout":11},"/design-system/develop/contributing",{"title":264,"_path":265,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":267,"children":268,"layout":11},"/design-system/develop/usage",[269,272,275,278,281],{"title":270,"_path":271,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":273,"_path":274,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":276,"_path":277,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":279,"_path":280,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":282,"_path":283,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":285,"_path":286,"children":287},"Styles","/design-system/styles",[288,291,294,297,300,303,306,309,312,315],{"title":289,"_path":290,"layout":11},"Colour","/design-system/styles/colour",{"title":292,"_path":293,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":295,"_path":296,"layout":11},"Grid","/design-system/styles/grid",{"title":298,"_path":299,"layout":11},"Icons","/design-system/styles/icons",{"title":301,"_path":302,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":304,"_path":305,"layout":11},"Layout","/design-system/styles/layout",{"title":307,"_path":308,"layout":11},"Logo","/design-system/styles/logo",{"title":310,"_path":311,"layout":11},"Motion","/design-system/styles/motion",{"title":313,"_path":314,"layout":11},"Spacing","/design-system/styles/spacing",{"title":316,"_path":317,"layout":11},"Typography","/design-system/styles/typography",{"title":319,"_path":320,"children":321},"Components","/design-system/components",[322,325,328,331,332,333,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457],{"title":323,"_path":324,"layout":11},"Accordion","/design-system/components/accordion",{"title":326,"_path":327,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":329,"_path":330,"layout":11},"Alert","/design-system/components/alert",{"title":202,"_path":201,"layout":11},{"title":9,"_path":5,"layout":11},{"title":208,"_path":207,"layout":11},{"title":335,"_path":336,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":338,"_path":339,"layout":11},"Callout","/design-system/components/callout",{"title":341,"_path":342,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":344,"_path":345,"layout":11},"Card","/design-system/components/card",{"title":347,"_path":348,"layout":11},"Carousel","/design-system/components/carousel",{"title":350,"_path":351,"layout":11},"Category grid","/design-system/components/category-grid",{"title":353,"_path":354,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":356,"_path":357,"layout":11},"Chip","/design-system/components/chip",{"title":359,"_path":360,"layout":11},"Contact us","/design-system/components/contact-us",{"title":362,"_path":363,"layout":11},"Date input","/design-system/components/date-input",{"title":365,"_path":366,"layout":11},"Detail list","/design-system/components/detail-list",{"title":368,"_path":369,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":371,"_path":372,"layout":11},"File","/design-system/components/file",{"title":374,"_path":375,"layout":11},"Footer","/design-system/components/footer",{"title":377,"_path":378,"layout":11},"Form alert","/design-system/components/form-alert",{"title":380,"_path":381,"layout":11},"Form","/design-system/components/form",{"title":383,"_path":384,"layout":11},"Header","/design-system/components/header",{"title":386,"_path":387,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":389,"_path":390,"layout":11},"Input field","/design-system/components/input-field",{"title":392,"_path":393,"layout":11},"Key dates","/design-system/components/key-dates",{"title":395,"_path":396,"layout":11},"Media embed","/design-system/components/media-embed",{"title":398,"_path":399,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":401,"_path":402,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":404,"_path":405,"layout":11},"Media","/design-system/components/media",{"title":407,"_path":408,"layout":11},"Option button","/design-system/components/option-button",{"title":410,"_path":411,"layout":11},"Page action","/design-system/components/page-action",{"title":413,"_path":414,"layout":11},"Pagination","/design-system/components/pagination",{"title":416,"_path":417,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":419,"_path":420,"layout":11},"Profile","/design-system/components/profile",{"title":422,"_path":423,"layout":11},"Radio button","/design-system/components/radio-button",{"title":425,"_path":426,"layout":11},"Related links","/design-system/components/related-links",{"title":428,"_path":429,"layout":11},"Results listing","/design-system/components/results-listing",{"title":431,"_path":432,"layout":11},"Search bar","/design-system/components/search-bar",{"title":434,"_path":435,"layout":11},"Skip link","/design-system/components/skip-link",{"title":437,"_path":438,"layout":11},"Social share","/design-system/components/social-share",{"title":440,"_path":441,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":443,"_path":444,"layout":11},"Table","/design-system/components/table",{"title":446,"_path":447,"layout":11},"Tabs","/design-system/components/tabs",{"title":449,"_path":450,"layout":11},"Tag","/design-system/components/tag",{"title":452,"_path":453,"layout":11},"Text area","/design-system/components/text-area",{"title":455,"_path":456,"layout":11},"Timeline","/design-system/components/timeline",{"title":458,"_path":459,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":461,"_path":462,"children":463,"layout":11},"Ripple Framework","/framework",[464,465,483,505],{"title":461,"_path":462,"layout":11},{"title":466,"_path":467,"children":468},"Key Concepts","/framework/key-concepts",[469,471,474,477,480],{"title":276,"_path":470,"layout":11},"/framework/key-concepts/nuxt",{"title":472,"_path":473,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":475,"_path":476,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":478,"_path":479,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":481,"_path":482,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":484,"_path":485,"children":486},"Guides","/framework/guides",[487,490,493,496,499,502],{"title":488,"_path":489,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":491,"_path":492,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":494,"_path":495,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":497,"_path":498,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":500,"_path":501,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":503,"_path":504,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":506,"_path":507,"layout":11},"Core modules","/framework/core-modules",["Reactive",509],{"module-navigation":510},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Breadcrumb</h1><p class="rpl-type-p-large" data-v-3163c6df>The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line.<!--]--></p><p><!--[-->A breadcrumb displays the parent page, icons and the current page.<!--]--></p><ul><!--[--><li><!--[-->Parent page: this links to the page above the current page in the information architecture.<!--]--></li><li><!--[-->Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy.<!--]--></li><li><!--[-->Current page: this is the page the user is currently on.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Display the breadcrumb at the top left of a page, below the main navigation but above the page title.<!--]--></li><li><!--[-->Always start the breadcrumb with the parent page.<!--]--></li><li><!--[-->Always end the breadcrumb with the current page.<!--]--></li><li><!--[-->Truncate longer names if you've reached the maximum amount of links.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->The breadcrumb does not replace primary navigation.<!--]--></li><li><!--[-->Do not use the breadcrumb to show progress through a linear journey.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="how-the-breadcrumb-works"><a href="#how-the-breadcrumb-works"><!--[-->How the Breadcrumb works<!--]--></a></h2><p><!--[-->On devices with a page resolution under 768px, the breadcrumb displays the parent link only.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The Breadcrumb uses colour to:<!--]--></p><ul><!--[--><li><!--[-->represent possible interactions<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/breadcrumb.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/breadcrumb/_payload.json">[{"state":1,"_errors":508,"serverRendered":511,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":198,"$sdd-globals":212,"$sdd-navigation":213},{"/design-system/components/breadcrumb":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":193,"_id":194,"_source":195,"_file":196,"_extension":197},"/design-system/components/breadcrumb","components",false,"","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","page","Core",{"type":14,"children":15,"toc":183},"root",[16,25,31,36,56,61,68,91,97,110,114,120,125,128,134,139,152,159],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A breadcrumb displays the parent page, icons and the current page.",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"Parent page: this links to the page above the current page in the information architecture.",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy.",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"Current page: this is the page the user is currently on.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-navigation-breadcrumbs--default-story",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81,86],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Display the breadcrumb at the top left of a page, below the main navigation but above the page title.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Always start the breadcrumb with the parent page.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Always end the breadcrumb with the current page.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Truncate longer names if you've reached the maximum amount of links.",{"type":17,"tag":62,"props":92,"children":94},{"id":93},"when-and-how-not-to-use",[95],{"type":23,"value":96},"When and how not to use",{"type":17,"tag":37,"props":98,"children":99},{},[100,105],{"type":17,"tag":41,"props":101,"children":102},{},[103],{"type":23,"value":104},"The breadcrumb does not replace primary navigation.",{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Do not use the breadcrumb to show progress through a linear journey.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"how-the-breadcrumb-works",[118],{"type":23,"value":119},"How the Breadcrumb works",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"On devices with a page resolution under 768px, the breadcrumb displays the parent link only.",{"type":17,"tag":111,"props":126,"children":127},{},[],{"type":17,"tag":18,"props":129,"children":131},{"id":130},"theming",[132],{"type":23,"value":133},"Theming",{"type":17,"tag":26,"props":135,"children":136},{},[137],{"type":23,"value":138},"The Breadcrumb uses colour to:",{"type":17,"tag":37,"props":140,"children":141},{},[142,147],{"type":17,"tag":41,"props":143,"children":144},{},[145],{"type":23,"value":146},"represent possible interactions",{"type":17,"tag":41,"props":148,"children":149},{},[150],{"type":23,"value":151},"interactive states.",{"type":17,"tag":153,"props":154,"children":155},"docs-theme-chooser",{},[156],{"type":17,"tag":57,"props":157,"children":158},{"id":59},[],{"type":17,"tag":26,"props":160,"children":161},{},[162,164,173,175,181],{"type":23,"value":163},"To create your own theme, see ",{"type":17,"tag":165,"props":166,"children":170},"a",{"href":167,"rel":168},"https://www.vic.gov.au",[169],"nofollow",[171],{"type":23,"value":172},"theming guidance for designers",{"type":23,"value":174}," or ",{"type":17,"tag":165,"props":176,"children":178},{"href":167,"rel":177},[169],[179],{"type":23,"value":180},"theming guidance for developers",{"type":23,"value":182},".",{"title":8,"searchDepth":184,"depth":184,"links":185},2,[186,191,192],{"id":20,"depth":184,"text":24,"children":187},[188,190],{"id":64,"depth":189,"text":67},3,{"id":93,"depth":189,"text":96},{"id":116,"depth":184,"text":119},{"id":130,"depth":184,"text":133},"markdown","content:design-system:5.components:breadcrumb.md","content","design-system/5.components/breadcrumb.md","md",{"/design-system/components/breadcrumb":199},[200,206],{"_path":201,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":202,"description":203,"layout":11,"label":12,"_type":193,"_id":204,"_source":195,"_file":205,"_extension":197},"/design-system/components/block-quote","Block quote","The Block quote component adds emphasis to a quote.","content:design-system:5.components:block-quote.md","design-system/5.components/block-quote.md",{"_path":207,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":208,"description":209,"layout":11,"label":12,"_type":193,"_id":210,"_source":195,"_file":211,"_extension":197},"/design-system/components/button","Button","The Button component helps a user to carry out an action.","content:design-system:5.components:button.md","design-system/5.components/button.md",{},[214,219,460],{"title":215,"_path":216,"icon":217,"layout":218},"Ripple Design System","/","carbon:home","home",{"title":220,"_path":221,"children":222},"Design System","/design-system",[223,239,255,284,318],{"title":224,"_path":225,"children":226},"About","/design-system/about",[227,230,233,236],{"title":228,"_path":229,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":231,"_path":232,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":234,"_path":235,"layout":11},"Support","/design-system/about/getting-support",{"title":237,"_path":238,"layout":11},"Contributing","/design-system/about/contributing",{"title":240,"_path":241,"children":242},"Design","/design-system/design",[243,246,249,252],{"title":244,"_path":245,"layout":11},"Getting started","/design-system/design/getting-started",{"title":247,"_path":248,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":250,"_path":251,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":253,"_path":254,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":256,"_path":257,"children":258},"Develop","/design-system/develop",[259,261,263,266],{"title":244,"_path":260,"layout":11},"/design-system/develop/getting-started",{"title":237,"_path":262,"layout":11},"/design-system/develop/contributing",{"title":264,"_path":265,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":267,"children":268,"layout":11},"/design-system/develop/usage",[269,272,275,278,281],{"title":270,"_path":271,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":273,"_path":274,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":276,"_path":277,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":279,"_path":280,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":282,"_path":283,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":285,"_path":286,"children":287},"Styles","/design-system/styles",[288,291,294,297,300,303,306,309,312,315],{"title":289,"_path":290,"layout":11},"Colour","/design-system/styles/colour",{"title":292,"_path":293,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":295,"_path":296,"layout":11},"Grid","/design-system/styles/grid",{"title":298,"_path":299,"layout":11},"Icons","/design-system/styles/icons",{"title":301,"_path":302,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":304,"_path":305,"layout":11},"Layout","/design-system/styles/layout",{"title":307,"_path":308,"layout":11},"Logo","/design-system/styles/logo",{"title":310,"_path":311,"layout":11},"Motion","/design-system/styles/motion",{"title":313,"_path":314,"layout":11},"Spacing","/design-system/styles/spacing",{"title":316,"_path":317,"layout":11},"Typography","/design-system/styles/typography",{"title":319,"_path":320,"children":321},"Components","/design-system/components",[322,325,328,331,332,333,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457],{"title":323,"_path":324,"layout":11},"Accordion","/design-system/components/accordion",{"title":326,"_path":327,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":329,"_path":330,"layout":11},"Alert","/design-system/components/alert",{"title":202,"_path":201,"layout":11},{"title":9,"_path":5,"layout":11},{"title":208,"_path":207,"layout":11},{"title":335,"_path":336,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":338,"_path":339,"layout":11},"Callout","/design-system/components/callout",{"title":341,"_path":342,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":344,"_path":345,"layout":11},"Card","/design-system/components/card",{"title":347,"_path":348,"layout":11},"Carousel","/design-system/components/carousel",{"title":350,"_path":351,"layout":11},"Category grid","/design-system/components/category-grid",{"title":353,"_path":354,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":356,"_path":357,"layout":11},"Chip","/design-system/components/chip",{"title":359,"_path":360,"layout":11},"Contact us","/design-system/components/contact-us",{"title":362,"_path":363,"layout":11},"Date input","/design-system/components/date-input",{"title":365,"_path":366,"layout":11},"Detail list","/design-system/components/detail-list",{"title":368,"_path":369,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":371,"_path":372,"layout":11},"File","/design-system/components/file",{"title":374,"_path":375,"layout":11},"Footer","/design-system/components/footer",{"title":377,"_path":378,"layout":11},"Form alert","/design-system/components/form-alert",{"title":380,"_path":381,"layout":11},"Form","/design-system/components/form",{"title":383,"_path":384,"layout":11},"Header","/design-system/components/header",{"title":386,"_path":387,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":389,"_path":390,"layout":11},"Input field","/design-system/components/input-field",{"title":392,"_path":393,"layout":11},"Key dates","/design-system/components/key-dates",{"title":395,"_path":396,"layout":11},"Media embed","/design-system/components/media-embed",{"title":398,"_path":399,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":401,"_path":402,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":404,"_path":405,"layout":11},"Media","/design-system/components/media",{"title":407,"_path":408,"layout":11},"Option button","/design-system/components/option-button",{"title":410,"_path":411,"layout":11},"Page action","/design-system/components/page-action",{"title":413,"_path":414,"layout":11},"Pagination","/design-system/components/pagination",{"title":416,"_path":417,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":419,"_path":420,"layout":11},"Profile","/design-system/components/profile",{"title":422,"_path":423,"layout":11},"Radio button","/design-system/components/radio-button",{"title":425,"_path":426,"layout":11},"Related links","/design-system/components/related-links",{"title":428,"_path":429,"layout":11},"Results listing","/design-system/components/results-listing",{"title":431,"_path":432,"layout":11},"Search bar","/design-system/components/search-bar",{"title":434,"_path":435,"layout":11},"Skip link","/design-system/components/skip-link",{"title":437,"_path":438,"layout":11},"Social share","/design-system/components/social-share",{"title":440,"_path":441,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":443,"_path":444,"layout":11},"Table","/design-system/components/table",{"title":446,"_path":447,"layout":11},"Tabs","/design-system/components/tabs",{"title":449,"_path":450,"layout":11},"Tag","/design-system/components/tag",{"title":452,"_path":453,"layout":11},"Text area","/design-system/components/text-area",{"title":455,"_path":456,"layout":11},"Timeline","/design-system/components/timeline",{"title":458,"_path":459,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":461,"_path":462,"children":463,"layout":11},"Ripple Framework","/framework",[464,465,483,505],{"title":461,"_path":462,"layout":11},{"title":466,"_path":467,"children":468},"Key Concepts","/framework/key-concepts",[469,471,474,477,480],{"title":276,"_path":470,"layout":11},"/framework/key-concepts/nuxt",{"title":472,"_path":473,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":475,"_path":476,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":478,"_path":479,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":481,"_path":482,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":484,"_path":485,"children":486},"Guides","/framework/guides",[487,490,493,496,499,502],{"title":488,"_path":489,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":491,"_path":492,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":494,"_path":495,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":497,"_path":498,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":500,"_path":501,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":503,"_path":504,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":506,"_path":507,"layout":11},"Core modules","/framework/core-modules",["Reactive",509],{"module-navigation":510},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/button/index.html b/design-system/components/button/index.html index 031a0ee0ca..d4223c2e61 100644 --- a/design-system/components/button/index.html +++ b/design-system/components/button/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Button component helps a user to carry out an action.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it.<!--]--></p><p><!--[-->Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Highlight a key call to action.<!--]--></li><li><!--[-->So long as it also helps users carry out its identified action, a button can link to internal and external pages.<!--]--></li><li><!--[-->Add to any basic content component.<!--]--></li><li><!--[-->Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc.<!--]--></li><!--]--></ul><h3 id="when-not-to-use"><a href="#when-not-to-use"><!--[-->When not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Limit primary buttons to one per page.<!--]--></li><li><!--[-->Don't use more than 4 words in the button label.<!--]--></li><li><!--[-->Avoid using inactive buttons.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->Limit using buttons to one per page. The more you use them, the less a user will notice them.<!--]--></p><!--]--></blockquote><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Buttons are styled for their specific purposes. Button variants include:<!--]--></p><ul><!--[--><li><!--[-->filled<!--]--></li><li><!--[-->outlined<!--]--></li><li><!--[-->white<!--]--></li><li><!--[-->elevated<!--]--></li><li><!--[-->destructive.<!--]--></li><!--]--></ul><h3 id="filled"><a href="#filled"><!--[-->Filled<!--]--></a></h3><ul><!--[--><li><!--[-->Use the filled variant for primary actions, known as calls to action.<!--]--></li><li><!--[-->Use the primary colour.<!--]--></li><li><!--[-->Don't use more than one filled button per page.<ul><!--[--><li><!--[-->A page should only have one call to action, otherwise they lose impact.<!--]--></li><li><!--[-->Having more than one also results in a dilemma of choice for the user.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="outlined"><a href="#outlined"><!--[-->Outlined<!--]--></a></h3><ul><!--[--><li><!--[-->The outlined variant is for secondary actions.<!--]--></li><li><!--[-->Like the filled variant, don't use more than one outlined button.<ul><!--[--><li><!--[-->If you find you're adding lots of secondary buttons, you may need to simplify your content.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-outlined&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-outlined&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="white"><a href="#white"><!--[-->White<!--]--></a></h3><ul><!--[--><li><!--[-->The white variant is for tertiary actions when an action is less prominent.<ul><!--[--><li><!--[-->It should be obvious that it is lower priority than primary or secondary buttons.<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->The white variant is styled with an underline by default, to align with links.<ul><!--[--><li><!--[-->This helps meet accessibility requirements and is consistent with other link types.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-white&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-white&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="elevated"><a href="#elevated"><!--[-->Elevated<!--]--></a></h3><ul><!--[--><li><!--[-->The elevated variant acts as a 'back-to-the-top' button.<!--]--></li><li><!--[-->We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value).<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="destructive"><a href="#destructive"><!--[-->Destructive<!--]--></a></h3><ul><!--[--><li><!--[-->Use the destructive variant for destructive actions, such as permanently deleting information, across the site.<!--]--></li><li><!--[-->The destructive variant has a semantic meaning and uses semantic colour.<!--]--></li><li><!--[-->Destructive buttons only work if not used often.<!--]--></li><li><!--[-->It’s uncommon for most sites to need one.<!--]--></li><li><!--[-->Only use the destructive variant if an action has destructive consequences because they are not easy to undo.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text.<!--]--></p><!--]--></blockquote><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-destructive&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-destructive&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h3 id="loading-spinner"><a href="#loading-spinner"><!--[-->Loading spinner<!--]--></a></h3><p><!--[-->Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows.<!--]--></p><p><!--[-->A user may double-click a button because:<!--]--></p><ul><!--[--><li><!--[-->their main operating system uses double click<!--]--></li><li><!--[-->they have a slow connection which results in delayed action feedback<!--]--></li><li><!--[-->they click the button by accident due to motor impairments like hand tremors.<!--]--></li><!--]--></ul><p><!--[-->Clicking a button twice can mean the information gets sent 2 times.<!--]--></p><p><!--[-->Try to show the user that their click has worked. For example, show a loading spinner once they've clicked.<!--]--></p><p><!--[-->When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--busy-state&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--busy-state&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Buttons can be themed in the following 2 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette.<!--]--></li><!--]--></ul><h3 id="site-theme"><a href="#site-theme"><!--[-->Site theme<!--]--></a></h3><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-outlined&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-outlined&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="https:www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https:www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><h3 id="neutral-theme"><a href="#neutral-theme"><!--[-->Neutral theme<!--]--></a></h3><p><!--[-->Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours.<!--]--></p><p><!--[-->There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme.<!--]--></p><h4 id="outlined-1"><a href="#outlined-1"><!--[-->Outlined<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--neutral-outlined&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-outlined&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="white-1"><a href="#white-1"><!--[-->White<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--neutral-white&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-white&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="elevated-1"><a href="#elevated-1"><!--[-->Elevated<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--neutral-elevated&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-elevated&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->To enhance visual weight and aim to confirm with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG 2.0 Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>, Ripple buttons use underlined text by default on white buttons.<!--]--></p><p><!--[-->This underline shows users there is an interaction that they can perform.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/button/_payload.json">[{"state":1,"_errors":866,"serverRendered":869,"path":870,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":556,"$sdd-globals":570,"$sdd-navigation":571},{"/design-system/components/button":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":551,"_id":552,"_source":553,"_file":554,"_extension":555},"/design-system/components/button","components",false,"","Button","The Button component helps a user to carry out an action.","page","Core",{"type":14,"children":15,"toc":530},"root",[16,25,31,36,41,48,73,79,97,106,110,116,121,149,154,185,188,193,214,218,223,252,256,261,274,278,284,312,320,324,327,333,338,343,361,366,371,376,380,383,389,394,407,413,426,450,456,461,466,472,476,481,485,490,494,497,503,517,522],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites.",{"type":17,"tag":37,"props":38,"children":40},"docs-example",{"id":39},"core-navigation-button--default-filled",[],{"type":17,"tag":42,"props":43,"children":45},"h3",{"id":44},"when-and-how-to-use",[46],{"type":23,"value":47},"When and how to use",{"type":17,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68],{"type":17,"tag":53,"props":54,"children":55},"li",{},[56],{"type":23,"value":57},"Highlight a key call to action.",{"type":17,"tag":53,"props":59,"children":60},{},[61],{"type":23,"value":62},"So long as it also helps users carry out its identified action, a button can link to internal and external pages.",{"type":17,"tag":53,"props":64,"children":65},{},[66],{"type":23,"value":67},"Add to any basic content component.",{"type":17,"tag":53,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc.",{"type":17,"tag":42,"props":74,"children":76},{"id":75},"when-not-to-use",[77],{"type":23,"value":78},"When not to use",{"type":17,"tag":49,"props":80,"children":81},{},[82,87,92],{"type":17,"tag":53,"props":83,"children":84},{},[85],{"type":23,"value":86},"Limit primary buttons to one per page.",{"type":17,"tag":53,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don't use more than 4 words in the button label.",{"type":17,"tag":53,"props":93,"children":94},{},[95],{"type":23,"value":96},"Avoid using inactive buttons.",{"type":17,"tag":98,"props":99,"children":100},"blockquote",{},[101],{"type":17,"tag":26,"props":102,"children":103},{},[104],{"type":23,"value":105},"Limit using buttons to one per page. The more you use them, the less a user will notice them.",{"type":17,"tag":107,"props":108,"children":109},"hr",{},[],{"type":17,"tag":18,"props":111,"children":113},{"id":112},"variants",[114],{"type":23,"value":115},"Variants",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"Buttons are styled for their specific purposes. Button variants include:",{"type":17,"tag":49,"props":122,"children":123},{},[124,129,134,139,144],{"type":17,"tag":53,"props":125,"children":126},{},[127],{"type":23,"value":128},"filled",{"type":17,"tag":53,"props":130,"children":131},{},[132],{"type":23,"value":133},"outlined",{"type":17,"tag":53,"props":135,"children":136},{},[137],{"type":23,"value":138},"white",{"type":17,"tag":53,"props":140,"children":141},{},[142],{"type":23,"value":143},"elevated",{"type":17,"tag":53,"props":145,"children":146},{},[147],{"type":23,"value":148},"destructive.",{"type":17,"tag":42,"props":150,"children":151},{"id":128},[152],{"type":23,"value":153},"Filled",{"type":17,"tag":49,"props":155,"children":156},{},[157,162,167],{"type":17,"tag":53,"props":158,"children":159},{},[160],{"type":23,"value":161},"Use the filled variant for primary actions, known as calls to action.",{"type":17,"tag":53,"props":163,"children":164},{},[165],{"type":23,"value":166},"Use the primary colour.",{"type":17,"tag":53,"props":168,"children":169},{},[170,172],{"type":23,"value":171},"Don't use more than one filled button per page.",{"type":17,"tag":49,"props":173,"children":174},{},[175,180],{"type":17,"tag":53,"props":176,"children":177},{},[178],{"type":23,"value":179},"A page should only have one call to action, otherwise they lose impact.",{"type":17,"tag":53,"props":181,"children":182},{},[183],{"type":23,"value":184},"Having more than one also results in a dilemma of choice for the user.",{"type":17,"tag":37,"props":186,"children":187},{"id":39},[],{"type":17,"tag":42,"props":189,"children":190},{"id":133},[191],{"type":23,"value":192},"Outlined",{"type":17,"tag":49,"props":194,"children":195},{},[196,201],{"type":17,"tag":53,"props":197,"children":198},{},[199],{"type":23,"value":200},"The outlined variant is for secondary actions.",{"type":17,"tag":53,"props":202,"children":203},{},[204,206],{"type":23,"value":205},"Like the filled variant, don't use more than one outlined button.",{"type":17,"tag":49,"props":207,"children":208},{},[209],{"type":17,"tag":53,"props":210,"children":211},{},[212],{"type":23,"value":213},"If you find you're adding lots of secondary buttons, you may need to simplify your content.",{"type":17,"tag":37,"props":215,"children":217},{"id":216},"core-navigation-button--default-outlined",[],{"type":17,"tag":42,"props":219,"children":220},{"id":138},[221],{"type":23,"value":222},"White",{"type":17,"tag":49,"props":224,"children":225},{},[226,239],{"type":17,"tag":53,"props":227,"children":228},{},[229,231],{"type":23,"value":230},"The white variant is for tertiary actions when an action is less prominent.",{"type":17,"tag":49,"props":232,"children":233},{},[234],{"type":17,"tag":53,"props":235,"children":236},{},[237],{"type":23,"value":238},"It should be obvious that it is lower priority than primary or secondary buttons.",{"type":17,"tag":53,"props":240,"children":241},{},[242,244],{"type":23,"value":243},"The white variant is styled with an underline by default, to align with links.",{"type":17,"tag":49,"props":245,"children":246},{},[247],{"type":17,"tag":53,"props":248,"children":249},{},[250],{"type":23,"value":251},"This helps meet accessibility requirements and is consistent with other link types.",{"type":17,"tag":37,"props":253,"children":255},{"id":254},"core-navigation-button--default-white",[],{"type":17,"tag":42,"props":257,"children":258},{"id":143},[259],{"type":23,"value":260},"Elevated",{"type":17,"tag":49,"props":262,"children":263},{},[264,269],{"type":17,"tag":53,"props":265,"children":266},{},[267],{"type":23,"value":268},"The elevated variant acts as a 'back-to-the-top' button.",{"type":17,"tag":53,"props":270,"children":271},{},[272],{"type":23,"value":273},"We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value).",{"type":17,"tag":37,"props":275,"children":277},{"id":276},"core-navigation-button--default-elevated",[],{"type":17,"tag":42,"props":279,"children":281},{"id":280},"destructive",[282],{"type":23,"value":283},"Destructive",{"type":17,"tag":49,"props":285,"children":286},{},[287,292,297,302,307],{"type":17,"tag":53,"props":288,"children":289},{},[290],{"type":23,"value":291},"Use the destructive variant for destructive actions, such as permanently deleting information, across the site.",{"type":17,"tag":53,"props":293,"children":294},{},[295],{"type":23,"value":296},"The destructive variant has a semantic meaning and uses semantic colour.",{"type":17,"tag":53,"props":298,"children":299},{},[300],{"type":23,"value":301},"Destructive buttons only work if not used often.",{"type":17,"tag":53,"props":303,"children":304},{},[305],{"type":23,"value":306},"It’s uncommon for most sites to need one.",{"type":17,"tag":53,"props":308,"children":309},{},[310],{"type":23,"value":311},"Only use the destructive variant if an action has destructive consequences because they are not easy to undo.",{"type":17,"tag":98,"props":313,"children":314},{},[315],{"type":17,"tag":26,"props":316,"children":317},{},[318],{"type":23,"value":319},"Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text.",{"type":17,"tag":37,"props":321,"children":323},{"id":322},"core-navigation-button--default-destructive",[],{"type":17,"tag":107,"props":325,"children":326},{},[],{"type":17,"tag":42,"props":328,"children":330},{"id":329},"loading-spinner",[331],{"type":23,"value":332},"Loading spinner",{"type":17,"tag":26,"props":334,"children":335},{},[336],{"type":23,"value":337},"Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows.",{"type":17,"tag":26,"props":339,"children":340},{},[341],{"type":23,"value":342},"A user may double-click a button because:",{"type":17,"tag":49,"props":344,"children":345},{},[346,351,356],{"type":17,"tag":53,"props":347,"children":348},{},[349],{"type":23,"value":350},"their main operating system uses double click",{"type":17,"tag":53,"props":352,"children":353},{},[354],{"type":23,"value":355},"they have a slow connection which results in delayed action feedback",{"type":17,"tag":53,"props":357,"children":358},{},[359],{"type":23,"value":360},"they click the button by accident due to motor impairments like hand tremors.",{"type":17,"tag":26,"props":362,"children":363},{},[364],{"type":23,"value":365},"Clicking a button twice can mean the information gets sent 2 times.",{"type":17,"tag":26,"props":367,"children":368},{},[369],{"type":23,"value":370},"Try to show the user that their click has worked. For example, show a loading spinner once they've clicked.",{"type":17,"tag":26,"props":372,"children":373},{},[374],{"type":23,"value":375},"When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible.",{"type":17,"tag":37,"props":377,"children":379},{"id":378},"core-navigation-button--busy-state",[],{"type":17,"tag":107,"props":381,"children":382},{},[],{"type":17,"tag":18,"props":384,"children":386},{"id":385},"theming",[387],{"type":23,"value":388},"Theming",{"type":17,"tag":26,"props":390,"children":391},{},[392],{"type":23,"value":393},"Buttons can be themed in the following 2 ways:",{"type":17,"tag":49,"props":395,"children":396},{},[397,402],{"type":17,"tag":53,"props":398,"children":399},{},[400],{"type":23,"value":401},"site colour palette",{"type":17,"tag":53,"props":403,"children":404},{},[405],{"type":23,"value":406},"neutral colour palette.",{"type":17,"tag":42,"props":408,"children":410},{"id":409},"site-theme",[411],{"type":23,"value":412},"Site theme",{"type":17,"tag":414,"props":415,"children":416},"docs-theme-chooser",{},[417,420,423],{"type":17,"tag":37,"props":418,"children":419},{"id":39},[],{"type":17,"tag":37,"props":421,"children":422},{"id":216},[],{"type":17,"tag":37,"props":424,"children":425},{"id":276},[],{"type":17,"tag":26,"props":427,"children":428},{},[429,431,440,442,448],{"type":23,"value":430},"To create your own theme see ",{"type":17,"tag":432,"props":433,"children":437},"a",{"href":434,"rel":435},"https:www.vic.gov.au",[436],"nofollow",[438],{"type":23,"value":439},"theming guidance for designers",{"type":23,"value":441}," or ",{"type":17,"tag":432,"props":443,"children":445},{"href":434,"rel":444},[436],[446],{"type":23,"value":447},"theming guidance for developers",{"type":23,"value":449},".",{"type":17,"tag":42,"props":451,"children":453},{"id":452},"neutral-theme",[454],{"type":23,"value":455},"Neutral theme",{"type":17,"tag":26,"props":457,"children":458},{},[459],{"type":23,"value":460},"Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours.",{"type":17,"tag":26,"props":462,"children":463},{},[464],{"type":23,"value":465},"There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme.",{"type":17,"tag":467,"props":468,"children":470},"h4",{"id":469},"outlined-1",[471],{"type":23,"value":192},{"type":17,"tag":37,"props":473,"children":475},{"id":474},"core-navigation-button--neutral-outlined",[],{"type":17,"tag":467,"props":477,"children":479},{"id":478},"white-1",[480],{"type":23,"value":222},{"type":17,"tag":37,"props":482,"children":484},{"id":483},"core-navigation-button--neutral-white",[],{"type":17,"tag":467,"props":486,"children":488},{"id":487},"elevated-1",[489],{"type":23,"value":260},{"type":17,"tag":37,"props":491,"children":493},{"id":492},"core-navigation-button--neutral-elevated",[],{"type":17,"tag":107,"props":495,"children":496},{},[],{"type":17,"tag":18,"props":498,"children":500},{"id":499},"rationale",[501],{"type":23,"value":502},"Rationale",{"type":17,"tag":26,"props":504,"children":505},{},[506,508,515],{"type":23,"value":507},"To enhance visual weight and aim to confirm with ",{"type":17,"tag":432,"props":509,"children":512},{"href":510,"rel":511},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[436],[513],{"type":23,"value":514},"WCAG 2.0 Criterion 1.4.1",{"type":23,"value":516},", Ripple buttons use underlined text by default on white buttons.",{"type":17,"tag":26,"props":518,"children":519},{},[520],{"type":23,"value":521},"This underline shows users there is an interaction that they can perform.",{"type":17,"tag":98,"props":523,"children":524},{},[525],{"type":17,"tag":26,"props":526,"children":527},{},[528],{"type":23,"value":529},"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)",{"title":8,"searchDepth":531,"depth":531,"links":532},2,[533,538,546,550],{"id":20,"depth":531,"text":24,"children":534},[535,537],{"id":44,"depth":536,"text":47},3,{"id":75,"depth":536,"text":78},{"id":112,"depth":531,"text":115,"children":539},[540,541,542,543,544,545],{"id":128,"depth":536,"text":153},{"id":133,"depth":536,"text":192},{"id":138,"depth":536,"text":222},{"id":143,"depth":536,"text":260},{"id":280,"depth":536,"text":283},{"id":329,"depth":536,"text":332},{"id":385,"depth":531,"text":388,"children":547},[548,549],{"id":409,"depth":536,"text":412},{"id":452,"depth":536,"text":455},{"id":499,"depth":531,"text":502},"markdown","content:design-system:5.components:button.md","content","design-system/5.components/button.md","md",{"/design-system/components/button":557},[558,564],{"_path":559,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":560,"description":561,"layout":11,"label":12,"_type":551,"_id":562,"_source":553,"_file":563,"_extension":555},"/design-system/components/breadcrumb","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","content:design-system:5.components:breadcrumb.md","design-system/5.components/breadcrumb.md",{"_path":565,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":566,"description":567,"layout":11,"label":12,"_type":551,"_id":568,"_source":553,"_file":569,"_extension":555},"/design-system/components/call-to-action","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","content:design-system:5.components:call-to-action.md","design-system/5.components/call-to-action.md",{},[572,577,818],{"title":573,"_path":574,"icon":575,"layout":576},"Ripple Design System","/","carbon:home","home",{"title":578,"_path":579,"children":580},"Design System","/design-system",[581,597,613,642,676],{"title":582,"_path":583,"children":584},"About","/design-system/about",[585,588,591,594],{"title":586,"_path":587,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":589,"_path":590,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":592,"_path":593,"layout":11},"Support","/design-system/about/getting-support",{"title":595,"_path":596,"layout":11},"Contributing","/design-system/about/contributing",{"title":598,"_path":599,"children":600},"Design","/design-system/design",[601,604,607,610],{"title":602,"_path":603,"layout":11},"Getting started","/design-system/design/getting-started",{"title":605,"_path":606,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":608,"_path":609,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":611,"_path":612,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":614,"_path":615,"children":616},"Develop","/design-system/develop",[617,619,621,624],{"title":602,"_path":618,"layout":11},"/design-system/develop/getting-started",{"title":595,"_path":620,"layout":11},"/design-system/develop/contributing",{"title":622,"_path":623,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":625,"children":626,"layout":11},"/design-system/develop/usage",[627,630,633,636,639],{"title":628,"_path":629,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":631,"_path":632,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":634,"_path":635,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":637,"_path":638,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":640,"_path":641,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":643,"_path":644,"children":645},"Styles","/design-system/styles",[646,649,652,655,658,661,664,667,670,673],{"title":647,"_path":648,"layout":11},"Colour","/design-system/styles/colour",{"title":650,"_path":651,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":653,"_path":654,"layout":11},"Grid","/design-system/styles/grid",{"title":656,"_path":657,"layout":11},"Icons","/design-system/styles/icons",{"title":659,"_path":660,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":662,"_path":663,"layout":11},"Layout","/design-system/styles/layout",{"title":665,"_path":666,"layout":11},"Logo","/design-system/styles/logo",{"title":668,"_path":669,"layout":11},"Motion","/design-system/styles/motion",{"title":671,"_path":672,"layout":11},"Spacing","/design-system/styles/spacing",{"title":674,"_path":675,"layout":11},"Typography","/design-system/styles/typography",{"title":677,"_path":678,"children":679},"Components","/design-system/components",[680,683,686,689,692,693,694,695,698,701,704,707,710,713,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794,797,800,803,806,809,812,815],{"title":681,"_path":682,"layout":11},"Accordion","/design-system/components/accordion",{"title":684,"_path":685,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":687,"_path":688,"layout":11},"Alert","/design-system/components/alert",{"title":690,"_path":691,"layout":11},"Block quote","/design-system/components/block-quote",{"title":560,"_path":559,"layout":11},{"title":9,"_path":5,"layout":11},{"title":566,"_path":565,"layout":11},{"title":696,"_path":697,"layout":11},"Callout","/design-system/components/callout",{"title":699,"_path":700,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":702,"_path":703,"layout":11},"Card","/design-system/components/card",{"title":705,"_path":706,"layout":11},"Carousel","/design-system/components/carousel",{"title":708,"_path":709,"layout":11},"Category grid","/design-system/components/category-grid",{"title":711,"_path":712,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":714,"_path":715,"layout":11},"Chip","/design-system/components/chip",{"title":717,"_path":718,"layout":11},"Contact us","/design-system/components/contact-us",{"title":720,"_path":721,"layout":11},"Date input","/design-system/components/date-input",{"title":723,"_path":724,"layout":11},"Detail list","/design-system/components/detail-list",{"title":726,"_path":727,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":729,"_path":730,"layout":11},"File","/design-system/components/file",{"title":732,"_path":733,"layout":11},"Footer","/design-system/components/footer",{"title":735,"_path":736,"layout":11},"Form alert","/design-system/components/form-alert",{"title":738,"_path":739,"layout":11},"Form","/design-system/components/form",{"title":741,"_path":742,"layout":11},"Header","/design-system/components/header",{"title":744,"_path":745,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":747,"_path":748,"layout":11},"Input field","/design-system/components/input-field",{"title":750,"_path":751,"layout":11},"Key dates","/design-system/components/key-dates",{"title":753,"_path":754,"layout":11},"Media embed","/design-system/components/media-embed",{"title":756,"_path":757,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":759,"_path":760,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":762,"_path":763,"layout":11},"Media","/design-system/components/media",{"title":765,"_path":766,"layout":11},"Option button","/design-system/components/option-button",{"title":768,"_path":769,"layout":11},"Page action","/design-system/components/page-action",{"title":771,"_path":772,"layout":11},"Pagination","/design-system/components/pagination",{"title":774,"_path":775,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":777,"_path":778,"layout":11},"Profile","/design-system/components/profile",{"title":780,"_path":781,"layout":11},"Radio button","/design-system/components/radio-button",{"title":783,"_path":784,"layout":11},"Related links","/design-system/components/related-links",{"title":786,"_path":787,"layout":11},"Results listing","/design-system/components/results-listing",{"title":789,"_path":790,"layout":11},"Search bar","/design-system/components/search-bar",{"title":792,"_path":793,"layout":11},"Skip link","/design-system/components/skip-link",{"title":795,"_path":796,"layout":11},"Social share","/design-system/components/social-share",{"title":798,"_path":799,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":801,"_path":802,"layout":11},"Table","/design-system/components/table",{"title":804,"_path":805,"layout":11},"Tabs","/design-system/components/tabs",{"title":807,"_path":808,"layout":11},"Tag","/design-system/components/tag",{"title":810,"_path":811,"layout":11},"Text area","/design-system/components/text-area",{"title":813,"_path":814,"layout":11},"Timeline","/design-system/components/timeline",{"title":816,"_path":817,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":819,"_path":820,"children":821,"layout":11},"Ripple Framework","/framework",[822,823,841,863],{"title":819,"_path":820,"layout":11},{"title":824,"_path":825,"children":826},"Key Concepts","/framework/key-concepts",[827,829,832,835,838],{"title":634,"_path":828,"layout":11},"/framework/key-concepts/nuxt",{"title":830,"_path":831,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":833,"_path":834,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":836,"_path":837,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":839,"_path":840,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":842,"_path":843,"children":844},"Guides","/framework/guides",[845,848,851,854,857,860],{"title":846,"_path":847,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":849,"_path":850,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":852,"_path":853,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":855,"_path":856,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":858,"_path":859,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":861,"_path":862,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":864,"_path":865,"layout":11},"Core modules","/framework/core-modules",["Reactive",867],{"module-navigation":868},null,true,"/design-system/components/button/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Button component helps a user to carry out an action.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it.<!--]--></p><p><!--[-->Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Highlight a key call to action.<!--]--></li><li><!--[-->So long as it also helps users carry out its identified action, a button can link to internal and external pages.<!--]--></li><li><!--[-->Add to any basic content component.<!--]--></li><li><!--[-->Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc.<!--]--></li><!--]--></ul><h3 id="when-not-to-use"><a href="#when-not-to-use"><!--[-->When not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Limit primary buttons to one per page.<!--]--></li><li><!--[-->Don't use more than 4 words in the button label.<!--]--></li><li><!--[-->Avoid using inactive buttons.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->Limit using buttons to one per page. The more you use them, the less a user will notice them.<!--]--></p><!--]--></blockquote><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Buttons are styled for their specific purposes. Button variants include:<!--]--></p><ul><!--[--><li><!--[-->filled<!--]--></li><li><!--[-->outlined<!--]--></li><li><!--[-->white<!--]--></li><li><!--[-->elevated<!--]--></li><li><!--[-->destructive.<!--]--></li><!--]--></ul><h3 id="filled"><a href="#filled"><!--[-->Filled<!--]--></a></h3><ul><!--[--><li><!--[-->Use the filled variant for primary actions, known as calls to action.<!--]--></li><li><!--[-->Use the primary colour.<!--]--></li><li><!--[-->Don't use more than one filled button per page.<ul><!--[--><li><!--[-->A page should only have one call to action, otherwise they lose impact.<!--]--></li><li><!--[-->Having more than one also results in a dilemma of choice for the user.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="outlined"><a href="#outlined"><!--[-->Outlined<!--]--></a></h3><ul><!--[--><li><!--[-->The outlined variant is for secondary actions.<!--]--></li><li><!--[-->Like the filled variant, don't use more than one outlined button.<ul><!--[--><li><!--[-->If you find you're adding lots of secondary buttons, you may need to simplify your content.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-outlined&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-outlined&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="white"><a href="#white"><!--[-->White<!--]--></a></h3><ul><!--[--><li><!--[-->The white variant is for tertiary actions when an action is less prominent.<ul><!--[--><li><!--[-->It should be obvious that it is lower priority than primary or secondary buttons.<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->The white variant is styled with an underline by default, to align with links.<ul><!--[--><li><!--[-->This helps meet accessibility requirements and is consistent with other link types.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-white&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-white&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="elevated"><a href="#elevated"><!--[-->Elevated<!--]--></a></h3><ul><!--[--><li><!--[-->The elevated variant acts as a 'back-to-the-top' button.<!--]--></li><li><!--[-->We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value).<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="destructive"><a href="#destructive"><!--[-->Destructive<!--]--></a></h3><ul><!--[--><li><!--[-->Use the destructive variant for destructive actions, such as permanently deleting information, across the site.<!--]--></li><li><!--[-->The destructive variant has a semantic meaning and uses semantic colour.<!--]--></li><li><!--[-->Destructive buttons only work if not used often.<!--]--></li><li><!--[-->It’s uncommon for most sites to need one.<!--]--></li><li><!--[-->Only use the destructive variant if an action has destructive consequences because they are not easy to undo.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text.<!--]--></p><!--]--></blockquote><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-destructive&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-destructive&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h3 id="loading-spinner"><a href="#loading-spinner"><!--[-->Loading spinner<!--]--></a></h3><p><!--[-->Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows.<!--]--></p><p><!--[-->A user may double-click a button because:<!--]--></p><ul><!--[--><li><!--[-->their main operating system uses double click<!--]--></li><li><!--[-->they have a slow connection which results in delayed action feedback<!--]--></li><li><!--[-->they click the button by accident due to motor impairments like hand tremors.<!--]--></li><!--]--></ul><p><!--[-->Clicking a button twice can mean the information gets sent 2 times.<!--]--></p><p><!--[-->Try to show the user that their click has worked. For example, show a loading spinner once they've clicked.<!--]--></p><p><!--[-->When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--busy-state&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--busy-state&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Buttons can be themed in the following 2 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette.<!--]--></li><!--]--></ul><h3 id="site-theme"><a href="#site-theme"><!--[-->Site theme<!--]--></a></h3><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-outlined&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-outlined&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="https:www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https:www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><h3 id="neutral-theme"><a href="#neutral-theme"><!--[-->Neutral theme<!--]--></a></h3><p><!--[-->Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours.<!--]--></p><p><!--[-->There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme.<!--]--></p><h4 id="outlined-1"><a href="#outlined-1"><!--[-->Outlined<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--neutral-outlined&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-outlined&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="white-1"><a href="#white-1"><!--[-->White<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--neutral-white&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-white&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="elevated-1"><a href="#elevated-1"><!--[-->Elevated<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-button--neutral-elevated&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-elevated&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->To enhance visual weight and aim to confirm with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG 2.0 Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>, Ripple buttons use underlined text by default on white buttons.<!--]--></p><p><!--[-->This underline shows users there is an interaction that they can perform.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/button/_payload.json">[{"state":1,"_errors":866,"serverRendered":869,"path":870,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":556,"$sdd-globals":570,"$sdd-navigation":571},{"/design-system/components/button":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":551,"_id":552,"_source":553,"_file":554,"_extension":555},"/design-system/components/button","components",false,"","Button","The Button component helps a user to carry out an action.","page","Core",{"type":14,"children":15,"toc":530},"root",[16,25,31,36,41,48,73,79,97,106,110,116,121,149,154,185,188,193,214,218,223,252,256,261,274,278,284,312,320,324,327,333,338,343,361,366,371,376,380,383,389,394,407,413,426,450,456,461,466,472,476,481,485,490,494,497,503,517,522],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites.",{"type":17,"tag":37,"props":38,"children":40},"docs-example",{"id":39},"core-navigation-button--default-filled",[],{"type":17,"tag":42,"props":43,"children":45},"h3",{"id":44},"when-and-how-to-use",[46],{"type":23,"value":47},"When and how to use",{"type":17,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68],{"type":17,"tag":53,"props":54,"children":55},"li",{},[56],{"type":23,"value":57},"Highlight a key call to action.",{"type":17,"tag":53,"props":59,"children":60},{},[61],{"type":23,"value":62},"So long as it also helps users carry out its identified action, a button can link to internal and external pages.",{"type":17,"tag":53,"props":64,"children":65},{},[66],{"type":23,"value":67},"Add to any basic content component.",{"type":17,"tag":53,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc.",{"type":17,"tag":42,"props":74,"children":76},{"id":75},"when-not-to-use",[77],{"type":23,"value":78},"When not to use",{"type":17,"tag":49,"props":80,"children":81},{},[82,87,92],{"type":17,"tag":53,"props":83,"children":84},{},[85],{"type":23,"value":86},"Limit primary buttons to one per page.",{"type":17,"tag":53,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don't use more than 4 words in the button label.",{"type":17,"tag":53,"props":93,"children":94},{},[95],{"type":23,"value":96},"Avoid using inactive buttons.",{"type":17,"tag":98,"props":99,"children":100},"blockquote",{},[101],{"type":17,"tag":26,"props":102,"children":103},{},[104],{"type":23,"value":105},"Limit using buttons to one per page. The more you use them, the less a user will notice them.",{"type":17,"tag":107,"props":108,"children":109},"hr",{},[],{"type":17,"tag":18,"props":111,"children":113},{"id":112},"variants",[114],{"type":23,"value":115},"Variants",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"Buttons are styled for their specific purposes. Button variants include:",{"type":17,"tag":49,"props":122,"children":123},{},[124,129,134,139,144],{"type":17,"tag":53,"props":125,"children":126},{},[127],{"type":23,"value":128},"filled",{"type":17,"tag":53,"props":130,"children":131},{},[132],{"type":23,"value":133},"outlined",{"type":17,"tag":53,"props":135,"children":136},{},[137],{"type":23,"value":138},"white",{"type":17,"tag":53,"props":140,"children":141},{},[142],{"type":23,"value":143},"elevated",{"type":17,"tag":53,"props":145,"children":146},{},[147],{"type":23,"value":148},"destructive.",{"type":17,"tag":42,"props":150,"children":151},{"id":128},[152],{"type":23,"value":153},"Filled",{"type":17,"tag":49,"props":155,"children":156},{},[157,162,167],{"type":17,"tag":53,"props":158,"children":159},{},[160],{"type":23,"value":161},"Use the filled variant for primary actions, known as calls to action.",{"type":17,"tag":53,"props":163,"children":164},{},[165],{"type":23,"value":166},"Use the primary colour.",{"type":17,"tag":53,"props":168,"children":169},{},[170,172],{"type":23,"value":171},"Don't use more than one filled button per page.",{"type":17,"tag":49,"props":173,"children":174},{},[175,180],{"type":17,"tag":53,"props":176,"children":177},{},[178],{"type":23,"value":179},"A page should only have one call to action, otherwise they lose impact.",{"type":17,"tag":53,"props":181,"children":182},{},[183],{"type":23,"value":184},"Having more than one also results in a dilemma of choice for the user.",{"type":17,"tag":37,"props":186,"children":187},{"id":39},[],{"type":17,"tag":42,"props":189,"children":190},{"id":133},[191],{"type":23,"value":192},"Outlined",{"type":17,"tag":49,"props":194,"children":195},{},[196,201],{"type":17,"tag":53,"props":197,"children":198},{},[199],{"type":23,"value":200},"The outlined variant is for secondary actions.",{"type":17,"tag":53,"props":202,"children":203},{},[204,206],{"type":23,"value":205},"Like the filled variant, don't use more than one outlined button.",{"type":17,"tag":49,"props":207,"children":208},{},[209],{"type":17,"tag":53,"props":210,"children":211},{},[212],{"type":23,"value":213},"If you find you're adding lots of secondary buttons, you may need to simplify your content.",{"type":17,"tag":37,"props":215,"children":217},{"id":216},"core-navigation-button--default-outlined",[],{"type":17,"tag":42,"props":219,"children":220},{"id":138},[221],{"type":23,"value":222},"White",{"type":17,"tag":49,"props":224,"children":225},{},[226,239],{"type":17,"tag":53,"props":227,"children":228},{},[229,231],{"type":23,"value":230},"The white variant is for tertiary actions when an action is less prominent.",{"type":17,"tag":49,"props":232,"children":233},{},[234],{"type":17,"tag":53,"props":235,"children":236},{},[237],{"type":23,"value":238},"It should be obvious that it is lower priority than primary or secondary buttons.",{"type":17,"tag":53,"props":240,"children":241},{},[242,244],{"type":23,"value":243},"The white variant is styled with an underline by default, to align with links.",{"type":17,"tag":49,"props":245,"children":246},{},[247],{"type":17,"tag":53,"props":248,"children":249},{},[250],{"type":23,"value":251},"This helps meet accessibility requirements and is consistent with other link types.",{"type":17,"tag":37,"props":253,"children":255},{"id":254},"core-navigation-button--default-white",[],{"type":17,"tag":42,"props":257,"children":258},{"id":143},[259],{"type":23,"value":260},"Elevated",{"type":17,"tag":49,"props":262,"children":263},{},[264,269],{"type":17,"tag":53,"props":265,"children":266},{},[267],{"type":23,"value":268},"The elevated variant acts as a 'back-to-the-top' button.",{"type":17,"tag":53,"props":270,"children":271},{},[272],{"type":23,"value":273},"We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value).",{"type":17,"tag":37,"props":275,"children":277},{"id":276},"core-navigation-button--default-elevated",[],{"type":17,"tag":42,"props":279,"children":281},{"id":280},"destructive",[282],{"type":23,"value":283},"Destructive",{"type":17,"tag":49,"props":285,"children":286},{},[287,292,297,302,307],{"type":17,"tag":53,"props":288,"children":289},{},[290],{"type":23,"value":291},"Use the destructive variant for destructive actions, such as permanently deleting information, across the site.",{"type":17,"tag":53,"props":293,"children":294},{},[295],{"type":23,"value":296},"The destructive variant has a semantic meaning and uses semantic colour.",{"type":17,"tag":53,"props":298,"children":299},{},[300],{"type":23,"value":301},"Destructive buttons only work if not used often.",{"type":17,"tag":53,"props":303,"children":304},{},[305],{"type":23,"value":306},"It’s uncommon for most sites to need one.",{"type":17,"tag":53,"props":308,"children":309},{},[310],{"type":23,"value":311},"Only use the destructive variant if an action has destructive consequences because they are not easy to undo.",{"type":17,"tag":98,"props":313,"children":314},{},[315],{"type":17,"tag":26,"props":316,"children":317},{},[318],{"type":23,"value":319},"Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text.",{"type":17,"tag":37,"props":321,"children":323},{"id":322},"core-navigation-button--default-destructive",[],{"type":17,"tag":107,"props":325,"children":326},{},[],{"type":17,"tag":42,"props":328,"children":330},{"id":329},"loading-spinner",[331],{"type":23,"value":332},"Loading spinner",{"type":17,"tag":26,"props":334,"children":335},{},[336],{"type":23,"value":337},"Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows.",{"type":17,"tag":26,"props":339,"children":340},{},[341],{"type":23,"value":342},"A user may double-click a button because:",{"type":17,"tag":49,"props":344,"children":345},{},[346,351,356],{"type":17,"tag":53,"props":347,"children":348},{},[349],{"type":23,"value":350},"their main operating system uses double click",{"type":17,"tag":53,"props":352,"children":353},{},[354],{"type":23,"value":355},"they have a slow connection which results in delayed action feedback",{"type":17,"tag":53,"props":357,"children":358},{},[359],{"type":23,"value":360},"they click the button by accident due to motor impairments like hand tremors.",{"type":17,"tag":26,"props":362,"children":363},{},[364],{"type":23,"value":365},"Clicking a button twice can mean the information gets sent 2 times.",{"type":17,"tag":26,"props":367,"children":368},{},[369],{"type":23,"value":370},"Try to show the user that their click has worked. For example, show a loading spinner once they've clicked.",{"type":17,"tag":26,"props":372,"children":373},{},[374],{"type":23,"value":375},"When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible.",{"type":17,"tag":37,"props":377,"children":379},{"id":378},"core-navigation-button--busy-state",[],{"type":17,"tag":107,"props":381,"children":382},{},[],{"type":17,"tag":18,"props":384,"children":386},{"id":385},"theming",[387],{"type":23,"value":388},"Theming",{"type":17,"tag":26,"props":390,"children":391},{},[392],{"type":23,"value":393},"Buttons can be themed in the following 2 ways:",{"type":17,"tag":49,"props":395,"children":396},{},[397,402],{"type":17,"tag":53,"props":398,"children":399},{},[400],{"type":23,"value":401},"site colour palette",{"type":17,"tag":53,"props":403,"children":404},{},[405],{"type":23,"value":406},"neutral colour palette.",{"type":17,"tag":42,"props":408,"children":410},{"id":409},"site-theme",[411],{"type":23,"value":412},"Site theme",{"type":17,"tag":414,"props":415,"children":416},"docs-theme-chooser",{},[417,420,423],{"type":17,"tag":37,"props":418,"children":419},{"id":39},[],{"type":17,"tag":37,"props":421,"children":422},{"id":216},[],{"type":17,"tag":37,"props":424,"children":425},{"id":276},[],{"type":17,"tag":26,"props":427,"children":428},{},[429,431,440,442,448],{"type":23,"value":430},"To create your own theme see ",{"type":17,"tag":432,"props":433,"children":437},"a",{"href":434,"rel":435},"https:www.vic.gov.au",[436],"nofollow",[438],{"type":23,"value":439},"theming guidance for designers",{"type":23,"value":441}," or ",{"type":17,"tag":432,"props":443,"children":445},{"href":434,"rel":444},[436],[446],{"type":23,"value":447},"theming guidance for developers",{"type":23,"value":449},".",{"type":17,"tag":42,"props":451,"children":453},{"id":452},"neutral-theme",[454],{"type":23,"value":455},"Neutral theme",{"type":17,"tag":26,"props":457,"children":458},{},[459],{"type":23,"value":460},"Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours.",{"type":17,"tag":26,"props":462,"children":463},{},[464],{"type":23,"value":465},"There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme.",{"type":17,"tag":467,"props":468,"children":470},"h4",{"id":469},"outlined-1",[471],{"type":23,"value":192},{"type":17,"tag":37,"props":473,"children":475},{"id":474},"core-navigation-button--neutral-outlined",[],{"type":17,"tag":467,"props":477,"children":479},{"id":478},"white-1",[480],{"type":23,"value":222},{"type":17,"tag":37,"props":482,"children":484},{"id":483},"core-navigation-button--neutral-white",[],{"type":17,"tag":467,"props":486,"children":488},{"id":487},"elevated-1",[489],{"type":23,"value":260},{"type":17,"tag":37,"props":491,"children":493},{"id":492},"core-navigation-button--neutral-elevated",[],{"type":17,"tag":107,"props":495,"children":496},{},[],{"type":17,"tag":18,"props":498,"children":500},{"id":499},"rationale",[501],{"type":23,"value":502},"Rationale",{"type":17,"tag":26,"props":504,"children":505},{},[506,508,515],{"type":23,"value":507},"To enhance visual weight and aim to confirm with ",{"type":17,"tag":432,"props":509,"children":512},{"href":510,"rel":511},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[436],[513],{"type":23,"value":514},"WCAG 2.0 Criterion 1.4.1",{"type":23,"value":516},", Ripple buttons use underlined text by default on white buttons.",{"type":17,"tag":26,"props":518,"children":519},{},[520],{"type":23,"value":521},"This underline shows users there is an interaction that they can perform.",{"type":17,"tag":98,"props":523,"children":524},{},[525],{"type":17,"tag":26,"props":526,"children":527},{},[528],{"type":23,"value":529},"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)",{"title":8,"searchDepth":531,"depth":531,"links":532},2,[533,538,546,550],{"id":20,"depth":531,"text":24,"children":534},[535,537],{"id":44,"depth":536,"text":47},3,{"id":75,"depth":536,"text":78},{"id":112,"depth":531,"text":115,"children":539},[540,541,542,543,544,545],{"id":128,"depth":536,"text":153},{"id":133,"depth":536,"text":192},{"id":138,"depth":536,"text":222},{"id":143,"depth":536,"text":260},{"id":280,"depth":536,"text":283},{"id":329,"depth":536,"text":332},{"id":385,"depth":531,"text":388,"children":547},[548,549],{"id":409,"depth":536,"text":412},{"id":452,"depth":536,"text":455},{"id":499,"depth":531,"text":502},"markdown","content:design-system:5.components:button.md","content","design-system/5.components/button.md","md",{"/design-system/components/button":557},[558,564],{"_path":559,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":560,"description":561,"layout":11,"label":12,"_type":551,"_id":562,"_source":553,"_file":563,"_extension":555},"/design-system/components/breadcrumb","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","content:design-system:5.components:breadcrumb.md","design-system/5.components/breadcrumb.md",{"_path":565,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":566,"description":567,"layout":11,"label":12,"_type":551,"_id":568,"_source":553,"_file":569,"_extension":555},"/design-system/components/call-to-action","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","content:design-system:5.components:call-to-action.md","design-system/5.components/call-to-action.md",{},[572,577,818],{"title":573,"_path":574,"icon":575,"layout":576},"Ripple Design System","/","carbon:home","home",{"title":578,"_path":579,"children":580},"Design System","/design-system",[581,597,613,642,676],{"title":582,"_path":583,"children":584},"About","/design-system/about",[585,588,591,594],{"title":586,"_path":587,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":589,"_path":590,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":592,"_path":593,"layout":11},"Support","/design-system/about/getting-support",{"title":595,"_path":596,"layout":11},"Contributing","/design-system/about/contributing",{"title":598,"_path":599,"children":600},"Design","/design-system/design",[601,604,607,610],{"title":602,"_path":603,"layout":11},"Getting started","/design-system/design/getting-started",{"title":605,"_path":606,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":608,"_path":609,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":611,"_path":612,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":614,"_path":615,"children":616},"Develop","/design-system/develop",[617,619,621,624],{"title":602,"_path":618,"layout":11},"/design-system/develop/getting-started",{"title":595,"_path":620,"layout":11},"/design-system/develop/contributing",{"title":622,"_path":623,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":625,"children":626,"layout":11},"/design-system/develop/usage",[627,630,633,636,639],{"title":628,"_path":629,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":631,"_path":632,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":634,"_path":635,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":637,"_path":638,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":640,"_path":641,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":643,"_path":644,"children":645},"Styles","/design-system/styles",[646,649,652,655,658,661,664,667,670,673],{"title":647,"_path":648,"layout":11},"Colour","/design-system/styles/colour",{"title":650,"_path":651,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":653,"_path":654,"layout":11},"Grid","/design-system/styles/grid",{"title":656,"_path":657,"layout":11},"Icons","/design-system/styles/icons",{"title":659,"_path":660,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":662,"_path":663,"layout":11},"Layout","/design-system/styles/layout",{"title":665,"_path":666,"layout":11},"Logo","/design-system/styles/logo",{"title":668,"_path":669,"layout":11},"Motion","/design-system/styles/motion",{"title":671,"_path":672,"layout":11},"Spacing","/design-system/styles/spacing",{"title":674,"_path":675,"layout":11},"Typography","/design-system/styles/typography",{"title":677,"_path":678,"children":679},"Components","/design-system/components",[680,683,686,689,692,693,694,695,698,701,704,707,710,713,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794,797,800,803,806,809,812,815],{"title":681,"_path":682,"layout":11},"Accordion","/design-system/components/accordion",{"title":684,"_path":685,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":687,"_path":688,"layout":11},"Alert","/design-system/components/alert",{"title":690,"_path":691,"layout":11},"Block quote","/design-system/components/block-quote",{"title":560,"_path":559,"layout":11},{"title":9,"_path":5,"layout":11},{"title":566,"_path":565,"layout":11},{"title":696,"_path":697,"layout":11},"Callout","/design-system/components/callout",{"title":699,"_path":700,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":702,"_path":703,"layout":11},"Card","/design-system/components/card",{"title":705,"_path":706,"layout":11},"Carousel","/design-system/components/carousel",{"title":708,"_path":709,"layout":11},"Category grid","/design-system/components/category-grid",{"title":711,"_path":712,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":714,"_path":715,"layout":11},"Chip","/design-system/components/chip",{"title":717,"_path":718,"layout":11},"Contact us","/design-system/components/contact-us",{"title":720,"_path":721,"layout":11},"Date input","/design-system/components/date-input",{"title":723,"_path":724,"layout":11},"Detail list","/design-system/components/detail-list",{"title":726,"_path":727,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":729,"_path":730,"layout":11},"File","/design-system/components/file",{"title":732,"_path":733,"layout":11},"Footer","/design-system/components/footer",{"title":735,"_path":736,"layout":11},"Form alert","/design-system/components/form-alert",{"title":738,"_path":739,"layout":11},"Form","/design-system/components/form",{"title":741,"_path":742,"layout":11},"Header","/design-system/components/header",{"title":744,"_path":745,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":747,"_path":748,"layout":11},"Input field","/design-system/components/input-field",{"title":750,"_path":751,"layout":11},"Key dates","/design-system/components/key-dates",{"title":753,"_path":754,"layout":11},"Media embed","/design-system/components/media-embed",{"title":756,"_path":757,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":759,"_path":760,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":762,"_path":763,"layout":11},"Media","/design-system/components/media",{"title":765,"_path":766,"layout":11},"Option button","/design-system/components/option-button",{"title":768,"_path":769,"layout":11},"Page action","/design-system/components/page-action",{"title":771,"_path":772,"layout":11},"Pagination","/design-system/components/pagination",{"title":774,"_path":775,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":777,"_path":778,"layout":11},"Profile","/design-system/components/profile",{"title":780,"_path":781,"layout":11},"Radio button","/design-system/components/radio-button",{"title":783,"_path":784,"layout":11},"Related links","/design-system/components/related-links",{"title":786,"_path":787,"layout":11},"Results listing","/design-system/components/results-listing",{"title":789,"_path":790,"layout":11},"Search bar","/design-system/components/search-bar",{"title":792,"_path":793,"layout":11},"Skip link","/design-system/components/skip-link",{"title":795,"_path":796,"layout":11},"Social share","/design-system/components/social-share",{"title":798,"_path":799,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":801,"_path":802,"layout":11},"Table","/design-system/components/table",{"title":804,"_path":805,"layout":11},"Tabs","/design-system/components/tabs",{"title":807,"_path":808,"layout":11},"Tag","/design-system/components/tag",{"title":810,"_path":811,"layout":11},"Text area","/design-system/components/text-area",{"title":813,"_path":814,"layout":11},"Timeline","/design-system/components/timeline",{"title":816,"_path":817,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":819,"_path":820,"children":821,"layout":11},"Ripple Framework","/framework",[822,823,841,863],{"title":819,"_path":820,"layout":11},{"title":824,"_path":825,"children":826},"Key Concepts","/framework/key-concepts",[827,829,832,835,838],{"title":634,"_path":828,"layout":11},"/framework/key-concepts/nuxt",{"title":830,"_path":831,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":833,"_path":834,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":836,"_path":837,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":839,"_path":840,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":842,"_path":843,"children":844},"Guides","/framework/guides",[845,848,851,854,857,860],{"title":846,"_path":847,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":849,"_path":850,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":852,"_path":853,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":855,"_path":856,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":858,"_path":859,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":861,"_path":862,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":864,"_path":865,"layout":11},"Core modules","/framework/core-modules",["Reactive",867],{"module-navigation":868},null,true,"/design-system/components/button/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/call-to-action/index.html b/design-system/components/call-to-action/index.html index 82501b4fb3..c18c664aae 100644 --- a/design-system/components/call-to-action/index.html +++ b/design-system/components/call-to-action/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Call to action</h1><p class="rpl-type-p-large" data-v-3163c6df>The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action.<!--]--></p><p><!--[-->Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use clear and concise content.<!--]--></li><li><!--[-->Ensure content is relevant to the action or destination.<!--]--></li><li><!--[-->Embed in any body content area of a content page.<!--]--></li><li><!--[-->Use with a relevant image or graphic.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use without an image or graphic.<!--]--></li><li><!--[-->Don’t overload it with content.<!--]--></li><li><!--[-->Don’t use when a large amount of text is needed for more context.<!--]--></li><li><!--[-->Don’t use other interactive elements, like links.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The call to action card adopts its theming from your button component’s settings.<!--]--></p><p><!--[-->If you choose neutral button for your site, the call to action card will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--call-to-action&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--call-to-action&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/call-to-action.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/call-to-action/_payload.json">[{"state":1,"_errors":473,"serverRendered":476,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":163,"$sdd-globals":177,"$sdd-navigation":178},{"/design-system/components/call-to-action":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":158,"_id":159,"_source":160,"_file":161,"_extension":162},"/design-system/components/call-to-action","components",false,"","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","page","Core",{"type":14,"children":15,"toc":149},"root",[16,25,31,36,41,48,73,79,102,106,112,117,122,129],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action.",{"type":17,"tag":37,"props":38,"children":40},"docs-example",{"id":39},"core-navigation-card--call-to-action",[],{"type":17,"tag":42,"props":43,"children":45},"h3",{"id":44},"when-and-how-to-use",[46],{"type":23,"value":47},"When and how to use",{"type":17,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68],{"type":17,"tag":53,"props":54,"children":55},"li",{},[56],{"type":23,"value":57},"Use clear and concise content.",{"type":17,"tag":53,"props":59,"children":60},{},[61],{"type":23,"value":62},"Ensure content is relevant to the action or destination.",{"type":17,"tag":53,"props":64,"children":65},{},[66],{"type":23,"value":67},"Embed in any body content area of a content page.",{"type":17,"tag":53,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use with a relevant image or graphic.",{"type":17,"tag":42,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":49,"props":80,"children":81},{},[82,87,92,97],{"type":17,"tag":53,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don’t use without an image or graphic.",{"type":17,"tag":53,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don’t overload it with content.",{"type":17,"tag":53,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don’t use when a large amount of text is needed for more context.",{"type":17,"tag":53,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t use other interactive elements, like links.",{"type":17,"tag":103,"props":104,"children":105},"hr",{},[],{"type":17,"tag":18,"props":107,"children":109},{"id":108},"theming",[110],{"type":23,"value":111},"Theming",{"type":17,"tag":26,"props":113,"children":114},{},[115],{"type":23,"value":116},"The call to action card adopts its theming from your button component’s settings.",{"type":17,"tag":26,"props":118,"children":119},{},[120],{"type":23,"value":121},"If you choose neutral button for your site, the call to action card will display buttons in the neutral theme.",{"type":17,"tag":123,"props":124,"children":125},"docs-theme-chooser",{},[126],{"type":17,"tag":37,"props":127,"children":128},{"id":39},[],{"type":17,"tag":26,"props":130,"children":131},{},[132,134,140,142,147],{"type":23,"value":133},"To create your own theme, see ",{"type":17,"tag":135,"props":136,"children":137},"a",{"href":8},[138],{"type":23,"value":139},"theming guidance for designers",{"type":23,"value":141}," or ",{"type":17,"tag":135,"props":143,"children":144},{"href":8},[145],{"type":23,"value":146},"theming guidance for developers",{"type":23,"value":148},".",{"title":8,"searchDepth":150,"depth":150,"links":151},2,[152,157],{"id":20,"depth":150,"text":24,"children":153},[154,156],{"id":44,"depth":155,"text":47},3,{"id":75,"depth":155,"text":78},{"id":108,"depth":150,"text":111},"markdown","content:design-system:5.components:call-to-action.md","content","design-system/5.components/call-to-action.md","md",{"/design-system/components/call-to-action":164},[165,171],{"_path":166,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":167,"description":168,"layout":11,"label":12,"_type":158,"_id":169,"_source":160,"_file":170,"_extension":162},"/design-system/components/button","Button","The Button component helps a user to carry out an action.","content:design-system:5.components:button.md","design-system/5.components/button.md",{"_path":172,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":173,"description":174,"layout":11,"label":12,"_type":158,"_id":175,"_source":160,"_file":176,"_extension":162},"/design-system/components/callout","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","content:design-system:5.components:callout.md","design-system/5.components/callout.md",{},[179,184,425],{"title":180,"_path":181,"icon":182,"layout":183},"Ripple Design System","/","carbon:home","home",{"title":185,"_path":186,"children":187},"Design System","/design-system",[188,204,220,249,283],{"title":189,"_path":190,"children":191},"About","/design-system/about",[192,195,198,201],{"title":193,"_path":194,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":196,"_path":197,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":199,"_path":200,"layout":11},"Support","/design-system/about/getting-support",{"title":202,"_path":203,"layout":11},"Contributing","/design-system/about/contributing",{"title":205,"_path":206,"children":207},"Design","/design-system/design",[208,211,214,217],{"title":209,"_path":210,"layout":11},"Getting started","/design-system/design/getting-started",{"title":212,"_path":213,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":215,"_path":216,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":218,"_path":219,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":221,"_path":222,"children":223},"Develop","/design-system/develop",[224,226,228,231],{"title":209,"_path":225,"layout":11},"/design-system/develop/getting-started",{"title":202,"_path":227,"layout":11},"/design-system/develop/contributing",{"title":229,"_path":230,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":232,"children":233,"layout":11},"/design-system/develop/usage",[234,237,240,243,246],{"title":235,"_path":236,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":238,"_path":239,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":241,"_path":242,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":244,"_path":245,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":247,"_path":248,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":250,"_path":251,"children":252},"Styles","/design-system/styles",[253,256,259,262,265,268,271,274,277,280],{"title":254,"_path":255,"layout":11},"Colour","/design-system/styles/colour",{"title":257,"_path":258,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":260,"_path":261,"layout":11},"Grid","/design-system/styles/grid",{"title":263,"_path":264,"layout":11},"Icons","/design-system/styles/icons",{"title":266,"_path":267,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":269,"_path":270,"layout":11},"Layout","/design-system/styles/layout",{"title":272,"_path":273,"layout":11},"Logo","/design-system/styles/logo",{"title":275,"_path":276,"layout":11},"Motion","/design-system/styles/motion",{"title":278,"_path":279,"layout":11},"Spacing","/design-system/styles/spacing",{"title":281,"_path":282,"layout":11},"Typography","/design-system/styles/typography",{"title":284,"_path":285,"children":286},"Components","/design-system/components",[287,290,293,296,299,302,303,304,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422],{"title":288,"_path":289,"layout":11},"Accordion","/design-system/components/accordion",{"title":291,"_path":292,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":294,"_path":295,"layout":11},"Alert","/design-system/components/alert",{"title":297,"_path":298,"layout":11},"Block quote","/design-system/components/block-quote",{"title":300,"_path":301,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":167,"_path":166,"layout":11},{"title":9,"_path":5,"layout":11},{"title":173,"_path":172,"layout":11},{"title":306,"_path":307,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":309,"_path":310,"layout":11},"Card","/design-system/components/card",{"title":312,"_path":313,"layout":11},"Carousel","/design-system/components/carousel",{"title":315,"_path":316,"layout":11},"Category grid","/design-system/components/category-grid",{"title":318,"_path":319,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":321,"_path":322,"layout":11},"Chip","/design-system/components/chip",{"title":324,"_path":325,"layout":11},"Contact us","/design-system/components/contact-us",{"title":327,"_path":328,"layout":11},"Date input","/design-system/components/date-input",{"title":330,"_path":331,"layout":11},"Detail list","/design-system/components/detail-list",{"title":333,"_path":334,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":336,"_path":337,"layout":11},"File","/design-system/components/file",{"title":339,"_path":340,"layout":11},"Footer","/design-system/components/footer",{"title":342,"_path":343,"layout":11},"Form alert","/design-system/components/form-alert",{"title":345,"_path":346,"layout":11},"Form","/design-system/components/form",{"title":348,"_path":349,"layout":11},"Header","/design-system/components/header",{"title":351,"_path":352,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":354,"_path":355,"layout":11},"Input field","/design-system/components/input-field",{"title":357,"_path":358,"layout":11},"Key dates","/design-system/components/key-dates",{"title":360,"_path":361,"layout":11},"Media embed","/design-system/components/media-embed",{"title":363,"_path":364,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":366,"_path":367,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":369,"_path":370,"layout":11},"Media","/design-system/components/media",{"title":372,"_path":373,"layout":11},"Option button","/design-system/components/option-button",{"title":375,"_path":376,"layout":11},"Page action","/design-system/components/page-action",{"title":378,"_path":379,"layout":11},"Pagination","/design-system/components/pagination",{"title":381,"_path":382,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":384,"_path":385,"layout":11},"Profile","/design-system/components/profile",{"title":387,"_path":388,"layout":11},"Radio button","/design-system/components/radio-button",{"title":390,"_path":391,"layout":11},"Related links","/design-system/components/related-links",{"title":393,"_path":394,"layout":11},"Results listing","/design-system/components/results-listing",{"title":396,"_path":397,"layout":11},"Search bar","/design-system/components/search-bar",{"title":399,"_path":400,"layout":11},"Skip link","/design-system/components/skip-link",{"title":402,"_path":403,"layout":11},"Social share","/design-system/components/social-share",{"title":405,"_path":406,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":408,"_path":409,"layout":11},"Table","/design-system/components/table",{"title":411,"_path":412,"layout":11},"Tabs","/design-system/components/tabs",{"title":414,"_path":415,"layout":11},"Tag","/design-system/components/tag",{"title":417,"_path":418,"layout":11},"Text area","/design-system/components/text-area",{"title":420,"_path":421,"layout":11},"Timeline","/design-system/components/timeline",{"title":423,"_path":424,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":426,"_path":427,"children":428,"layout":11},"Ripple Framework","/framework",[429,430,448,470],{"title":426,"_path":427,"layout":11},{"title":431,"_path":432,"children":433},"Key Concepts","/framework/key-concepts",[434,436,439,442,445],{"title":241,"_path":435,"layout":11},"/framework/key-concepts/nuxt",{"title":437,"_path":438,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":440,"_path":441,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":443,"_path":444,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":446,"_path":447,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":449,"_path":450,"children":451},"Guides","/framework/guides",[452,455,458,461,464,467],{"title":453,"_path":454,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":456,"_path":457,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":459,"_path":460,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":462,"_path":463,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":465,"_path":466,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":468,"_path":469,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":471,"_path":472,"layout":11},"Core modules","/framework/core-modules",["Reactive",474],{"module-navigation":475},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Call to action</h1><p class="rpl-type-p-large" data-v-3163c6df>The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action.<!--]--></p><p><!--[-->Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use clear and concise content.<!--]--></li><li><!--[-->Ensure content is relevant to the action or destination.<!--]--></li><li><!--[-->Embed in any body content area of a content page.<!--]--></li><li><!--[-->Use with a relevant image or graphic.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use without an image or graphic.<!--]--></li><li><!--[-->Don’t overload it with content.<!--]--></li><li><!--[-->Don’t use when a large amount of text is needed for more context.<!--]--></li><li><!--[-->Don’t use other interactive elements, like links.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The call to action card adopts its theming from your button component’s settings.<!--]--></p><p><!--[-->If you choose neutral button for your site, the call to action card will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--call-to-action&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--call-to-action&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/call-to-action.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/call-to-action/_payload.json">[{"state":1,"_errors":473,"serverRendered":476,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":163,"$sdd-globals":177,"$sdd-navigation":178},{"/design-system/components/call-to-action":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":158,"_id":159,"_source":160,"_file":161,"_extension":162},"/design-system/components/call-to-action","components",false,"","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","page","Core",{"type":14,"children":15,"toc":149},"root",[16,25,31,36,41,48,73,79,102,106,112,117,122,129],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action.",{"type":17,"tag":37,"props":38,"children":40},"docs-example",{"id":39},"core-navigation-card--call-to-action",[],{"type":17,"tag":42,"props":43,"children":45},"h3",{"id":44},"when-and-how-to-use",[46],{"type":23,"value":47},"When and how to use",{"type":17,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68],{"type":17,"tag":53,"props":54,"children":55},"li",{},[56],{"type":23,"value":57},"Use clear and concise content.",{"type":17,"tag":53,"props":59,"children":60},{},[61],{"type":23,"value":62},"Ensure content is relevant to the action or destination.",{"type":17,"tag":53,"props":64,"children":65},{},[66],{"type":23,"value":67},"Embed in any body content area of a content page.",{"type":17,"tag":53,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use with a relevant image or graphic.",{"type":17,"tag":42,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":49,"props":80,"children":81},{},[82,87,92,97],{"type":17,"tag":53,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don’t use without an image or graphic.",{"type":17,"tag":53,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don’t overload it with content.",{"type":17,"tag":53,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don’t use when a large amount of text is needed for more context.",{"type":17,"tag":53,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t use other interactive elements, like links.",{"type":17,"tag":103,"props":104,"children":105},"hr",{},[],{"type":17,"tag":18,"props":107,"children":109},{"id":108},"theming",[110],{"type":23,"value":111},"Theming",{"type":17,"tag":26,"props":113,"children":114},{},[115],{"type":23,"value":116},"The call to action card adopts its theming from your button component’s settings.",{"type":17,"tag":26,"props":118,"children":119},{},[120],{"type":23,"value":121},"If you choose neutral button for your site, the call to action card will display buttons in the neutral theme.",{"type":17,"tag":123,"props":124,"children":125},"docs-theme-chooser",{},[126],{"type":17,"tag":37,"props":127,"children":128},{"id":39},[],{"type":17,"tag":26,"props":130,"children":131},{},[132,134,140,142,147],{"type":23,"value":133},"To create your own theme, see ",{"type":17,"tag":135,"props":136,"children":137},"a",{"href":8},[138],{"type":23,"value":139},"theming guidance for designers",{"type":23,"value":141}," or ",{"type":17,"tag":135,"props":143,"children":144},{"href":8},[145],{"type":23,"value":146},"theming guidance for developers",{"type":23,"value":148},".",{"title":8,"searchDepth":150,"depth":150,"links":151},2,[152,157],{"id":20,"depth":150,"text":24,"children":153},[154,156],{"id":44,"depth":155,"text":47},3,{"id":75,"depth":155,"text":78},{"id":108,"depth":150,"text":111},"markdown","content:design-system:5.components:call-to-action.md","content","design-system/5.components/call-to-action.md","md",{"/design-system/components/call-to-action":164},[165,171],{"_path":166,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":167,"description":168,"layout":11,"label":12,"_type":158,"_id":169,"_source":160,"_file":170,"_extension":162},"/design-system/components/button","Button","The Button component helps a user to carry out an action.","content:design-system:5.components:button.md","design-system/5.components/button.md",{"_path":172,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":173,"description":174,"layout":11,"label":12,"_type":158,"_id":175,"_source":160,"_file":176,"_extension":162},"/design-system/components/callout","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","content:design-system:5.components:callout.md","design-system/5.components/callout.md",{},[179,184,425],{"title":180,"_path":181,"icon":182,"layout":183},"Ripple Design System","/","carbon:home","home",{"title":185,"_path":186,"children":187},"Design System","/design-system",[188,204,220,249,283],{"title":189,"_path":190,"children":191},"About","/design-system/about",[192,195,198,201],{"title":193,"_path":194,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":196,"_path":197,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":199,"_path":200,"layout":11},"Support","/design-system/about/getting-support",{"title":202,"_path":203,"layout":11},"Contributing","/design-system/about/contributing",{"title":205,"_path":206,"children":207},"Design","/design-system/design",[208,211,214,217],{"title":209,"_path":210,"layout":11},"Getting started","/design-system/design/getting-started",{"title":212,"_path":213,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":215,"_path":216,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":218,"_path":219,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":221,"_path":222,"children":223},"Develop","/design-system/develop",[224,226,228,231],{"title":209,"_path":225,"layout":11},"/design-system/develop/getting-started",{"title":202,"_path":227,"layout":11},"/design-system/develop/contributing",{"title":229,"_path":230,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":232,"children":233,"layout":11},"/design-system/develop/usage",[234,237,240,243,246],{"title":235,"_path":236,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":238,"_path":239,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":241,"_path":242,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":244,"_path":245,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":247,"_path":248,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":250,"_path":251,"children":252},"Styles","/design-system/styles",[253,256,259,262,265,268,271,274,277,280],{"title":254,"_path":255,"layout":11},"Colour","/design-system/styles/colour",{"title":257,"_path":258,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":260,"_path":261,"layout":11},"Grid","/design-system/styles/grid",{"title":263,"_path":264,"layout":11},"Icons","/design-system/styles/icons",{"title":266,"_path":267,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":269,"_path":270,"layout":11},"Layout","/design-system/styles/layout",{"title":272,"_path":273,"layout":11},"Logo","/design-system/styles/logo",{"title":275,"_path":276,"layout":11},"Motion","/design-system/styles/motion",{"title":278,"_path":279,"layout":11},"Spacing","/design-system/styles/spacing",{"title":281,"_path":282,"layout":11},"Typography","/design-system/styles/typography",{"title":284,"_path":285,"children":286},"Components","/design-system/components",[287,290,293,296,299,302,303,304,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422],{"title":288,"_path":289,"layout":11},"Accordion","/design-system/components/accordion",{"title":291,"_path":292,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":294,"_path":295,"layout":11},"Alert","/design-system/components/alert",{"title":297,"_path":298,"layout":11},"Block quote","/design-system/components/block-quote",{"title":300,"_path":301,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":167,"_path":166,"layout":11},{"title":9,"_path":5,"layout":11},{"title":173,"_path":172,"layout":11},{"title":306,"_path":307,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":309,"_path":310,"layout":11},"Card","/design-system/components/card",{"title":312,"_path":313,"layout":11},"Carousel","/design-system/components/carousel",{"title":315,"_path":316,"layout":11},"Category grid","/design-system/components/category-grid",{"title":318,"_path":319,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":321,"_path":322,"layout":11},"Chip","/design-system/components/chip",{"title":324,"_path":325,"layout":11},"Contact us","/design-system/components/contact-us",{"title":327,"_path":328,"layout":11},"Date input","/design-system/components/date-input",{"title":330,"_path":331,"layout":11},"Detail list","/design-system/components/detail-list",{"title":333,"_path":334,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":336,"_path":337,"layout":11},"File","/design-system/components/file",{"title":339,"_path":340,"layout":11},"Footer","/design-system/components/footer",{"title":342,"_path":343,"layout":11},"Form alert","/design-system/components/form-alert",{"title":345,"_path":346,"layout":11},"Form","/design-system/components/form",{"title":348,"_path":349,"layout":11},"Header","/design-system/components/header",{"title":351,"_path":352,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":354,"_path":355,"layout":11},"Input field","/design-system/components/input-field",{"title":357,"_path":358,"layout":11},"Key dates","/design-system/components/key-dates",{"title":360,"_path":361,"layout":11},"Media embed","/design-system/components/media-embed",{"title":363,"_path":364,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":366,"_path":367,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":369,"_path":370,"layout":11},"Media","/design-system/components/media",{"title":372,"_path":373,"layout":11},"Option button","/design-system/components/option-button",{"title":375,"_path":376,"layout":11},"Page action","/design-system/components/page-action",{"title":378,"_path":379,"layout":11},"Pagination","/design-system/components/pagination",{"title":381,"_path":382,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":384,"_path":385,"layout":11},"Profile","/design-system/components/profile",{"title":387,"_path":388,"layout":11},"Radio button","/design-system/components/radio-button",{"title":390,"_path":391,"layout":11},"Related links","/design-system/components/related-links",{"title":393,"_path":394,"layout":11},"Results listing","/design-system/components/results-listing",{"title":396,"_path":397,"layout":11},"Search bar","/design-system/components/search-bar",{"title":399,"_path":400,"layout":11},"Skip link","/design-system/components/skip-link",{"title":402,"_path":403,"layout":11},"Social share","/design-system/components/social-share",{"title":405,"_path":406,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":408,"_path":409,"layout":11},"Table","/design-system/components/table",{"title":411,"_path":412,"layout":11},"Tabs","/design-system/components/tabs",{"title":414,"_path":415,"layout":11},"Tag","/design-system/components/tag",{"title":417,"_path":418,"layout":11},"Text area","/design-system/components/text-area",{"title":420,"_path":421,"layout":11},"Timeline","/design-system/components/timeline",{"title":423,"_path":424,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":426,"_path":427,"children":428,"layout":11},"Ripple Framework","/framework",[429,430,448,470],{"title":426,"_path":427,"layout":11},{"title":431,"_path":432,"children":433},"Key Concepts","/framework/key-concepts",[434,436,439,442,445],{"title":241,"_path":435,"layout":11},"/framework/key-concepts/nuxt",{"title":437,"_path":438,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":440,"_path":441,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":443,"_path":444,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":446,"_path":447,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":449,"_path":450,"children":451},"Guides","/framework/guides",[452,455,458,461,464,467],{"title":453,"_path":454,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":456,"_path":457,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":459,"_path":460,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":462,"_path":463,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":465,"_path":466,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":468,"_path":469,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":471,"_path":472,"layout":11},"Core modules","/framework/core-modules",["Reactive",474],{"module-navigation":475},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/callout/index.html b/design-system/components/callout/index.html index 902ed0cde7..3b6b3a62c1 100644 --- a/design-system/components/callout/index.html +++ b/design-system/components/callout/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Callout</h1><p class="rpl-type-p-large" data-v-3163c6df>The Callout component is a text excerpt that draws attention to specific or important content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use callouts to:<!--]--></p><ul><!--[--><li><!--[-->draw a user's attention<!--]--></li><li><!--[-->add emphasis to the content<!--]--></li><li><!--[-->provide a user with more information.<!--]--></li><!--]--></ul><p><!--[-->A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--callout&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Highlight important information vital to the user.<!--]--></li><li><!--[-->Place a callout in a prominent position on the page.<!--]--></li><li><!--[-->Use with text only.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only feature one callout per page.<!--]--></li><li><!--[-->Use no more than 2 paragraphs per callout.<!--]--></li><li><!--[-->Don't put the callout at the bottom of the page.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->To allow for different levels of emphasis, a callout has 2 styles:<!--]--></p><ul><!--[--><li><!--[-->accent<!--]--></li><li><!--[-->neutral.<!--]--></li><!--]--></ul><h3 id="accent"><a href="#accent"><!--[-->Accent<!--]--></a></h3><p><!--[-->Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--callout&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="neutral"><a href="#neutral"><!--[-->Neutral<!--]--></a></h3><p><!--[-->Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--callout-neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout-neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The accent variant uses the site accent colour to:<!--]--></p><ul><!--[--><li><!--[-->add visual prominence to the content<!--]--></li><li><!--[-->aid hierarchy in the content area.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--callout&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->To enhance visual weight and aim to conform with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.0 Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>, Ripple callouts use:<!--]--></p><ul><!--[--><li><!--[-->a thick left-hand border<!--]--></li><li><!--[-->background colours<!--]--></li><li><!--[-->padding.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/callout.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/callout/_payload.json">[{"state":1,"_errors":600,"serverRendered":603,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":290,"$sdd-globals":304,"$sdd-navigation":305},{"/design-system/components/callout":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":285,"_id":286,"_source":287,"_file":288,"_extension":289},"/design-system/components/callout","components",false,"","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","page","Core",{"type":14,"children":15,"toc":271},"root",[16,25,31,51,56,61,68,86,92,110,114,120,125,138,143,148,151,157,162,166,169,175,180,193,200,220,223,229,244,262],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use callouts to:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41,46],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"draw a user's attention",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"add emphasis to the content",{"type":17,"tag":36,"props":47,"children":48},{},[49],{"type":23,"value":50},"provide a user with more information.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-containers-content--callout",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":32,"props":69,"children":70},{},[71,76,81],{"type":17,"tag":36,"props":72,"children":73},{},[74],{"type":23,"value":75},"Highlight important information vital to the user.",{"type":17,"tag":36,"props":77,"children":78},{},[79],{"type":23,"value":80},"Place a callout in a prominent position on the page.",{"type":17,"tag":36,"props":82,"children":83},{},[84],{"type":23,"value":85},"Use with text only.",{"type":17,"tag":62,"props":87,"children":89},{"id":88},"when-and-how-not-to-use",[90],{"type":23,"value":91},"When and how not to use",{"type":17,"tag":32,"props":93,"children":94},{},[95,100,105],{"type":17,"tag":36,"props":96,"children":97},{},[98],{"type":23,"value":99},"Only feature one callout per page.",{"type":17,"tag":36,"props":101,"children":102},{},[103],{"type":23,"value":104},"Use no more than 2 paragraphs per callout.",{"type":17,"tag":36,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't put the callout at the bottom of the page.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"variants",[118],{"type":23,"value":119},"Variants",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"To allow for different levels of emphasis, a callout has 2 styles:",{"type":17,"tag":32,"props":126,"children":127},{},[128,133],{"type":17,"tag":36,"props":129,"children":130},{},[131],{"type":23,"value":132},"accent",{"type":17,"tag":36,"props":134,"children":135},{},[136],{"type":23,"value":137},"neutral.",{"type":17,"tag":62,"props":139,"children":140},{"id":132},[141],{"type":23,"value":142},"Accent",{"type":17,"tag":26,"props":144,"children":145},{},[146],{"type":23,"value":147},"Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose.",{"type":17,"tag":57,"props":149,"children":150},{"id":59},[],{"type":17,"tag":62,"props":152,"children":154},{"id":153},"neutral",[155],{"type":23,"value":156},"Neutral",{"type":17,"tag":26,"props":158,"children":159},{},[160],{"type":23,"value":161},"Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.",{"type":17,"tag":57,"props":163,"children":165},{"id":164},"core-containers-content--callout-neutral",[],{"type":17,"tag":111,"props":167,"children":168},{},[],{"type":17,"tag":18,"props":170,"children":172},{"id":171},"theming",[173],{"type":23,"value":174},"Theming",{"type":17,"tag":26,"props":176,"children":177},{},[178],{"type":23,"value":179},"The accent variant uses the site accent colour to:",{"type":17,"tag":32,"props":181,"children":182},{},[183,188],{"type":17,"tag":36,"props":184,"children":185},{},[186],{"type":23,"value":187},"add visual prominence to the content",{"type":17,"tag":36,"props":189,"children":190},{},[191],{"type":23,"value":192},"aid hierarchy in the content area.",{"type":17,"tag":194,"props":195,"children":196},"docs-theme-chooser",{},[197],{"type":17,"tag":57,"props":198,"children":199},{"id":59},[],{"type":17,"tag":26,"props":201,"children":202},{},[203,205,211,213,218],{"type":23,"value":204},"To create your own theme, see ",{"type":17,"tag":206,"props":207,"children":208},"a",{"href":8},[209],{"type":23,"value":210},"theming guidance for designers",{"type":23,"value":212}," or ",{"type":17,"tag":206,"props":214,"children":215},{"href":8},[216],{"type":23,"value":217},"theming guidance for developers",{"type":23,"value":219},".",{"type":17,"tag":111,"props":221,"children":222},{},[],{"type":17,"tag":18,"props":224,"children":226},{"id":225},"rationale",[227],{"type":23,"value":228},"Rationale",{"type":17,"tag":26,"props":230,"children":231},{},[232,234,242],{"type":23,"value":233},"To enhance visual weight and aim to conform with ",{"type":17,"tag":206,"props":235,"children":239},{"href":236,"rel":237},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[238],"nofollow",[240],{"type":23,"value":241},"WCAG2.0 Criterion 1.4.1",{"type":23,"value":243},", Ripple callouts use:",{"type":17,"tag":32,"props":245,"children":246},{},[247,252,257],{"type":17,"tag":36,"props":248,"children":249},{},[250],{"type":23,"value":251},"a thick left-hand border",{"type":17,"tag":36,"props":253,"children":254},{},[255],{"type":23,"value":256},"background colours",{"type":17,"tag":36,"props":258,"children":259},{},[260],{"type":23,"value":261},"padding.",{"type":17,"tag":263,"props":264,"children":265},"blockquote",{},[266],{"type":17,"tag":26,"props":267,"children":268},{},[269],{"type":23,"value":270},"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)",{"title":8,"searchDepth":272,"depth":272,"links":273},2,[274,279,283,284],{"id":20,"depth":272,"text":24,"children":275},[276,278],{"id":64,"depth":277,"text":67},3,{"id":88,"depth":277,"text":91},{"id":116,"depth":272,"text":119,"children":280},[281,282],{"id":132,"depth":277,"text":142},{"id":153,"depth":277,"text":156},{"id":171,"depth":272,"text":174},{"id":225,"depth":272,"text":228},"markdown","content:design-system:5.components:callout.md","content","design-system/5.components/callout.md","md",{"/design-system/components/callout":291},[292,298],{"_path":293,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":294,"description":295,"layout":11,"label":12,"_type":285,"_id":296,"_source":287,"_file":297,"_extension":289},"/design-system/components/call-to-action","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","content:design-system:5.components:call-to-action.md","design-system/5.components/call-to-action.md",{"_path":299,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":300,"description":301,"layout":11,"label":12,"_type":285,"_id":302,"_source":287,"_file":303,"_extension":289},"/design-system/components/campaign-banner","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","content:design-system:5.components:campaign-banner.md","design-system/5.components/campaign-banner.md",{},[306,311,552],{"title":307,"_path":308,"icon":309,"layout":310},"Ripple Design System","/","carbon:home","home",{"title":312,"_path":313,"children":314},"Design System","/design-system",[315,331,347,376,410],{"title":316,"_path":317,"children":318},"About","/design-system/about",[319,322,325,328],{"title":320,"_path":321,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":323,"_path":324,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":326,"_path":327,"layout":11},"Support","/design-system/about/getting-support",{"title":329,"_path":330,"layout":11},"Contributing","/design-system/about/contributing",{"title":332,"_path":333,"children":334},"Design","/design-system/design",[335,338,341,344],{"title":336,"_path":337,"layout":11},"Getting started","/design-system/design/getting-started",{"title":339,"_path":340,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":342,"_path":343,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":345,"_path":346,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":348,"_path":349,"children":350},"Develop","/design-system/develop",[351,353,355,358],{"title":336,"_path":352,"layout":11},"/design-system/develop/getting-started",{"title":329,"_path":354,"layout":11},"/design-system/develop/contributing",{"title":356,"_path":357,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":359,"children":360,"layout":11},"/design-system/develop/usage",[361,364,367,370,373],{"title":362,"_path":363,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":365,"_path":366,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":368,"_path":369,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":371,"_path":372,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":374,"_path":375,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":377,"_path":378,"children":379},"Styles","/design-system/styles",[380,383,386,389,392,395,398,401,404,407],{"title":381,"_path":382,"layout":11},"Colour","/design-system/styles/colour",{"title":384,"_path":385,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":387,"_path":388,"layout":11},"Grid","/design-system/styles/grid",{"title":390,"_path":391,"layout":11},"Icons","/design-system/styles/icons",{"title":393,"_path":394,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":396,"_path":397,"layout":11},"Layout","/design-system/styles/layout",{"title":399,"_path":400,"layout":11},"Logo","/design-system/styles/logo",{"title":402,"_path":403,"layout":11},"Motion","/design-system/styles/motion",{"title":405,"_path":406,"layout":11},"Spacing","/design-system/styles/spacing",{"title":408,"_path":409,"layout":11},"Typography","/design-system/styles/typography",{"title":411,"_path":412,"children":413},"Components","/design-system/components",[414,417,420,423,426,429,432,433,434,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549],{"title":415,"_path":416,"layout":11},"Accordion","/design-system/components/accordion",{"title":418,"_path":419,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":421,"_path":422,"layout":11},"Alert","/design-system/components/alert",{"title":424,"_path":425,"layout":11},"Block quote","/design-system/components/block-quote",{"title":427,"_path":428,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":430,"_path":431,"layout":11},"Button","/design-system/components/button",{"title":294,"_path":293,"layout":11},{"title":9,"_path":5,"layout":11},{"title":300,"_path":299,"layout":11},{"title":436,"_path":437,"layout":11},"Card","/design-system/components/card",{"title":439,"_path":440,"layout":11},"Carousel","/design-system/components/carousel",{"title":442,"_path":443,"layout":11},"Category grid","/design-system/components/category-grid",{"title":445,"_path":446,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":448,"_path":449,"layout":11},"Chip","/design-system/components/chip",{"title":451,"_path":452,"layout":11},"Contact us","/design-system/components/contact-us",{"title":454,"_path":455,"layout":11},"Date input","/design-system/components/date-input",{"title":457,"_path":458,"layout":11},"Detail list","/design-system/components/detail-list",{"title":460,"_path":461,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":463,"_path":464,"layout":11},"File","/design-system/components/file",{"title":466,"_path":467,"layout":11},"Footer","/design-system/components/footer",{"title":469,"_path":470,"layout":11},"Form alert","/design-system/components/form-alert",{"title":472,"_path":473,"layout":11},"Form","/design-system/components/form",{"title":475,"_path":476,"layout":11},"Header","/design-system/components/header",{"title":478,"_path":479,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":481,"_path":482,"layout":11},"Input field","/design-system/components/input-field",{"title":484,"_path":485,"layout":11},"Key dates","/design-system/components/key-dates",{"title":487,"_path":488,"layout":11},"Media embed","/design-system/components/media-embed",{"title":490,"_path":491,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":493,"_path":494,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":496,"_path":497,"layout":11},"Media","/design-system/components/media",{"title":499,"_path":500,"layout":11},"Option button","/design-system/components/option-button",{"title":502,"_path":503,"layout":11},"Page action","/design-system/components/page-action",{"title":505,"_path":506,"layout":11},"Pagination","/design-system/components/pagination",{"title":508,"_path":509,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":511,"_path":512,"layout":11},"Profile","/design-system/components/profile",{"title":514,"_path":515,"layout":11},"Radio button","/design-system/components/radio-button",{"title":517,"_path":518,"layout":11},"Related links","/design-system/components/related-links",{"title":520,"_path":521,"layout":11},"Results listing","/design-system/components/results-listing",{"title":523,"_path":524,"layout":11},"Search bar","/design-system/components/search-bar",{"title":526,"_path":527,"layout":11},"Skip link","/design-system/components/skip-link",{"title":529,"_path":530,"layout":11},"Social share","/design-system/components/social-share",{"title":532,"_path":533,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":535,"_path":536,"layout":11},"Table","/design-system/components/table",{"title":538,"_path":539,"layout":11},"Tabs","/design-system/components/tabs",{"title":541,"_path":542,"layout":11},"Tag","/design-system/components/tag",{"title":544,"_path":545,"layout":11},"Text area","/design-system/components/text-area",{"title":547,"_path":548,"layout":11},"Timeline","/design-system/components/timeline",{"title":550,"_path":551,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":553,"_path":554,"children":555,"layout":11},"Ripple Framework","/framework",[556,557,575,597],{"title":553,"_path":554,"layout":11},{"title":558,"_path":559,"children":560},"Key Concepts","/framework/key-concepts",[561,563,566,569,572],{"title":368,"_path":562,"layout":11},"/framework/key-concepts/nuxt",{"title":564,"_path":565,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":567,"_path":568,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":570,"_path":571,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":573,"_path":574,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":576,"_path":577,"children":578},"Guides","/framework/guides",[579,582,585,588,591,594],{"title":580,"_path":581,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":583,"_path":584,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":586,"_path":587,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":589,"_path":590,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":592,"_path":593,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":595,"_path":596,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":598,"_path":599,"layout":11},"Core modules","/framework/core-modules",["Reactive",601],{"module-navigation":602},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Callout</h1><p class="rpl-type-p-large" data-v-3163c6df>The Callout component is a text excerpt that draws attention to specific or important content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use callouts to:<!--]--></p><ul><!--[--><li><!--[-->draw a user's attention<!--]--></li><li><!--[-->add emphasis to the content<!--]--></li><li><!--[-->provide a user with more information.<!--]--></li><!--]--></ul><p><!--[-->A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--callout&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Highlight important information vital to the user.<!--]--></li><li><!--[-->Place a callout in a prominent position on the page.<!--]--></li><li><!--[-->Use with text only.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only feature one callout per page.<!--]--></li><li><!--[-->Use no more than 2 paragraphs per callout.<!--]--></li><li><!--[-->Don't put the callout at the bottom of the page.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->To allow for different levels of emphasis, a callout has 2 styles:<!--]--></p><ul><!--[--><li><!--[-->accent<!--]--></li><li><!--[-->neutral.<!--]--></li><!--]--></ul><h3 id="accent"><a href="#accent"><!--[-->Accent<!--]--></a></h3><p><!--[-->Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--callout&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="neutral"><a href="#neutral"><!--[-->Neutral<!--]--></a></h3><p><!--[-->Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--callout-neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout-neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The accent variant uses the site accent colour to:<!--]--></p><ul><!--[--><li><!--[-->add visual prominence to the content<!--]--></li><li><!--[-->aid hierarchy in the content area.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--callout&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->To enhance visual weight and aim to conform with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.0 Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>, Ripple callouts use:<!--]--></p><ul><!--[--><li><!--[-->a thick left-hand border<!--]--></li><li><!--[-->background colours<!--]--></li><li><!--[-->padding.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/callout.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/callout/_payload.json">[{"state":1,"_errors":600,"serverRendered":603,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":290,"$sdd-globals":304,"$sdd-navigation":305},{"/design-system/components/callout":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":285,"_id":286,"_source":287,"_file":288,"_extension":289},"/design-system/components/callout","components",false,"","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","page","Core",{"type":14,"children":15,"toc":271},"root",[16,25,31,51,56,61,68,86,92,110,114,120,125,138,143,148,151,157,162,166,169,175,180,193,200,220,223,229,244,262],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use callouts to:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41,46],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"draw a user's attention",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"add emphasis to the content",{"type":17,"tag":36,"props":47,"children":48},{},[49],{"type":23,"value":50},"provide a user with more information.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-containers-content--callout",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":32,"props":69,"children":70},{},[71,76,81],{"type":17,"tag":36,"props":72,"children":73},{},[74],{"type":23,"value":75},"Highlight important information vital to the user.",{"type":17,"tag":36,"props":77,"children":78},{},[79],{"type":23,"value":80},"Place a callout in a prominent position on the page.",{"type":17,"tag":36,"props":82,"children":83},{},[84],{"type":23,"value":85},"Use with text only.",{"type":17,"tag":62,"props":87,"children":89},{"id":88},"when-and-how-not-to-use",[90],{"type":23,"value":91},"When and how not to use",{"type":17,"tag":32,"props":93,"children":94},{},[95,100,105],{"type":17,"tag":36,"props":96,"children":97},{},[98],{"type":23,"value":99},"Only feature one callout per page.",{"type":17,"tag":36,"props":101,"children":102},{},[103],{"type":23,"value":104},"Use no more than 2 paragraphs per callout.",{"type":17,"tag":36,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't put the callout at the bottom of the page.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"variants",[118],{"type":23,"value":119},"Variants",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"To allow for different levels of emphasis, a callout has 2 styles:",{"type":17,"tag":32,"props":126,"children":127},{},[128,133],{"type":17,"tag":36,"props":129,"children":130},{},[131],{"type":23,"value":132},"accent",{"type":17,"tag":36,"props":134,"children":135},{},[136],{"type":23,"value":137},"neutral.",{"type":17,"tag":62,"props":139,"children":140},{"id":132},[141],{"type":23,"value":142},"Accent",{"type":17,"tag":26,"props":144,"children":145},{},[146],{"type":23,"value":147},"Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose.",{"type":17,"tag":57,"props":149,"children":150},{"id":59},[],{"type":17,"tag":62,"props":152,"children":154},{"id":153},"neutral",[155],{"type":23,"value":156},"Neutral",{"type":17,"tag":26,"props":158,"children":159},{},[160],{"type":23,"value":161},"Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.",{"type":17,"tag":57,"props":163,"children":165},{"id":164},"core-containers-content--callout-neutral",[],{"type":17,"tag":111,"props":167,"children":168},{},[],{"type":17,"tag":18,"props":170,"children":172},{"id":171},"theming",[173],{"type":23,"value":174},"Theming",{"type":17,"tag":26,"props":176,"children":177},{},[178],{"type":23,"value":179},"The accent variant uses the site accent colour to:",{"type":17,"tag":32,"props":181,"children":182},{},[183,188],{"type":17,"tag":36,"props":184,"children":185},{},[186],{"type":23,"value":187},"add visual prominence to the content",{"type":17,"tag":36,"props":189,"children":190},{},[191],{"type":23,"value":192},"aid hierarchy in the content area.",{"type":17,"tag":194,"props":195,"children":196},"docs-theme-chooser",{},[197],{"type":17,"tag":57,"props":198,"children":199},{"id":59},[],{"type":17,"tag":26,"props":201,"children":202},{},[203,205,211,213,218],{"type":23,"value":204},"To create your own theme, see ",{"type":17,"tag":206,"props":207,"children":208},"a",{"href":8},[209],{"type":23,"value":210},"theming guidance for designers",{"type":23,"value":212}," or ",{"type":17,"tag":206,"props":214,"children":215},{"href":8},[216],{"type":23,"value":217},"theming guidance for developers",{"type":23,"value":219},".",{"type":17,"tag":111,"props":221,"children":222},{},[],{"type":17,"tag":18,"props":224,"children":226},{"id":225},"rationale",[227],{"type":23,"value":228},"Rationale",{"type":17,"tag":26,"props":230,"children":231},{},[232,234,242],{"type":23,"value":233},"To enhance visual weight and aim to conform with ",{"type":17,"tag":206,"props":235,"children":239},{"href":236,"rel":237},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[238],"nofollow",[240],{"type":23,"value":241},"WCAG2.0 Criterion 1.4.1",{"type":23,"value":243},", Ripple callouts use:",{"type":17,"tag":32,"props":245,"children":246},{},[247,252,257],{"type":17,"tag":36,"props":248,"children":249},{},[250],{"type":23,"value":251},"a thick left-hand border",{"type":17,"tag":36,"props":253,"children":254},{},[255],{"type":23,"value":256},"background colours",{"type":17,"tag":36,"props":258,"children":259},{},[260],{"type":23,"value":261},"padding.",{"type":17,"tag":263,"props":264,"children":265},"blockquote",{},[266],{"type":17,"tag":26,"props":267,"children":268},{},[269],{"type":23,"value":270},"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)",{"title":8,"searchDepth":272,"depth":272,"links":273},2,[274,279,283,284],{"id":20,"depth":272,"text":24,"children":275},[276,278],{"id":64,"depth":277,"text":67},3,{"id":88,"depth":277,"text":91},{"id":116,"depth":272,"text":119,"children":280},[281,282],{"id":132,"depth":277,"text":142},{"id":153,"depth":277,"text":156},{"id":171,"depth":272,"text":174},{"id":225,"depth":272,"text":228},"markdown","content:design-system:5.components:callout.md","content","design-system/5.components/callout.md","md",{"/design-system/components/callout":291},[292,298],{"_path":293,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":294,"description":295,"layout":11,"label":12,"_type":285,"_id":296,"_source":287,"_file":297,"_extension":289},"/design-system/components/call-to-action","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","content:design-system:5.components:call-to-action.md","design-system/5.components/call-to-action.md",{"_path":299,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":300,"description":301,"layout":11,"label":12,"_type":285,"_id":302,"_source":287,"_file":303,"_extension":289},"/design-system/components/campaign-banner","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","content:design-system:5.components:campaign-banner.md","design-system/5.components/campaign-banner.md",{},[306,311,552],{"title":307,"_path":308,"icon":309,"layout":310},"Ripple Design System","/","carbon:home","home",{"title":312,"_path":313,"children":314},"Design System","/design-system",[315,331,347,376,410],{"title":316,"_path":317,"children":318},"About","/design-system/about",[319,322,325,328],{"title":320,"_path":321,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":323,"_path":324,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":326,"_path":327,"layout":11},"Support","/design-system/about/getting-support",{"title":329,"_path":330,"layout":11},"Contributing","/design-system/about/contributing",{"title":332,"_path":333,"children":334},"Design","/design-system/design",[335,338,341,344],{"title":336,"_path":337,"layout":11},"Getting started","/design-system/design/getting-started",{"title":339,"_path":340,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":342,"_path":343,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":345,"_path":346,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":348,"_path":349,"children":350},"Develop","/design-system/develop",[351,353,355,358],{"title":336,"_path":352,"layout":11},"/design-system/develop/getting-started",{"title":329,"_path":354,"layout":11},"/design-system/develop/contributing",{"title":356,"_path":357,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":359,"children":360,"layout":11},"/design-system/develop/usage",[361,364,367,370,373],{"title":362,"_path":363,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":365,"_path":366,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":368,"_path":369,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":371,"_path":372,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":374,"_path":375,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":377,"_path":378,"children":379},"Styles","/design-system/styles",[380,383,386,389,392,395,398,401,404,407],{"title":381,"_path":382,"layout":11},"Colour","/design-system/styles/colour",{"title":384,"_path":385,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":387,"_path":388,"layout":11},"Grid","/design-system/styles/grid",{"title":390,"_path":391,"layout":11},"Icons","/design-system/styles/icons",{"title":393,"_path":394,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":396,"_path":397,"layout":11},"Layout","/design-system/styles/layout",{"title":399,"_path":400,"layout":11},"Logo","/design-system/styles/logo",{"title":402,"_path":403,"layout":11},"Motion","/design-system/styles/motion",{"title":405,"_path":406,"layout":11},"Spacing","/design-system/styles/spacing",{"title":408,"_path":409,"layout":11},"Typography","/design-system/styles/typography",{"title":411,"_path":412,"children":413},"Components","/design-system/components",[414,417,420,423,426,429,432,433,434,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549],{"title":415,"_path":416,"layout":11},"Accordion","/design-system/components/accordion",{"title":418,"_path":419,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":421,"_path":422,"layout":11},"Alert","/design-system/components/alert",{"title":424,"_path":425,"layout":11},"Block quote","/design-system/components/block-quote",{"title":427,"_path":428,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":430,"_path":431,"layout":11},"Button","/design-system/components/button",{"title":294,"_path":293,"layout":11},{"title":9,"_path":5,"layout":11},{"title":300,"_path":299,"layout":11},{"title":436,"_path":437,"layout":11},"Card","/design-system/components/card",{"title":439,"_path":440,"layout":11},"Carousel","/design-system/components/carousel",{"title":442,"_path":443,"layout":11},"Category grid","/design-system/components/category-grid",{"title":445,"_path":446,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":448,"_path":449,"layout":11},"Chip","/design-system/components/chip",{"title":451,"_path":452,"layout":11},"Contact us","/design-system/components/contact-us",{"title":454,"_path":455,"layout":11},"Date input","/design-system/components/date-input",{"title":457,"_path":458,"layout":11},"Detail list","/design-system/components/detail-list",{"title":460,"_path":461,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":463,"_path":464,"layout":11},"File","/design-system/components/file",{"title":466,"_path":467,"layout":11},"Footer","/design-system/components/footer",{"title":469,"_path":470,"layout":11},"Form alert","/design-system/components/form-alert",{"title":472,"_path":473,"layout":11},"Form","/design-system/components/form",{"title":475,"_path":476,"layout":11},"Header","/design-system/components/header",{"title":478,"_path":479,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":481,"_path":482,"layout":11},"Input field","/design-system/components/input-field",{"title":484,"_path":485,"layout":11},"Key dates","/design-system/components/key-dates",{"title":487,"_path":488,"layout":11},"Media embed","/design-system/components/media-embed",{"title":490,"_path":491,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":493,"_path":494,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":496,"_path":497,"layout":11},"Media","/design-system/components/media",{"title":499,"_path":500,"layout":11},"Option button","/design-system/components/option-button",{"title":502,"_path":503,"layout":11},"Page action","/design-system/components/page-action",{"title":505,"_path":506,"layout":11},"Pagination","/design-system/components/pagination",{"title":508,"_path":509,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":511,"_path":512,"layout":11},"Profile","/design-system/components/profile",{"title":514,"_path":515,"layout":11},"Radio button","/design-system/components/radio-button",{"title":517,"_path":518,"layout":11},"Related links","/design-system/components/related-links",{"title":520,"_path":521,"layout":11},"Results listing","/design-system/components/results-listing",{"title":523,"_path":524,"layout":11},"Search bar","/design-system/components/search-bar",{"title":526,"_path":527,"layout":11},"Skip link","/design-system/components/skip-link",{"title":529,"_path":530,"layout":11},"Social share","/design-system/components/social-share",{"title":532,"_path":533,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":535,"_path":536,"layout":11},"Table","/design-system/components/table",{"title":538,"_path":539,"layout":11},"Tabs","/design-system/components/tabs",{"title":541,"_path":542,"layout":11},"Tag","/design-system/components/tag",{"title":544,"_path":545,"layout":11},"Text area","/design-system/components/text-area",{"title":547,"_path":548,"layout":11},"Timeline","/design-system/components/timeline",{"title":550,"_path":551,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":553,"_path":554,"children":555,"layout":11},"Ripple Framework","/framework",[556,557,575,597],{"title":553,"_path":554,"layout":11},{"title":558,"_path":559,"children":560},"Key Concepts","/framework/key-concepts",[561,563,566,569,572],{"title":368,"_path":562,"layout":11},"/framework/key-concepts/nuxt",{"title":564,"_path":565,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":567,"_path":568,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":570,"_path":571,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":573,"_path":574,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":576,"_path":577,"children":578},"Guides","/framework/guides",[579,582,585,588,591,594],{"title":580,"_path":581,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":583,"_path":584,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":586,"_path":587,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":589,"_path":590,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":592,"_path":593,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":595,"_path":596,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":598,"_path":599,"layout":11},"Core modules","/framework/core-modules",["Reactive",601],{"module-navigation":602},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/campaign-banner/index.html b/design-system/components/campaign-banner/index.html index 697f35350f..b7256bcd67 100644 --- a/design-system/components/campaign-banner/index.html +++ b/design-system/components/campaign-banner/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Campaign banner</h1><p class="rpl-type-p-large" data-v-3163c6df>The Campaign banner component draws a user's attention to promoted content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use campaign banners to promote content. They include a feature image and have an optional call to action.<!--]--></p><p><!--[-->The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button.<!--]--></p><p><!--[-->Campaign banners can be used at the top or bottom of a page, under the header or above the footer.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Promote a campaign or related page content.<!--]--></li><li><!--[-->Add an optional image.<!--]--></li><li><!--[-->Use with an optional call to action.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t use an unrelated image.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The campaign banner has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->featured, which appears at the top of the page, below the header<!--]--></li><li><!--[-->image inset, which appears at the bottom of the page above the footer.<!--]--></li><!--]--></ul><h3 id="featured"><a href="#featured"><!--[-->Featured<!--]--></a></h3><p><!--[-->A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header).<!--]--></p><p><!--[-->There is an option to include metadata for the image if required.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="image-inset"><a href="#image-inset"><!--[-->Image inset<!--]--></a></h3><p><!--[-->The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--secondary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--secondary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The campaign banner adopts its theming from the button component.<!--]--></p><p><!--[-->If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/campaign-banner.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/campaign-banner/_payload.json">[{"state":1,"_errors":528,"serverRendered":531,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":218,"$sdd-globals":232,"$sdd-navigation":233},{"/design-system/components/campaign-banner":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":213,"_id":214,"_source":215,"_file":216,"_extension":217},"/design-system/components/campaign-banner","components",false,"","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","page","Core",{"type":14,"children":15,"toc":200},"root",[16,25,31,36,41,46,53,73,79,92,96,102,107,120,126,131,136,139,145,150,154,157,163,168,173,180],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use campaign banners to promote content. They include a feature image and have an optional call to action.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Campaign banners can be used at the top or bottom of a page, under the header or above the footer.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-navigation-campaign-banner--primary-image",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Promote a campaign or related page content.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Add an optional image.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use with an optional call to action.",{"type":17,"tag":47,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":54,"props":80,"children":81},{},[82,87],{"type":17,"tag":58,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don’t overload with content.",{"type":17,"tag":58,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don’t use an unrelated image.",{"type":17,"tag":93,"props":94,"children":95},"hr",{},[],{"type":17,"tag":18,"props":97,"children":99},{"id":98},"variants",[100],{"type":23,"value":101},"Variants",{"type":17,"tag":26,"props":103,"children":104},{},[105],{"type":23,"value":106},"The campaign banner has 2 variants:",{"type":17,"tag":54,"props":108,"children":109},{},[110,115],{"type":17,"tag":58,"props":111,"children":112},{},[113],{"type":23,"value":114},"featured, which appears at the top of the page, below the header",{"type":17,"tag":58,"props":116,"children":117},{},[118],{"type":23,"value":119},"image inset, which appears at the bottom of the page above the footer.",{"type":17,"tag":47,"props":121,"children":123},{"id":122},"featured",[124],{"type":23,"value":125},"Featured",{"type":17,"tag":26,"props":127,"children":128},{},[129],{"type":23,"value":130},"A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header).",{"type":17,"tag":26,"props":132,"children":133},{},[134],{"type":23,"value":135},"There is an option to include metadata for the image if required.",{"type":17,"tag":42,"props":137,"children":138},{"id":44},[],{"type":17,"tag":47,"props":140,"children":142},{"id":141},"image-inset",[143],{"type":23,"value":144},"Image inset",{"type":17,"tag":26,"props":146,"children":147},{},[148],{"type":23,"value":149},"The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page.",{"type":17,"tag":42,"props":151,"children":153},{"id":152},"core-navigation-campaign-banner--secondary-image",[],{"type":17,"tag":93,"props":155,"children":156},{},[],{"type":17,"tag":18,"props":158,"children":160},{"id":159},"theming",[161],{"type":23,"value":162},"Theming",{"type":17,"tag":26,"props":164,"children":165},{},[166],{"type":23,"value":167},"The campaign banner adopts its theming from the button component.",{"type":17,"tag":26,"props":169,"children":170},{},[171],{"type":23,"value":172},"If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme.",{"type":17,"tag":174,"props":175,"children":176},"docs-theme-chooser",{},[177],{"type":17,"tag":42,"props":178,"children":179},{"id":44},[],{"type":17,"tag":26,"props":181,"children":182},{},[183,185,191,193,198],{"type":23,"value":184},"To create your own theme, see ",{"type":17,"tag":186,"props":187,"children":188},"a",{"href":8},[189],{"type":23,"value":190},"theming guidance for designers",{"type":23,"value":192}," or ",{"type":17,"tag":186,"props":194,"children":195},{"href":8},[196],{"type":23,"value":197},"theming guidance for developers",{"type":23,"value":199},".",{"title":8,"searchDepth":201,"depth":201,"links":202},2,[203,208,212],{"id":20,"depth":201,"text":24,"children":204},[205,207],{"id":49,"depth":206,"text":52},3,{"id":75,"depth":206,"text":78},{"id":98,"depth":201,"text":101,"children":209},[210,211],{"id":122,"depth":206,"text":125},{"id":141,"depth":206,"text":144},{"id":159,"depth":201,"text":162},"markdown","content:design-system:5.components:campaign-banner.md","content","design-system/5.components/campaign-banner.md","md",{"/design-system/components/campaign-banner":219},[220,226],{"_path":221,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":222,"description":223,"layout":11,"label":12,"_type":213,"_id":224,"_source":215,"_file":225,"_extension":217},"/design-system/components/callout","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","content:design-system:5.components:callout.md","design-system/5.components/callout.md",{"_path":227,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":228,"description":229,"layout":11,"label":12,"_type":213,"_id":230,"_source":215,"_file":231,"_extension":217},"/design-system/components/card","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","content:design-system:5.components:card.md","design-system/5.components/card.md",{},[234,239,480],{"title":235,"_path":236,"icon":237,"layout":238},"Ripple Design System","/","carbon:home","home",{"title":240,"_path":241,"children":242},"Design System","/design-system",[243,259,275,304,338],{"title":244,"_path":245,"children":246},"About","/design-system/about",[247,250,253,256],{"title":248,"_path":249,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":251,"_path":252,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":254,"_path":255,"layout":11},"Support","/design-system/about/getting-support",{"title":257,"_path":258,"layout":11},"Contributing","/design-system/about/contributing",{"title":260,"_path":261,"children":262},"Design","/design-system/design",[263,266,269,272],{"title":264,"_path":265,"layout":11},"Getting started","/design-system/design/getting-started",{"title":267,"_path":268,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":270,"_path":271,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":273,"_path":274,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":276,"_path":277,"children":278},"Develop","/design-system/develop",[279,281,283,286],{"title":264,"_path":280,"layout":11},"/design-system/develop/getting-started",{"title":257,"_path":282,"layout":11},"/design-system/develop/contributing",{"title":284,"_path":285,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":287,"children":288,"layout":11},"/design-system/develop/usage",[289,292,295,298,301],{"title":290,"_path":291,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":293,"_path":294,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":296,"_path":297,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":299,"_path":300,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":302,"_path":303,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":305,"_path":306,"children":307},"Styles","/design-system/styles",[308,311,314,317,320,323,326,329,332,335],{"title":309,"_path":310,"layout":11},"Colour","/design-system/styles/colour",{"title":312,"_path":313,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":315,"_path":316,"layout":11},"Grid","/design-system/styles/grid",{"title":318,"_path":319,"layout":11},"Icons","/design-system/styles/icons",{"title":321,"_path":322,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":324,"_path":325,"layout":11},"Layout","/design-system/styles/layout",{"title":327,"_path":328,"layout":11},"Logo","/design-system/styles/logo",{"title":330,"_path":331,"layout":11},"Motion","/design-system/styles/motion",{"title":333,"_path":334,"layout":11},"Spacing","/design-system/styles/spacing",{"title":336,"_path":337,"layout":11},"Typography","/design-system/styles/typography",{"title":339,"_path":340,"children":341},"Components","/design-system/components",[342,345,348,351,354,357,360,363,364,365,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477],{"title":343,"_path":344,"layout":11},"Accordion","/design-system/components/accordion",{"title":346,"_path":347,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":349,"_path":350,"layout":11},"Alert","/design-system/components/alert",{"title":352,"_path":353,"layout":11},"Block quote","/design-system/components/block-quote",{"title":355,"_path":356,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":358,"_path":359,"layout":11},"Button","/design-system/components/button",{"title":361,"_path":362,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":222,"_path":221,"layout":11},{"title":9,"_path":5,"layout":11},{"title":228,"_path":227,"layout":11},{"title":367,"_path":368,"layout":11},"Carousel","/design-system/components/carousel",{"title":370,"_path":371,"layout":11},"Category grid","/design-system/components/category-grid",{"title":373,"_path":374,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":376,"_path":377,"layout":11},"Chip","/design-system/components/chip",{"title":379,"_path":380,"layout":11},"Contact us","/design-system/components/contact-us",{"title":382,"_path":383,"layout":11},"Date input","/design-system/components/date-input",{"title":385,"_path":386,"layout":11},"Detail list","/design-system/components/detail-list",{"title":388,"_path":389,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":391,"_path":392,"layout":11},"File","/design-system/components/file",{"title":394,"_path":395,"layout":11},"Footer","/design-system/components/footer",{"title":397,"_path":398,"layout":11},"Form alert","/design-system/components/form-alert",{"title":400,"_path":401,"layout":11},"Form","/design-system/components/form",{"title":403,"_path":404,"layout":11},"Header","/design-system/components/header",{"title":406,"_path":407,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":409,"_path":410,"layout":11},"Input field","/design-system/components/input-field",{"title":412,"_path":413,"layout":11},"Key dates","/design-system/components/key-dates",{"title":415,"_path":416,"layout":11},"Media embed","/design-system/components/media-embed",{"title":418,"_path":419,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":421,"_path":422,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":424,"_path":425,"layout":11},"Media","/design-system/components/media",{"title":427,"_path":428,"layout":11},"Option button","/design-system/components/option-button",{"title":430,"_path":431,"layout":11},"Page action","/design-system/components/page-action",{"title":433,"_path":434,"layout":11},"Pagination","/design-system/components/pagination",{"title":436,"_path":437,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":439,"_path":440,"layout":11},"Profile","/design-system/components/profile",{"title":442,"_path":443,"layout":11},"Radio button","/design-system/components/radio-button",{"title":445,"_path":446,"layout":11},"Related links","/design-system/components/related-links",{"title":448,"_path":449,"layout":11},"Results listing","/design-system/components/results-listing",{"title":451,"_path":452,"layout":11},"Search bar","/design-system/components/search-bar",{"title":454,"_path":455,"layout":11},"Skip link","/design-system/components/skip-link",{"title":457,"_path":458,"layout":11},"Social share","/design-system/components/social-share",{"title":460,"_path":461,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":463,"_path":464,"layout":11},"Table","/design-system/components/table",{"title":466,"_path":467,"layout":11},"Tabs","/design-system/components/tabs",{"title":469,"_path":470,"layout":11},"Tag","/design-system/components/tag",{"title":472,"_path":473,"layout":11},"Text area","/design-system/components/text-area",{"title":475,"_path":476,"layout":11},"Timeline","/design-system/components/timeline",{"title":478,"_path":479,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":481,"_path":482,"children":483,"layout":11},"Ripple Framework","/framework",[484,485,503,525],{"title":481,"_path":482,"layout":11},{"title":486,"_path":487,"children":488},"Key Concepts","/framework/key-concepts",[489,491,494,497,500],{"title":296,"_path":490,"layout":11},"/framework/key-concepts/nuxt",{"title":492,"_path":493,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":495,"_path":496,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":498,"_path":499,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":501,"_path":502,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":504,"_path":505,"children":506},"Guides","/framework/guides",[507,510,513,516,519,522],{"title":508,"_path":509,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":511,"_path":512,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":514,"_path":515,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":517,"_path":518,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":520,"_path":521,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":523,"_path":524,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":526,"_path":527,"layout":11},"Core modules","/framework/core-modules",["Reactive",529],{"module-navigation":530},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Campaign banner</h1><p class="rpl-type-p-large" data-v-3163c6df>The Campaign banner component draws a user's attention to promoted content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use campaign banners to promote content. They include a feature image and have an optional call to action.<!--]--></p><p><!--[-->The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button.<!--]--></p><p><!--[-->Campaign banners can be used at the top or bottom of a page, under the header or above the footer.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Promote a campaign or related page content.<!--]--></li><li><!--[-->Add an optional image.<!--]--></li><li><!--[-->Use with an optional call to action.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t use an unrelated image.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The campaign banner has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->featured, which appears at the top of the page, below the header<!--]--></li><li><!--[-->image inset, which appears at the bottom of the page above the footer.<!--]--></li><!--]--></ul><h3 id="featured"><a href="#featured"><!--[-->Featured<!--]--></a></h3><p><!--[-->A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header).<!--]--></p><p><!--[-->There is an option to include metadata for the image if required.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="image-inset"><a href="#image-inset"><!--[-->Image inset<!--]--></a></h3><p><!--[-->The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--secondary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--secondary-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The campaign banner adopts its theming from the button component.<!--]--></p><p><!--[-->If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/campaign-banner.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/campaign-banner/_payload.json">[{"state":1,"_errors":528,"serverRendered":531,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":218,"$sdd-globals":232,"$sdd-navigation":233},{"/design-system/components/campaign-banner":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":213,"_id":214,"_source":215,"_file":216,"_extension":217},"/design-system/components/campaign-banner","components",false,"","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","page","Core",{"type":14,"children":15,"toc":200},"root",[16,25,31,36,41,46,53,73,79,92,96,102,107,120,126,131,136,139,145,150,154,157,163,168,173,180],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use campaign banners to promote content. They include a feature image and have an optional call to action.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Campaign banners can be used at the top or bottom of a page, under the header or above the footer.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-navigation-campaign-banner--primary-image",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Promote a campaign or related page content.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Add an optional image.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use with an optional call to action.",{"type":17,"tag":47,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":54,"props":80,"children":81},{},[82,87],{"type":17,"tag":58,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don’t overload with content.",{"type":17,"tag":58,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don’t use an unrelated image.",{"type":17,"tag":93,"props":94,"children":95},"hr",{},[],{"type":17,"tag":18,"props":97,"children":99},{"id":98},"variants",[100],{"type":23,"value":101},"Variants",{"type":17,"tag":26,"props":103,"children":104},{},[105],{"type":23,"value":106},"The campaign banner has 2 variants:",{"type":17,"tag":54,"props":108,"children":109},{},[110,115],{"type":17,"tag":58,"props":111,"children":112},{},[113],{"type":23,"value":114},"featured, which appears at the top of the page, below the header",{"type":17,"tag":58,"props":116,"children":117},{},[118],{"type":23,"value":119},"image inset, which appears at the bottom of the page above the footer.",{"type":17,"tag":47,"props":121,"children":123},{"id":122},"featured",[124],{"type":23,"value":125},"Featured",{"type":17,"tag":26,"props":127,"children":128},{},[129],{"type":23,"value":130},"A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header).",{"type":17,"tag":26,"props":132,"children":133},{},[134],{"type":23,"value":135},"There is an option to include metadata for the image if required.",{"type":17,"tag":42,"props":137,"children":138},{"id":44},[],{"type":17,"tag":47,"props":140,"children":142},{"id":141},"image-inset",[143],{"type":23,"value":144},"Image inset",{"type":17,"tag":26,"props":146,"children":147},{},[148],{"type":23,"value":149},"The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page.",{"type":17,"tag":42,"props":151,"children":153},{"id":152},"core-navigation-campaign-banner--secondary-image",[],{"type":17,"tag":93,"props":155,"children":156},{},[],{"type":17,"tag":18,"props":158,"children":160},{"id":159},"theming",[161],{"type":23,"value":162},"Theming",{"type":17,"tag":26,"props":164,"children":165},{},[166],{"type":23,"value":167},"The campaign banner adopts its theming from the button component.",{"type":17,"tag":26,"props":169,"children":170},{},[171],{"type":23,"value":172},"If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme.",{"type":17,"tag":174,"props":175,"children":176},"docs-theme-chooser",{},[177],{"type":17,"tag":42,"props":178,"children":179},{"id":44},[],{"type":17,"tag":26,"props":181,"children":182},{},[183,185,191,193,198],{"type":23,"value":184},"To create your own theme, see ",{"type":17,"tag":186,"props":187,"children":188},"a",{"href":8},[189],{"type":23,"value":190},"theming guidance for designers",{"type":23,"value":192}," or ",{"type":17,"tag":186,"props":194,"children":195},{"href":8},[196],{"type":23,"value":197},"theming guidance for developers",{"type":23,"value":199},".",{"title":8,"searchDepth":201,"depth":201,"links":202},2,[203,208,212],{"id":20,"depth":201,"text":24,"children":204},[205,207],{"id":49,"depth":206,"text":52},3,{"id":75,"depth":206,"text":78},{"id":98,"depth":201,"text":101,"children":209},[210,211],{"id":122,"depth":206,"text":125},{"id":141,"depth":206,"text":144},{"id":159,"depth":201,"text":162},"markdown","content:design-system:5.components:campaign-banner.md","content","design-system/5.components/campaign-banner.md","md",{"/design-system/components/campaign-banner":219},[220,226],{"_path":221,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":222,"description":223,"layout":11,"label":12,"_type":213,"_id":224,"_source":215,"_file":225,"_extension":217},"/design-system/components/callout","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","content:design-system:5.components:callout.md","design-system/5.components/callout.md",{"_path":227,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":228,"description":229,"layout":11,"label":12,"_type":213,"_id":230,"_source":215,"_file":231,"_extension":217},"/design-system/components/card","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","content:design-system:5.components:card.md","design-system/5.components/card.md",{},[234,239,480],{"title":235,"_path":236,"icon":237,"layout":238},"Ripple Design System","/","carbon:home","home",{"title":240,"_path":241,"children":242},"Design System","/design-system",[243,259,275,304,338],{"title":244,"_path":245,"children":246},"About","/design-system/about",[247,250,253,256],{"title":248,"_path":249,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":251,"_path":252,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":254,"_path":255,"layout":11},"Support","/design-system/about/getting-support",{"title":257,"_path":258,"layout":11},"Contributing","/design-system/about/contributing",{"title":260,"_path":261,"children":262},"Design","/design-system/design",[263,266,269,272],{"title":264,"_path":265,"layout":11},"Getting started","/design-system/design/getting-started",{"title":267,"_path":268,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":270,"_path":271,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":273,"_path":274,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":276,"_path":277,"children":278},"Develop","/design-system/develop",[279,281,283,286],{"title":264,"_path":280,"layout":11},"/design-system/develop/getting-started",{"title":257,"_path":282,"layout":11},"/design-system/develop/contributing",{"title":284,"_path":285,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":287,"children":288,"layout":11},"/design-system/develop/usage",[289,292,295,298,301],{"title":290,"_path":291,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":293,"_path":294,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":296,"_path":297,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":299,"_path":300,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":302,"_path":303,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":305,"_path":306,"children":307},"Styles","/design-system/styles",[308,311,314,317,320,323,326,329,332,335],{"title":309,"_path":310,"layout":11},"Colour","/design-system/styles/colour",{"title":312,"_path":313,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":315,"_path":316,"layout":11},"Grid","/design-system/styles/grid",{"title":318,"_path":319,"layout":11},"Icons","/design-system/styles/icons",{"title":321,"_path":322,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":324,"_path":325,"layout":11},"Layout","/design-system/styles/layout",{"title":327,"_path":328,"layout":11},"Logo","/design-system/styles/logo",{"title":330,"_path":331,"layout":11},"Motion","/design-system/styles/motion",{"title":333,"_path":334,"layout":11},"Spacing","/design-system/styles/spacing",{"title":336,"_path":337,"layout":11},"Typography","/design-system/styles/typography",{"title":339,"_path":340,"children":341},"Components","/design-system/components",[342,345,348,351,354,357,360,363,364,365,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477],{"title":343,"_path":344,"layout":11},"Accordion","/design-system/components/accordion",{"title":346,"_path":347,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":349,"_path":350,"layout":11},"Alert","/design-system/components/alert",{"title":352,"_path":353,"layout":11},"Block quote","/design-system/components/block-quote",{"title":355,"_path":356,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":358,"_path":359,"layout":11},"Button","/design-system/components/button",{"title":361,"_path":362,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":222,"_path":221,"layout":11},{"title":9,"_path":5,"layout":11},{"title":228,"_path":227,"layout":11},{"title":367,"_path":368,"layout":11},"Carousel","/design-system/components/carousel",{"title":370,"_path":371,"layout":11},"Category grid","/design-system/components/category-grid",{"title":373,"_path":374,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":376,"_path":377,"layout":11},"Chip","/design-system/components/chip",{"title":379,"_path":380,"layout":11},"Contact us","/design-system/components/contact-us",{"title":382,"_path":383,"layout":11},"Date input","/design-system/components/date-input",{"title":385,"_path":386,"layout":11},"Detail list","/design-system/components/detail-list",{"title":388,"_path":389,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":391,"_path":392,"layout":11},"File","/design-system/components/file",{"title":394,"_path":395,"layout":11},"Footer","/design-system/components/footer",{"title":397,"_path":398,"layout":11},"Form alert","/design-system/components/form-alert",{"title":400,"_path":401,"layout":11},"Form","/design-system/components/form",{"title":403,"_path":404,"layout":11},"Header","/design-system/components/header",{"title":406,"_path":407,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":409,"_path":410,"layout":11},"Input field","/design-system/components/input-field",{"title":412,"_path":413,"layout":11},"Key dates","/design-system/components/key-dates",{"title":415,"_path":416,"layout":11},"Media embed","/design-system/components/media-embed",{"title":418,"_path":419,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":421,"_path":422,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":424,"_path":425,"layout":11},"Media","/design-system/components/media",{"title":427,"_path":428,"layout":11},"Option button","/design-system/components/option-button",{"title":430,"_path":431,"layout":11},"Page action","/design-system/components/page-action",{"title":433,"_path":434,"layout":11},"Pagination","/design-system/components/pagination",{"title":436,"_path":437,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":439,"_path":440,"layout":11},"Profile","/design-system/components/profile",{"title":442,"_path":443,"layout":11},"Radio button","/design-system/components/radio-button",{"title":445,"_path":446,"layout":11},"Related links","/design-system/components/related-links",{"title":448,"_path":449,"layout":11},"Results listing","/design-system/components/results-listing",{"title":451,"_path":452,"layout":11},"Search bar","/design-system/components/search-bar",{"title":454,"_path":455,"layout":11},"Skip link","/design-system/components/skip-link",{"title":457,"_path":458,"layout":11},"Social share","/design-system/components/social-share",{"title":460,"_path":461,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":463,"_path":464,"layout":11},"Table","/design-system/components/table",{"title":466,"_path":467,"layout":11},"Tabs","/design-system/components/tabs",{"title":469,"_path":470,"layout":11},"Tag","/design-system/components/tag",{"title":472,"_path":473,"layout":11},"Text area","/design-system/components/text-area",{"title":475,"_path":476,"layout":11},"Timeline","/design-system/components/timeline",{"title":478,"_path":479,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":481,"_path":482,"children":483,"layout":11},"Ripple Framework","/framework",[484,485,503,525],{"title":481,"_path":482,"layout":11},{"title":486,"_path":487,"children":488},"Key Concepts","/framework/key-concepts",[489,491,494,497,500],{"title":296,"_path":490,"layout":11},"/framework/key-concepts/nuxt",{"title":492,"_path":493,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":495,"_path":496,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":498,"_path":499,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":501,"_path":502,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":504,"_path":505,"children":506},"Guides","/framework/guides",[507,510,513,516,519,522],{"title":508,"_path":509,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":511,"_path":512,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":514,"_path":515,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":517,"_path":518,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":520,"_path":521,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":523,"_path":524,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":526,"_path":527,"layout":11},"Core modules","/framework/core-modules",["Reactive",529],{"module-navigation":530},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/card/index.html b/design-system/components/card/index.html index 4125d06d5e..c2b57b9457 100644 --- a/design-system/components/card/index.html +++ b/design-system/components/card/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Card</h1><p class="rpl-type-p-large" data-v-3163c6df>The Card component shows content about another page, event or topic. They help users find relevant information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use cards to help users find the right information quickly.<!--]--></p><p><!--[-->They can combine a variety of content, including text, media and links.<!--]--></p><p><!--[-->Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns.<!--]--></p><p><!--[-->Ensure headings are direct and summaries are concise.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Cards can be made up of:<!--]--></p><ul><!--[--><li><!--[-->metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)<!--]--></li><li><!--[-->headline, to provide a snapshot of the content<!--]--></li><li><!--[-->summary, to provide further details<!--]--></li><li><!--[-->visual elements, to provide visual prominence.<!--]--></li><!--]--></ul><p><!--[-->You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs.<!--]--></p><h4 id="metadata"><a href="#metadata"><!--[-->Metadata<!--]--></a></h4><p><!--[-->All cards have optional metadata. Use metadata to display a combination of:<!--]--></p><ul><!--[--><li><!--[-->topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)<!--]--></li><li><!--[-->date - how old the content is, for when this information is important to the user<!--]--></li><li><!--[-->status - where a component or action is sitting within a process.<!--]--></li><!--]--></ul><h4 id="visual-elements"><a href="#visual-elements"><!--[-->Visual elements<!--]--></a></h4><p><!--[-->Visual elements in cards allow for different content to stand out. They can also provide additional context.<!--]--></p><p><!--[-->Elements that can provide visual prominence include:<!--]--></p><ul><!--[--><li><!--[-->an image<!--]--></li><li><!--[-->a highlight border<!--]--></li><li><!--[-->a blocked headline type.<!--]--></li><!--]--></ul><p><!--[-->Use visual elements carefully. Only use a visual element if it:<!--]--></p><ul><!--[--><li><!--[-->is meaningful to the user journey<!--]--></li><li><!--[-->supports what is already in the content<!--]--></li><li><!--[-->can help the user differentiate content from other content<!--]--></li><li><!--[-->can be easily identified<!--]--></li><li><!--[-->is informative and not only decorative.<!--]--></li><!--]--></ul><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Group together cards with similar content.<!--]--></li><li><!--[-->Use only a single style of card within a set of cards.<!--]--></li><li><!--[-->Keep the content clear and concise.<!--]--></li><li><!--[-->Only use one piece of information per card.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't mix different card variants in a group.<!--]--></li><li><!--[-->Never use a single card only.<!--]--></li><li><!--[-->Never repeat content in a group of cards.<!--]--></li><li><!--[-->Don't overload cards with content.<!--]--></li><li><!--[-->Don't include other interactive elements, like links, inside the card.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->A card has 2 main variants and is styled for its purpose.<!--]--></p><ul><!--[--><li><!--[-->Promotion Cards, which is used to highlight important content.<!--]--></li><li><!--[-->Navigation Cards, which is used for larger groups of content.<!--]--></li><!--]--></ul><h3 id="promotion-cards"><a href="#promotion-cards"><!--[-->Promotion cards<!--]--></a></h3><p><!--[-->Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites).<!--]--></p><p><!--[-->Promotion cards stack in a grid when used in a collection.<!--]--></p><p><!--[-->Promotion cards have 4 variants:<!--]--></p><ul><!--[--><li><!--[-->standard<!--]--></li><li><!--[-->highlight<!--]--></li><li><!--[-->image full bleed<!--]--></li><li><!--[-->avatar.<!--]--></li><!--]--></ul><h4 id="standard"><a href="#standard"><!--[-->Standard<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="highlight"><a href="#highlight"><!--[-->Highlight<!--]--></a></h4><p><!--[-->The highlight variant gives the card more visual prominence. Use this to guide users to the content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=graphicElement:Highlight&viewMode=story&globals=theme:docsTheme2;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=graphicElement:Highlight&viewMode=story&globals=theme:docsTheme2;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="image-full-bleed"><a href="#image-full-bleed"><!--[-->Image full bleed<!--]--></a></h4><p><!--[-->The image full bleed variant gives the option to add a relevant image to grab the user’s attention.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="avatar"><a href="#avatar"><!--[-->Avatar<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--avatar&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--avatar&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="navigation-cards"><a href="#navigation-cards"><!--[-->Navigation cards<!--]--></a></h3><p><!--[-->Navigation cards are useful for displaying and breaking down large groups of content options.<!--]--></p><p><!--[-->On landing pages, they are used to highlight all the different sections of that site.<!--]--></p><p><!--[-->Navigation cards fill the full width of the content area. They will always stack vertically.<!--]--></p><p><!--[-->There are 3 variants of navigation cards:<!--]--></p><ul><!--[--><li><!--[-->standard<!--]--></li><li><!--[-->image inset<!--]--></li><li><!--[-->heading highlight.<!--]--></li><!--]--></ul><h4 id="standard-1"><a href="#standard-1"><!--[-->Standard<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--nav&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="image-inset"><a href="#image-inset"><!--[-->Image inset<!--]--></a></h4><p><!--[-->A related image can increase a card's visual prominence.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--nav&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="heading-highlight"><a href="#heading-highlight"><!--[-->Heading highlight<!--]--></a></h4><p><!--[-->To draw attention to the heading and highlight the content, use a heading highlight.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--nav&args=graphicElement:Heading+highlighted&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&args=graphicElement:Heading+highlighted&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Cards use colour for:<!--]--></p><ul><!--[--><li><!--[-->interaction states<!--]--></li><li><!--[-->adding visual prominence to some elements.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=graphicElement:Highlight&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=graphicElement:Highlight&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--nav&args=graphicElement:Heading+highlighted&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&args=graphicElement:Heading+highlighted&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/card.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/card/_payload.json">[{"state":1,"_errors":840,"serverRendered":843,"path":844,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":530,"$sdd-globals":544,"$sdd-navigation":545},{"/design-system/components/card":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":525,"_id":526,"_source":527,"_file":528,"_extension":529},"/design-system/components/card","components",false,"","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","page","Core",{"type":14,"children":15,"toc":511},"root",[16,25,31,36,41,46,52,59,64,89,94,101,106,124,130,135,140,158,163,191,197,220,226,254,258,264,269,282,288,293,298,303,326,331,334,339,344,349,355,360,363,369,373,379,384,389,394,399,416,421,425,431,436,439,445,450,454,457,463,468,481,491],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use cards to help users find the right information quickly.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"They can combine a variety of content, including text, media and links.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Ensure headings are direct and summaries are concise.",{"type":17,"tag":47,"props":48,"children":51},"docs-example",{"id":49,"argsString":50},"core-navigation-card--promo","graphicElement:None",[],{"type":17,"tag":53,"props":54,"children":56},"h3",{"id":55},"how-this-component-works",[57],{"type":23,"value":58},"How this component works",{"type":17,"tag":26,"props":60,"children":61},{},[62],{"type":23,"value":63},"Cards can be made up of:",{"type":17,"tag":65,"props":66,"children":67},"ul",{},[68,74,79,84],{"type":17,"tag":69,"props":70,"children":71},"li",{},[72],{"type":23,"value":73},"metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)",{"type":17,"tag":69,"props":75,"children":76},{},[77],{"type":23,"value":78},"headline, to provide a snapshot of the content",{"type":17,"tag":69,"props":80,"children":81},{},[82],{"type":23,"value":83},"summary, to provide further details",{"type":17,"tag":69,"props":85,"children":86},{},[87],{"type":23,"value":88},"visual elements, to provide visual prominence.",{"type":17,"tag":26,"props":90,"children":91},{},[92],{"type":23,"value":93},"You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs.",{"type":17,"tag":95,"props":96,"children":98},"h4",{"id":97},"metadata",[99],{"type":23,"value":100},"Metadata",{"type":17,"tag":26,"props":102,"children":103},{},[104],{"type":23,"value":105},"All cards have optional metadata. Use metadata to display a combination of:",{"type":17,"tag":65,"props":107,"children":108},{},[109,114,119],{"type":17,"tag":69,"props":110,"children":111},{},[112],{"type":23,"value":113},"topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)",{"type":17,"tag":69,"props":115,"children":116},{},[117],{"type":23,"value":118},"date - how old the content is, for when this information is important to the user",{"type":17,"tag":69,"props":120,"children":121},{},[122],{"type":23,"value":123},"status - where a component or action is sitting within a process.",{"type":17,"tag":95,"props":125,"children":127},{"id":126},"visual-elements",[128],{"type":23,"value":129},"Visual elements",{"type":17,"tag":26,"props":131,"children":132},{},[133],{"type":23,"value":134},"Visual elements in cards allow for different content to stand out. They can also provide additional context.",{"type":17,"tag":26,"props":136,"children":137},{},[138],{"type":23,"value":139},"Elements that can provide visual prominence include:",{"type":17,"tag":65,"props":141,"children":142},{},[143,148,153],{"type":17,"tag":69,"props":144,"children":145},{},[146],{"type":23,"value":147},"an image",{"type":17,"tag":69,"props":149,"children":150},{},[151],{"type":23,"value":152},"a highlight border",{"type":17,"tag":69,"props":154,"children":155},{},[156],{"type":23,"value":157},"a blocked headline type.",{"type":17,"tag":26,"props":159,"children":160},{},[161],{"type":23,"value":162},"Use visual elements carefully. Only use a visual element if it:",{"type":17,"tag":65,"props":164,"children":165},{},[166,171,176,181,186],{"type":17,"tag":69,"props":167,"children":168},{},[169],{"type":23,"value":170},"is meaningful to the user journey",{"type":17,"tag":69,"props":172,"children":173},{},[174],{"type":23,"value":175},"supports what is already in the content",{"type":17,"tag":69,"props":177,"children":178},{},[179],{"type":23,"value":180},"can help the user differentiate content from other content",{"type":17,"tag":69,"props":182,"children":183},{},[184],{"type":23,"value":185},"can be easily identified",{"type":17,"tag":69,"props":187,"children":188},{},[189],{"type":23,"value":190},"is informative and not only decorative.",{"type":17,"tag":53,"props":192,"children":194},{"id":193},"when-and-how-to-use",[195],{"type":23,"value":196},"When and how to use",{"type":17,"tag":65,"props":198,"children":199},{},[200,205,210,215],{"type":17,"tag":69,"props":201,"children":202},{},[203],{"type":23,"value":204},"Group together cards with similar content.",{"type":17,"tag":69,"props":206,"children":207},{},[208],{"type":23,"value":209},"Use only a single style of card within a set of cards.",{"type":17,"tag":69,"props":211,"children":212},{},[213],{"type":23,"value":214},"Keep the content clear and concise.",{"type":17,"tag":69,"props":216,"children":217},{},[218],{"type":23,"value":219},"Only use one piece of information per card.",{"type":17,"tag":53,"props":221,"children":223},{"id":222},"when-and-how-not-to-use",[224],{"type":23,"value":225},"When and how not to use",{"type":17,"tag":65,"props":227,"children":228},{},[229,234,239,244,249],{"type":17,"tag":69,"props":230,"children":231},{},[232],{"type":23,"value":233},"Don't mix different card variants in a group.",{"type":17,"tag":69,"props":235,"children":236},{},[237],{"type":23,"value":238},"Never use a single card only.",{"type":17,"tag":69,"props":240,"children":241},{},[242],{"type":23,"value":243},"Never repeat content in a group of cards.",{"type":17,"tag":69,"props":245,"children":246},{},[247],{"type":23,"value":248},"Don't overload cards with content.",{"type":17,"tag":69,"props":250,"children":251},{},[252],{"type":23,"value":253},"Don't include other interactive elements, like links, inside the card.",{"type":17,"tag":255,"props":256,"children":257},"hr",{},[],{"type":17,"tag":18,"props":259,"children":261},{"id":260},"variants",[262],{"type":23,"value":263},"Variants",{"type":17,"tag":26,"props":265,"children":266},{},[267],{"type":23,"value":268},"A card has 2 main variants and is styled for its purpose.",{"type":17,"tag":65,"props":270,"children":271},{},[272,277],{"type":17,"tag":69,"props":273,"children":274},{},[275],{"type":23,"value":276},"Promotion Cards, which is used to highlight important content.",{"type":17,"tag":69,"props":278,"children":279},{},[280],{"type":23,"value":281},"Navigation Cards, which is used for larger groups of content.",{"type":17,"tag":53,"props":283,"children":285},{"id":284},"promotion-cards",[286],{"type":23,"value":287},"Promotion cards",{"type":17,"tag":26,"props":289,"children":290},{},[291],{"type":23,"value":292},"Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites).",{"type":17,"tag":26,"props":294,"children":295},{},[296],{"type":23,"value":297},"Promotion cards stack in a grid when used in a collection.",{"type":17,"tag":26,"props":299,"children":300},{},[301],{"type":23,"value":302},"Promotion cards have 4 variants:",{"type":17,"tag":65,"props":304,"children":305},{},[306,311,316,321],{"type":17,"tag":69,"props":307,"children":308},{},[309],{"type":23,"value":310},"standard",{"type":17,"tag":69,"props":312,"children":313},{},[314],{"type":23,"value":315},"highlight",{"type":17,"tag":69,"props":317,"children":318},{},[319],{"type":23,"value":320},"image full bleed",{"type":17,"tag":69,"props":322,"children":323},{},[324],{"type":23,"value":325},"avatar.",{"type":17,"tag":95,"props":327,"children":328},{"id":310},[329],{"type":23,"value":330},"Standard",{"type":17,"tag":47,"props":332,"children":333},{"id":49,"argsString":50},[],{"type":17,"tag":95,"props":335,"children":336},{"id":315},[337],{"type":23,"value":338},"Highlight",{"type":17,"tag":26,"props":340,"children":341},{},[342],{"type":23,"value":343},"The highlight variant gives the card more visual prominence. Use this to guide users to the content.",{"type":17,"tag":47,"props":345,"children":348},{"id":49,"argsString":346,"theme":347},"graphicElement:Highlight","docsTheme2",[],{"type":17,"tag":95,"props":350,"children":352},{"id":351},"image-full-bleed",[353],{"type":23,"value":354},"Image full bleed",{"type":17,"tag":26,"props":356,"children":357},{},[358],{"type":23,"value":359},"The image full bleed variant gives the option to add a relevant image to grab the user’s attention.",{"type":17,"tag":47,"props":361,"children":362},{"id":49},[],{"type":17,"tag":95,"props":364,"children":366},{"id":365},"avatar",[367],{"type":23,"value":368},"Avatar",{"type":17,"tag":47,"props":370,"children":372},{"id":371},"core-navigation-card--avatar",[],{"type":17,"tag":53,"props":374,"children":376},{"id":375},"navigation-cards",[377],{"type":23,"value":378},"Navigation cards",{"type":17,"tag":26,"props":380,"children":381},{},[382],{"type":23,"value":383},"Navigation cards are useful for displaying and breaking down large groups of content options.",{"type":17,"tag":26,"props":385,"children":386},{},[387],{"type":23,"value":388},"On landing pages, they are used to highlight all the different sections of that site.",{"type":17,"tag":26,"props":390,"children":391},{},[392],{"type":23,"value":393},"Navigation cards fill the full width of the content area. They will always stack vertically.",{"type":17,"tag":26,"props":395,"children":396},{},[397],{"type":23,"value":398},"There are 3 variants of navigation cards:",{"type":17,"tag":65,"props":400,"children":401},{},[402,406,411],{"type":17,"tag":69,"props":403,"children":404},{},[405],{"type":23,"value":310},{"type":17,"tag":69,"props":407,"children":408},{},[409],{"type":23,"value":410},"image inset",{"type":17,"tag":69,"props":412,"children":413},{},[414],{"type":23,"value":415},"heading highlight.",{"type":17,"tag":95,"props":417,"children":419},{"id":418},"standard-1",[420],{"type":23,"value":330},{"type":17,"tag":47,"props":422,"children":424},{"id":423,"argsString":50},"core-navigation-card--nav",[],{"type":17,"tag":95,"props":426,"children":428},{"id":427},"image-inset",[429],{"type":23,"value":430},"Image inset",{"type":17,"tag":26,"props":432,"children":433},{},[434],{"type":23,"value":435},"A related image can increase a card's visual prominence.",{"type":17,"tag":47,"props":437,"children":438},{"id":423},[],{"type":17,"tag":95,"props":440,"children":442},{"id":441},"heading-highlight",[443],{"type":23,"value":444},"Heading highlight",{"type":17,"tag":26,"props":446,"children":447},{},[448],{"type":23,"value":449},"To draw attention to the heading and highlight the content, use a heading highlight.",{"type":17,"tag":47,"props":451,"children":453},{"id":423,"argsString":452},"graphicElement:Heading+highlighted",[],{"type":17,"tag":255,"props":455,"children":456},{},[],{"type":17,"tag":18,"props":458,"children":460},{"id":459},"theming",[461],{"type":23,"value":462},"Theming",{"type":17,"tag":26,"props":464,"children":465},{},[466],{"type":23,"value":467},"Cards use colour for:",{"type":17,"tag":65,"props":469,"children":470},{},[471,476],{"type":17,"tag":69,"props":472,"children":473},{},[474],{"type":23,"value":475},"interaction states",{"type":17,"tag":69,"props":477,"children":478},{},[479],{"type":23,"value":480},"adding visual prominence to some elements.",{"type":17,"tag":482,"props":483,"children":484},"docs-theme-chooser",{},[485,488],{"type":17,"tag":47,"props":486,"children":487},{"id":49,"argsString":346},[],{"type":17,"tag":47,"props":489,"children":490},{"id":423,"argsString":452},[],{"type":17,"tag":26,"props":492,"children":493},{},[494,496,502,504,509],{"type":23,"value":495},"To create your own theme, see ",{"type":17,"tag":497,"props":498,"children":499},"a",{"href":8},[500],{"type":23,"value":501},"theming guidance for designers",{"type":23,"value":503}," or ",{"type":17,"tag":497,"props":505,"children":506},{"href":8},[507],{"type":23,"value":508},"theming guidance for developers",{"type":23,"value":510},".",{"title":8,"searchDepth":512,"depth":512,"links":513},2,[514,520,524],{"id":20,"depth":512,"text":24,"children":515},[516,518,519],{"id":55,"depth":517,"text":58},3,{"id":193,"depth":517,"text":196},{"id":222,"depth":517,"text":225},{"id":260,"depth":512,"text":263,"children":521},[522,523],{"id":284,"depth":517,"text":287},{"id":375,"depth":517,"text":378},{"id":459,"depth":512,"text":462},"markdown","content:design-system:5.components:card.md","content","design-system/5.components/card.md","md",{"/design-system/components/card":531},[532,538],{"_path":533,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":534,"description":535,"layout":11,"label":12,"_type":525,"_id":536,"_source":527,"_file":537,"_extension":529},"/design-system/components/campaign-banner","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","content:design-system:5.components:campaign-banner.md","design-system/5.components/campaign-banner.md",{"_path":539,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":540,"description":541,"layout":11,"label":12,"_type":525,"_id":542,"_source":527,"_file":543,"_extension":529},"/design-system/components/carousel","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","content:design-system:5.components:carousel.md","design-system/5.components/carousel.md",{},[546,551,792],{"title":547,"_path":548,"icon":549,"layout":550},"Ripple Design System","/","carbon:home","home",{"title":552,"_path":553,"children":554},"Design System","/design-system",[555,571,587,616,650],{"title":556,"_path":557,"children":558},"About","/design-system/about",[559,562,565,568],{"title":560,"_path":561,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":563,"_path":564,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":566,"_path":567,"layout":11},"Support","/design-system/about/getting-support",{"title":569,"_path":570,"layout":11},"Contributing","/design-system/about/contributing",{"title":572,"_path":573,"children":574},"Design","/design-system/design",[575,578,581,584],{"title":576,"_path":577,"layout":11},"Getting started","/design-system/design/getting-started",{"title":579,"_path":580,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":582,"_path":583,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":585,"_path":586,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":588,"_path":589,"children":590},"Develop","/design-system/develop",[591,593,595,598],{"title":576,"_path":592,"layout":11},"/design-system/develop/getting-started",{"title":569,"_path":594,"layout":11},"/design-system/develop/contributing",{"title":596,"_path":597,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":599,"children":600,"layout":11},"/design-system/develop/usage",[601,604,607,610,613],{"title":602,"_path":603,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":605,"_path":606,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":608,"_path":609,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":611,"_path":612,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":614,"_path":615,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":617,"_path":618,"children":619},"Styles","/design-system/styles",[620,623,626,629,632,635,638,641,644,647],{"title":621,"_path":622,"layout":11},"Colour","/design-system/styles/colour",{"title":624,"_path":625,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":627,"_path":628,"layout":11},"Grid","/design-system/styles/grid",{"title":630,"_path":631,"layout":11},"Icons","/design-system/styles/icons",{"title":633,"_path":634,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":636,"_path":637,"layout":11},"Layout","/design-system/styles/layout",{"title":639,"_path":640,"layout":11},"Logo","/design-system/styles/logo",{"title":642,"_path":643,"layout":11},"Motion","/design-system/styles/motion",{"title":645,"_path":646,"layout":11},"Spacing","/design-system/styles/spacing",{"title":648,"_path":649,"layout":11},"Typography","/design-system/styles/typography",{"title":651,"_path":652,"children":653},"Components","/design-system/components",[654,657,660,663,666,669,672,675,678,679,680,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,789],{"title":655,"_path":656,"layout":11},"Accordion","/design-system/components/accordion",{"title":658,"_path":659,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":661,"_path":662,"layout":11},"Alert","/design-system/components/alert",{"title":664,"_path":665,"layout":11},"Block quote","/design-system/components/block-quote",{"title":667,"_path":668,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":670,"_path":671,"layout":11},"Button","/design-system/components/button",{"title":673,"_path":674,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":676,"_path":677,"layout":11},"Callout","/design-system/components/callout",{"title":534,"_path":533,"layout":11},{"title":9,"_path":5,"layout":11},{"title":540,"_path":539,"layout":11},{"title":682,"_path":683,"layout":11},"Category grid","/design-system/components/category-grid",{"title":685,"_path":686,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":688,"_path":689,"layout":11},"Chip","/design-system/components/chip",{"title":691,"_path":692,"layout":11},"Contact us","/design-system/components/contact-us",{"title":694,"_path":695,"layout":11},"Date input","/design-system/components/date-input",{"title":697,"_path":698,"layout":11},"Detail list","/design-system/components/detail-list",{"title":700,"_path":701,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":703,"_path":704,"layout":11},"File","/design-system/components/file",{"title":706,"_path":707,"layout":11},"Footer","/design-system/components/footer",{"title":709,"_path":710,"layout":11},"Form alert","/design-system/components/form-alert",{"title":712,"_path":713,"layout":11},"Form","/design-system/components/form",{"title":715,"_path":716,"layout":11},"Header","/design-system/components/header",{"title":718,"_path":719,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":721,"_path":722,"layout":11},"Input field","/design-system/components/input-field",{"title":724,"_path":725,"layout":11},"Key dates","/design-system/components/key-dates",{"title":727,"_path":728,"layout":11},"Media embed","/design-system/components/media-embed",{"title":730,"_path":731,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":733,"_path":734,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":736,"_path":737,"layout":11},"Media","/design-system/components/media",{"title":739,"_path":740,"layout":11},"Option button","/design-system/components/option-button",{"title":742,"_path":743,"layout":11},"Page action","/design-system/components/page-action",{"title":745,"_path":746,"layout":11},"Pagination","/design-system/components/pagination",{"title":748,"_path":749,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":751,"_path":752,"layout":11},"Profile","/design-system/components/profile",{"title":754,"_path":755,"layout":11},"Radio button","/design-system/components/radio-button",{"title":757,"_path":758,"layout":11},"Related links","/design-system/components/related-links",{"title":760,"_path":761,"layout":11},"Results listing","/design-system/components/results-listing",{"title":763,"_path":764,"layout":11},"Search bar","/design-system/components/search-bar",{"title":766,"_path":767,"layout":11},"Skip link","/design-system/components/skip-link",{"title":769,"_path":770,"layout":11},"Social share","/design-system/components/social-share",{"title":772,"_path":773,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":775,"_path":776,"layout":11},"Table","/design-system/components/table",{"title":778,"_path":779,"layout":11},"Tabs","/design-system/components/tabs",{"title":781,"_path":782,"layout":11},"Tag","/design-system/components/tag",{"title":784,"_path":785,"layout":11},"Text area","/design-system/components/text-area",{"title":787,"_path":788,"layout":11},"Timeline","/design-system/components/timeline",{"title":790,"_path":791,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":793,"_path":794,"children":795,"layout":11},"Ripple Framework","/framework",[796,797,815,837],{"title":793,"_path":794,"layout":11},{"title":798,"_path":799,"children":800},"Key Concepts","/framework/key-concepts",[801,803,806,809,812],{"title":608,"_path":802,"layout":11},"/framework/key-concepts/nuxt",{"title":804,"_path":805,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":807,"_path":808,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":810,"_path":811,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":813,"_path":814,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":816,"_path":817,"children":818},"Guides","/framework/guides",[819,822,825,828,831,834],{"title":820,"_path":821,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":823,"_path":824,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":826,"_path":827,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":829,"_path":830,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":832,"_path":833,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":835,"_path":836,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":838,"_path":839,"layout":11},"Core modules","/framework/core-modules",["Reactive",841],{"module-navigation":842},null,true,"/design-system/components/card/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Card</h1><p class="rpl-type-p-large" data-v-3163c6df>The Card component shows content about another page, event or topic. They help users find relevant information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use cards to help users find the right information quickly.<!--]--></p><p><!--[-->They can combine a variety of content, including text, media and links.<!--]--></p><p><!--[-->Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns.<!--]--></p><p><!--[-->Ensure headings are direct and summaries are concise.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Cards can be made up of:<!--]--></p><ul><!--[--><li><!--[-->metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)<!--]--></li><li><!--[-->headline, to provide a snapshot of the content<!--]--></li><li><!--[-->summary, to provide further details<!--]--></li><li><!--[-->visual elements, to provide visual prominence.<!--]--></li><!--]--></ul><p><!--[-->You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs.<!--]--></p><h4 id="metadata"><a href="#metadata"><!--[-->Metadata<!--]--></a></h4><p><!--[-->All cards have optional metadata. Use metadata to display a combination of:<!--]--></p><ul><!--[--><li><!--[-->topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)<!--]--></li><li><!--[-->date - how old the content is, for when this information is important to the user<!--]--></li><li><!--[-->status - where a component or action is sitting within a process.<!--]--></li><!--]--></ul><h4 id="visual-elements"><a href="#visual-elements"><!--[-->Visual elements<!--]--></a></h4><p><!--[-->Visual elements in cards allow for different content to stand out. They can also provide additional context.<!--]--></p><p><!--[-->Elements that can provide visual prominence include:<!--]--></p><ul><!--[--><li><!--[-->an image<!--]--></li><li><!--[-->a highlight border<!--]--></li><li><!--[-->a blocked headline type.<!--]--></li><!--]--></ul><p><!--[-->Use visual elements carefully. Only use a visual element if it:<!--]--></p><ul><!--[--><li><!--[-->is meaningful to the user journey<!--]--></li><li><!--[-->supports what is already in the content<!--]--></li><li><!--[-->can help the user differentiate content from other content<!--]--></li><li><!--[-->can be easily identified<!--]--></li><li><!--[-->is informative and not only decorative.<!--]--></li><!--]--></ul><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Group together cards with similar content.<!--]--></li><li><!--[-->Use only a single style of card within a set of cards.<!--]--></li><li><!--[-->Keep the content clear and concise.<!--]--></li><li><!--[-->Only use one piece of information per card.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't mix different card variants in a group.<!--]--></li><li><!--[-->Never use a single card only.<!--]--></li><li><!--[-->Never repeat content in a group of cards.<!--]--></li><li><!--[-->Don't overload cards with content.<!--]--></li><li><!--[-->Don't include other interactive elements, like links, inside the card.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->A card has 2 main variants and is styled for its purpose.<!--]--></p><ul><!--[--><li><!--[-->Promotion Cards, which is used to highlight important content.<!--]--></li><li><!--[-->Navigation Cards, which is used for larger groups of content.<!--]--></li><!--]--></ul><h3 id="promotion-cards"><a href="#promotion-cards"><!--[-->Promotion cards<!--]--></a></h3><p><!--[-->Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites).<!--]--></p><p><!--[-->Promotion cards stack in a grid when used in a collection.<!--]--></p><p><!--[-->Promotion cards have 4 variants:<!--]--></p><ul><!--[--><li><!--[-->standard<!--]--></li><li><!--[-->highlight<!--]--></li><li><!--[-->image full bleed<!--]--></li><li><!--[-->avatar.<!--]--></li><!--]--></ul><h4 id="standard"><a href="#standard"><!--[-->Standard<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="highlight"><a href="#highlight"><!--[-->Highlight<!--]--></a></h4><p><!--[-->The highlight variant gives the card more visual prominence. Use this to guide users to the content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=graphicElement:Highlight&viewMode=story&globals=theme:docsTheme2;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=graphicElement:Highlight&viewMode=story&globals=theme:docsTheme2;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="image-full-bleed"><a href="#image-full-bleed"><!--[-->Image full bleed<!--]--></a></h4><p><!--[-->The image full bleed variant gives the option to add a relevant image to grab the user’s attention.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="avatar"><a href="#avatar"><!--[-->Avatar<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--avatar&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--avatar&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="navigation-cards"><a href="#navigation-cards"><!--[-->Navigation cards<!--]--></a></h3><p><!--[-->Navigation cards are useful for displaying and breaking down large groups of content options.<!--]--></p><p><!--[-->On landing pages, they are used to highlight all the different sections of that site.<!--]--></p><p><!--[-->Navigation cards fill the full width of the content area. They will always stack vertically.<!--]--></p><p><!--[-->There are 3 variants of navigation cards:<!--]--></p><ul><!--[--><li><!--[-->standard<!--]--></li><li><!--[-->image inset<!--]--></li><li><!--[-->heading highlight.<!--]--></li><!--]--></ul><h4 id="standard-1"><a href="#standard-1"><!--[-->Standard<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--nav&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&args=graphicElement:None&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="image-inset"><a href="#image-inset"><!--[-->Image inset<!--]--></a></h4><p><!--[-->A related image can increase a card's visual prominence.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--nav&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="heading-highlight"><a href="#heading-highlight"><!--[-->Heading highlight<!--]--></a></h4><p><!--[-->To draw attention to the heading and highlight the content, use a heading highlight.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--nav&args=graphicElement:Heading+highlighted&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&args=graphicElement:Heading+highlighted&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Cards use colour for:<!--]--></p><ul><!--[--><li><!--[-->interaction states<!--]--></li><li><!--[-->adding visual prominence to some elements.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--promo&args=graphicElement:Highlight&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&args=graphicElement:Highlight&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--nav&args=graphicElement:Heading+highlighted&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&args=graphicElement:Heading+highlighted&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/card.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/card/_payload.json">[{"state":1,"_errors":840,"serverRendered":843,"path":844,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":530,"$sdd-globals":544,"$sdd-navigation":545},{"/design-system/components/card":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":525,"_id":526,"_source":527,"_file":528,"_extension":529},"/design-system/components/card","components",false,"","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","page","Core",{"type":14,"children":15,"toc":511},"root",[16,25,31,36,41,46,52,59,64,89,94,101,106,124,130,135,140,158,163,191,197,220,226,254,258,264,269,282,288,293,298,303,326,331,334,339,344,349,355,360,363,369,373,379,384,389,394,399,416,421,425,431,436,439,445,450,454,457,463,468,481,491],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use cards to help users find the right information quickly.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"They can combine a variety of content, including text, media and links.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Ensure headings are direct and summaries are concise.",{"type":17,"tag":47,"props":48,"children":51},"docs-example",{"id":49,"argsString":50},"core-navigation-card--promo","graphicElement:None",[],{"type":17,"tag":53,"props":54,"children":56},"h3",{"id":55},"how-this-component-works",[57],{"type":23,"value":58},"How this component works",{"type":17,"tag":26,"props":60,"children":61},{},[62],{"type":23,"value":63},"Cards can be made up of:",{"type":17,"tag":65,"props":66,"children":67},"ul",{},[68,74,79,84],{"type":17,"tag":69,"props":70,"children":71},"li",{},[72],{"type":23,"value":73},"metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)",{"type":17,"tag":69,"props":75,"children":76},{},[77],{"type":23,"value":78},"headline, to provide a snapshot of the content",{"type":17,"tag":69,"props":80,"children":81},{},[82],{"type":23,"value":83},"summary, to provide further details",{"type":17,"tag":69,"props":85,"children":86},{},[87],{"type":23,"value":88},"visual elements, to provide visual prominence.",{"type":17,"tag":26,"props":90,"children":91},{},[92],{"type":23,"value":93},"You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs.",{"type":17,"tag":95,"props":96,"children":98},"h4",{"id":97},"metadata",[99],{"type":23,"value":100},"Metadata",{"type":17,"tag":26,"props":102,"children":103},{},[104],{"type":23,"value":105},"All cards have optional metadata. Use metadata to display a combination of:",{"type":17,"tag":65,"props":107,"children":108},{},[109,114,119],{"type":17,"tag":69,"props":110,"children":111},{},[112],{"type":23,"value":113},"topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)",{"type":17,"tag":69,"props":115,"children":116},{},[117],{"type":23,"value":118},"date - how old the content is, for when this information is important to the user",{"type":17,"tag":69,"props":120,"children":121},{},[122],{"type":23,"value":123},"status - where a component or action is sitting within a process.",{"type":17,"tag":95,"props":125,"children":127},{"id":126},"visual-elements",[128],{"type":23,"value":129},"Visual elements",{"type":17,"tag":26,"props":131,"children":132},{},[133],{"type":23,"value":134},"Visual elements in cards allow for different content to stand out. They can also provide additional context.",{"type":17,"tag":26,"props":136,"children":137},{},[138],{"type":23,"value":139},"Elements that can provide visual prominence include:",{"type":17,"tag":65,"props":141,"children":142},{},[143,148,153],{"type":17,"tag":69,"props":144,"children":145},{},[146],{"type":23,"value":147},"an image",{"type":17,"tag":69,"props":149,"children":150},{},[151],{"type":23,"value":152},"a highlight border",{"type":17,"tag":69,"props":154,"children":155},{},[156],{"type":23,"value":157},"a blocked headline type.",{"type":17,"tag":26,"props":159,"children":160},{},[161],{"type":23,"value":162},"Use visual elements carefully. Only use a visual element if it:",{"type":17,"tag":65,"props":164,"children":165},{},[166,171,176,181,186],{"type":17,"tag":69,"props":167,"children":168},{},[169],{"type":23,"value":170},"is meaningful to the user journey",{"type":17,"tag":69,"props":172,"children":173},{},[174],{"type":23,"value":175},"supports what is already in the content",{"type":17,"tag":69,"props":177,"children":178},{},[179],{"type":23,"value":180},"can help the user differentiate content from other content",{"type":17,"tag":69,"props":182,"children":183},{},[184],{"type":23,"value":185},"can be easily identified",{"type":17,"tag":69,"props":187,"children":188},{},[189],{"type":23,"value":190},"is informative and not only decorative.",{"type":17,"tag":53,"props":192,"children":194},{"id":193},"when-and-how-to-use",[195],{"type":23,"value":196},"When and how to use",{"type":17,"tag":65,"props":198,"children":199},{},[200,205,210,215],{"type":17,"tag":69,"props":201,"children":202},{},[203],{"type":23,"value":204},"Group together cards with similar content.",{"type":17,"tag":69,"props":206,"children":207},{},[208],{"type":23,"value":209},"Use only a single style of card within a set of cards.",{"type":17,"tag":69,"props":211,"children":212},{},[213],{"type":23,"value":214},"Keep the content clear and concise.",{"type":17,"tag":69,"props":216,"children":217},{},[218],{"type":23,"value":219},"Only use one piece of information per card.",{"type":17,"tag":53,"props":221,"children":223},{"id":222},"when-and-how-not-to-use",[224],{"type":23,"value":225},"When and how not to use",{"type":17,"tag":65,"props":227,"children":228},{},[229,234,239,244,249],{"type":17,"tag":69,"props":230,"children":231},{},[232],{"type":23,"value":233},"Don't mix different card variants in a group.",{"type":17,"tag":69,"props":235,"children":236},{},[237],{"type":23,"value":238},"Never use a single card only.",{"type":17,"tag":69,"props":240,"children":241},{},[242],{"type":23,"value":243},"Never repeat content in a group of cards.",{"type":17,"tag":69,"props":245,"children":246},{},[247],{"type":23,"value":248},"Don't overload cards with content.",{"type":17,"tag":69,"props":250,"children":251},{},[252],{"type":23,"value":253},"Don't include other interactive elements, like links, inside the card.",{"type":17,"tag":255,"props":256,"children":257},"hr",{},[],{"type":17,"tag":18,"props":259,"children":261},{"id":260},"variants",[262],{"type":23,"value":263},"Variants",{"type":17,"tag":26,"props":265,"children":266},{},[267],{"type":23,"value":268},"A card has 2 main variants and is styled for its purpose.",{"type":17,"tag":65,"props":270,"children":271},{},[272,277],{"type":17,"tag":69,"props":273,"children":274},{},[275],{"type":23,"value":276},"Promotion Cards, which is used to highlight important content.",{"type":17,"tag":69,"props":278,"children":279},{},[280],{"type":23,"value":281},"Navigation Cards, which is used for larger groups of content.",{"type":17,"tag":53,"props":283,"children":285},{"id":284},"promotion-cards",[286],{"type":23,"value":287},"Promotion cards",{"type":17,"tag":26,"props":289,"children":290},{},[291],{"type":23,"value":292},"Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites).",{"type":17,"tag":26,"props":294,"children":295},{},[296],{"type":23,"value":297},"Promotion cards stack in a grid when used in a collection.",{"type":17,"tag":26,"props":299,"children":300},{},[301],{"type":23,"value":302},"Promotion cards have 4 variants:",{"type":17,"tag":65,"props":304,"children":305},{},[306,311,316,321],{"type":17,"tag":69,"props":307,"children":308},{},[309],{"type":23,"value":310},"standard",{"type":17,"tag":69,"props":312,"children":313},{},[314],{"type":23,"value":315},"highlight",{"type":17,"tag":69,"props":317,"children":318},{},[319],{"type":23,"value":320},"image full bleed",{"type":17,"tag":69,"props":322,"children":323},{},[324],{"type":23,"value":325},"avatar.",{"type":17,"tag":95,"props":327,"children":328},{"id":310},[329],{"type":23,"value":330},"Standard",{"type":17,"tag":47,"props":332,"children":333},{"id":49,"argsString":50},[],{"type":17,"tag":95,"props":335,"children":336},{"id":315},[337],{"type":23,"value":338},"Highlight",{"type":17,"tag":26,"props":340,"children":341},{},[342],{"type":23,"value":343},"The highlight variant gives the card more visual prominence. Use this to guide users to the content.",{"type":17,"tag":47,"props":345,"children":348},{"id":49,"argsString":346,"theme":347},"graphicElement:Highlight","docsTheme2",[],{"type":17,"tag":95,"props":350,"children":352},{"id":351},"image-full-bleed",[353],{"type":23,"value":354},"Image full bleed",{"type":17,"tag":26,"props":356,"children":357},{},[358],{"type":23,"value":359},"The image full bleed variant gives the option to add a relevant image to grab the user’s attention.",{"type":17,"tag":47,"props":361,"children":362},{"id":49},[],{"type":17,"tag":95,"props":364,"children":366},{"id":365},"avatar",[367],{"type":23,"value":368},"Avatar",{"type":17,"tag":47,"props":370,"children":372},{"id":371},"core-navigation-card--avatar",[],{"type":17,"tag":53,"props":374,"children":376},{"id":375},"navigation-cards",[377],{"type":23,"value":378},"Navigation cards",{"type":17,"tag":26,"props":380,"children":381},{},[382],{"type":23,"value":383},"Navigation cards are useful for displaying and breaking down large groups of content options.",{"type":17,"tag":26,"props":385,"children":386},{},[387],{"type":23,"value":388},"On landing pages, they are used to highlight all the different sections of that site.",{"type":17,"tag":26,"props":390,"children":391},{},[392],{"type":23,"value":393},"Navigation cards fill the full width of the content area. They will always stack vertically.",{"type":17,"tag":26,"props":395,"children":396},{},[397],{"type":23,"value":398},"There are 3 variants of navigation cards:",{"type":17,"tag":65,"props":400,"children":401},{},[402,406,411],{"type":17,"tag":69,"props":403,"children":404},{},[405],{"type":23,"value":310},{"type":17,"tag":69,"props":407,"children":408},{},[409],{"type":23,"value":410},"image inset",{"type":17,"tag":69,"props":412,"children":413},{},[414],{"type":23,"value":415},"heading highlight.",{"type":17,"tag":95,"props":417,"children":419},{"id":418},"standard-1",[420],{"type":23,"value":330},{"type":17,"tag":47,"props":422,"children":424},{"id":423,"argsString":50},"core-navigation-card--nav",[],{"type":17,"tag":95,"props":426,"children":428},{"id":427},"image-inset",[429],{"type":23,"value":430},"Image inset",{"type":17,"tag":26,"props":432,"children":433},{},[434],{"type":23,"value":435},"A related image can increase a card's visual prominence.",{"type":17,"tag":47,"props":437,"children":438},{"id":423},[],{"type":17,"tag":95,"props":440,"children":442},{"id":441},"heading-highlight",[443],{"type":23,"value":444},"Heading highlight",{"type":17,"tag":26,"props":446,"children":447},{},[448],{"type":23,"value":449},"To draw attention to the heading and highlight the content, use a heading highlight.",{"type":17,"tag":47,"props":451,"children":453},{"id":423,"argsString":452},"graphicElement:Heading+highlighted",[],{"type":17,"tag":255,"props":455,"children":456},{},[],{"type":17,"tag":18,"props":458,"children":460},{"id":459},"theming",[461],{"type":23,"value":462},"Theming",{"type":17,"tag":26,"props":464,"children":465},{},[466],{"type":23,"value":467},"Cards use colour for:",{"type":17,"tag":65,"props":469,"children":470},{},[471,476],{"type":17,"tag":69,"props":472,"children":473},{},[474],{"type":23,"value":475},"interaction states",{"type":17,"tag":69,"props":477,"children":478},{},[479],{"type":23,"value":480},"adding visual prominence to some elements.",{"type":17,"tag":482,"props":483,"children":484},"docs-theme-chooser",{},[485,488],{"type":17,"tag":47,"props":486,"children":487},{"id":49,"argsString":346},[],{"type":17,"tag":47,"props":489,"children":490},{"id":423,"argsString":452},[],{"type":17,"tag":26,"props":492,"children":493},{},[494,496,502,504,509],{"type":23,"value":495},"To create your own theme, see ",{"type":17,"tag":497,"props":498,"children":499},"a",{"href":8},[500],{"type":23,"value":501},"theming guidance for designers",{"type":23,"value":503}," or ",{"type":17,"tag":497,"props":505,"children":506},{"href":8},[507],{"type":23,"value":508},"theming guidance for developers",{"type":23,"value":510},".",{"title":8,"searchDepth":512,"depth":512,"links":513},2,[514,520,524],{"id":20,"depth":512,"text":24,"children":515},[516,518,519],{"id":55,"depth":517,"text":58},3,{"id":193,"depth":517,"text":196},{"id":222,"depth":517,"text":225},{"id":260,"depth":512,"text":263,"children":521},[522,523],{"id":284,"depth":517,"text":287},{"id":375,"depth":517,"text":378},{"id":459,"depth":512,"text":462},"markdown","content:design-system:5.components:card.md","content","design-system/5.components/card.md","md",{"/design-system/components/card":531},[532,538],{"_path":533,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":534,"description":535,"layout":11,"label":12,"_type":525,"_id":536,"_source":527,"_file":537,"_extension":529},"/design-system/components/campaign-banner","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","content:design-system:5.components:campaign-banner.md","design-system/5.components/campaign-banner.md",{"_path":539,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":540,"description":541,"layout":11,"label":12,"_type":525,"_id":542,"_source":527,"_file":543,"_extension":529},"/design-system/components/carousel","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","content:design-system:5.components:carousel.md","design-system/5.components/carousel.md",{},[546,551,792],{"title":547,"_path":548,"icon":549,"layout":550},"Ripple Design System","/","carbon:home","home",{"title":552,"_path":553,"children":554},"Design System","/design-system",[555,571,587,616,650],{"title":556,"_path":557,"children":558},"About","/design-system/about",[559,562,565,568],{"title":560,"_path":561,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":563,"_path":564,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":566,"_path":567,"layout":11},"Support","/design-system/about/getting-support",{"title":569,"_path":570,"layout":11},"Contributing","/design-system/about/contributing",{"title":572,"_path":573,"children":574},"Design","/design-system/design",[575,578,581,584],{"title":576,"_path":577,"layout":11},"Getting started","/design-system/design/getting-started",{"title":579,"_path":580,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":582,"_path":583,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":585,"_path":586,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":588,"_path":589,"children":590},"Develop","/design-system/develop",[591,593,595,598],{"title":576,"_path":592,"layout":11},"/design-system/develop/getting-started",{"title":569,"_path":594,"layout":11},"/design-system/develop/contributing",{"title":596,"_path":597,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":599,"children":600,"layout":11},"/design-system/develop/usage",[601,604,607,610,613],{"title":602,"_path":603,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":605,"_path":606,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":608,"_path":609,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":611,"_path":612,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":614,"_path":615,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":617,"_path":618,"children":619},"Styles","/design-system/styles",[620,623,626,629,632,635,638,641,644,647],{"title":621,"_path":622,"layout":11},"Colour","/design-system/styles/colour",{"title":624,"_path":625,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":627,"_path":628,"layout":11},"Grid","/design-system/styles/grid",{"title":630,"_path":631,"layout":11},"Icons","/design-system/styles/icons",{"title":633,"_path":634,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":636,"_path":637,"layout":11},"Layout","/design-system/styles/layout",{"title":639,"_path":640,"layout":11},"Logo","/design-system/styles/logo",{"title":642,"_path":643,"layout":11},"Motion","/design-system/styles/motion",{"title":645,"_path":646,"layout":11},"Spacing","/design-system/styles/spacing",{"title":648,"_path":649,"layout":11},"Typography","/design-system/styles/typography",{"title":651,"_path":652,"children":653},"Components","/design-system/components",[654,657,660,663,666,669,672,675,678,679,680,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,789],{"title":655,"_path":656,"layout":11},"Accordion","/design-system/components/accordion",{"title":658,"_path":659,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":661,"_path":662,"layout":11},"Alert","/design-system/components/alert",{"title":664,"_path":665,"layout":11},"Block quote","/design-system/components/block-quote",{"title":667,"_path":668,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":670,"_path":671,"layout":11},"Button","/design-system/components/button",{"title":673,"_path":674,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":676,"_path":677,"layout":11},"Callout","/design-system/components/callout",{"title":534,"_path":533,"layout":11},{"title":9,"_path":5,"layout":11},{"title":540,"_path":539,"layout":11},{"title":682,"_path":683,"layout":11},"Category grid","/design-system/components/category-grid",{"title":685,"_path":686,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":688,"_path":689,"layout":11},"Chip","/design-system/components/chip",{"title":691,"_path":692,"layout":11},"Contact us","/design-system/components/contact-us",{"title":694,"_path":695,"layout":11},"Date input","/design-system/components/date-input",{"title":697,"_path":698,"layout":11},"Detail list","/design-system/components/detail-list",{"title":700,"_path":701,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":703,"_path":704,"layout":11},"File","/design-system/components/file",{"title":706,"_path":707,"layout":11},"Footer","/design-system/components/footer",{"title":709,"_path":710,"layout":11},"Form alert","/design-system/components/form-alert",{"title":712,"_path":713,"layout":11},"Form","/design-system/components/form",{"title":715,"_path":716,"layout":11},"Header","/design-system/components/header",{"title":718,"_path":719,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":721,"_path":722,"layout":11},"Input field","/design-system/components/input-field",{"title":724,"_path":725,"layout":11},"Key dates","/design-system/components/key-dates",{"title":727,"_path":728,"layout":11},"Media embed","/design-system/components/media-embed",{"title":730,"_path":731,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":733,"_path":734,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":736,"_path":737,"layout":11},"Media","/design-system/components/media",{"title":739,"_path":740,"layout":11},"Option button","/design-system/components/option-button",{"title":742,"_path":743,"layout":11},"Page action","/design-system/components/page-action",{"title":745,"_path":746,"layout":11},"Pagination","/design-system/components/pagination",{"title":748,"_path":749,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":751,"_path":752,"layout":11},"Profile","/design-system/components/profile",{"title":754,"_path":755,"layout":11},"Radio button","/design-system/components/radio-button",{"title":757,"_path":758,"layout":11},"Related links","/design-system/components/related-links",{"title":760,"_path":761,"layout":11},"Results listing","/design-system/components/results-listing",{"title":763,"_path":764,"layout":11},"Search bar","/design-system/components/search-bar",{"title":766,"_path":767,"layout":11},"Skip link","/design-system/components/skip-link",{"title":769,"_path":770,"layout":11},"Social share","/design-system/components/social-share",{"title":772,"_path":773,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":775,"_path":776,"layout":11},"Table","/design-system/components/table",{"title":778,"_path":779,"layout":11},"Tabs","/design-system/components/tabs",{"title":781,"_path":782,"layout":11},"Tag","/design-system/components/tag",{"title":784,"_path":785,"layout":11},"Text area","/design-system/components/text-area",{"title":787,"_path":788,"layout":11},"Timeline","/design-system/components/timeline",{"title":790,"_path":791,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":793,"_path":794,"children":795,"layout":11},"Ripple Framework","/framework",[796,797,815,837],{"title":793,"_path":794,"layout":11},{"title":798,"_path":799,"children":800},"Key Concepts","/framework/key-concepts",[801,803,806,809,812],{"title":608,"_path":802,"layout":11},"/framework/key-concepts/nuxt",{"title":804,"_path":805,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":807,"_path":808,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":810,"_path":811,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":813,"_path":814,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":816,"_path":817,"children":818},"Guides","/framework/guides",[819,822,825,828,831,834],{"title":820,"_path":821,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":823,"_path":824,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":826,"_path":827,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":829,"_path":830,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":832,"_path":833,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":835,"_path":836,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":838,"_path":839,"layout":11},"Core modules","/framework/core-modules",["Reactive",841],{"module-navigation":842},null,true,"/design-system/components/card/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/carousel/index.html b/design-system/components/carousel/index.html index 94c0ec7335..3fb08a40fe 100644 --- a/design-system/components/carousel/index.html +++ b/design-system/components/carousel/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Carousel</h1><p class="rpl-type-p-large" data-v-3163c6df>The Carousel component is a set of related cards that users can side-scroll through.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a carousel to let users browse through a set of up to 9 cards with pagination controls.<!--]--></p><p><!--[-->The content in the carousel should be related in some way. This helps users to find related and relevant content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-card-carousel--breakpoints&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-card-carousel--breakpoints&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use a combination of promotion cards.<!--]--></li><li><!--[-->Use when wanting to display a collection of cards with related content.<!--]--></li><li><!--[-->Add to any page type.<!--]--></li><li><!--[-->Include with an accompanying title to give context to users.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use more than 9 cards or fewer than 3.<!--]--></li><li><!--[-->Don't use with navigation or other card types.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The carousel adopts its theming from the card and pagination components.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-card-carousel--breakpoints&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-card-carousel--breakpoints&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/carousel.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/carousel/_payload.json">[{"state":1,"_errors":458,"serverRendered":461,"path":462,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":150,"$sdd-globals":164,"$sdd-navigation":165},{"/design-system/components/carousel":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":145,"_id":146,"_source":147,"_file":148,"_extension":149},"/design-system/components/carousel","components",false,"","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","page","Core",{"type":14,"children":15,"toc":136},"root",[16,25,31,36,41,48,73,79,92,96,102,107,114],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a carousel to let users browse through a set of up to 9 cards with pagination controls.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"The content in the carousel should be related in some way. This helps users to find related and relevant content.",{"type":17,"tag":37,"props":38,"children":40},"docs-example",{"id":39},"core-containers-card-carousel--breakpoints",[],{"type":17,"tag":42,"props":43,"children":45},"h3",{"id":44},"when-and-how-to-use",[46],{"type":23,"value":47},"When and how to use",{"type":17,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68],{"type":17,"tag":53,"props":54,"children":55},"li",{},[56],{"type":23,"value":57},"Use a combination of promotion cards.",{"type":17,"tag":53,"props":59,"children":60},{},[61],{"type":23,"value":62},"Use when wanting to display a collection of cards with related content.",{"type":17,"tag":53,"props":64,"children":65},{},[66],{"type":23,"value":67},"Add to any page type.",{"type":17,"tag":53,"props":69,"children":70},{},[71],{"type":23,"value":72},"Include with an accompanying title to give context to users.",{"type":17,"tag":42,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":49,"props":80,"children":81},{},[82,87],{"type":17,"tag":53,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don’t use more than 9 cards or fewer than 3.",{"type":17,"tag":53,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don't use with navigation or other card types.",{"type":17,"tag":93,"props":94,"children":95},"hr",{},[],{"type":17,"tag":18,"props":97,"children":99},{"id":98},"theming",[100],{"type":23,"value":101},"Theming",{"type":17,"tag":26,"props":103,"children":104},{},[105],{"type":23,"value":106},"The carousel adopts its theming from the card and pagination components.",{"type":17,"tag":108,"props":109,"children":110},"docs-theme-chooser",{},[111],{"type":17,"tag":37,"props":112,"children":113},{"id":39},[],{"type":17,"tag":26,"props":115,"children":116},{},[117,119,126,128,134],{"type":23,"value":118},"To create your own theme see ",{"type":17,"tag":120,"props":121,"children":123},"a",{"href":122},"/design-system/design/theming-guidance-for-designers",[124],{"type":23,"value":125},"theming guidance for designers",{"type":23,"value":127}," or ",{"type":17,"tag":120,"props":129,"children":131},{"href":130},"/design-system/develop/theming",[132],{"type":23,"value":133},"theming guidance for developers",{"type":23,"value":135},".",{"title":8,"searchDepth":137,"depth":137,"links":138},2,[139,144],{"id":20,"depth":137,"text":24,"children":140},[141,143],{"id":44,"depth":142,"text":47},3,{"id":75,"depth":142,"text":78},{"id":98,"depth":137,"text":101},"markdown","content:design-system:5.components:carousel.md","content","design-system/5.components/carousel.md","md",{"/design-system/components/carousel":151},[152,158],{"_path":153,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":154,"description":155,"layout":11,"label":12,"_type":145,"_id":156,"_source":147,"_file":157,"_extension":149},"/design-system/components/card","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","content:design-system:5.components:card.md","design-system/5.components/card.md",{"_path":159,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":160,"description":161,"layout":11,"label":12,"_type":145,"_id":162,"_source":147,"_file":163,"_extension":149},"/design-system/components/category-grid","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","content:design-system:5.components:category-grid.md","design-system/5.components/category-grid.md",{},[166,171,410],{"title":167,"_path":168,"icon":169,"layout":170},"Ripple Design System","/","carbon:home","home",{"title":172,"_path":173,"children":174},"Design System","/design-system",[175,191,206,234,268],{"title":176,"_path":177,"children":178},"About","/design-system/about",[179,182,185,188],{"title":180,"_path":181,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":183,"_path":184,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":186,"_path":187,"layout":11},"Support","/design-system/about/getting-support",{"title":189,"_path":190,"layout":11},"Contributing","/design-system/about/contributing",{"title":192,"_path":193,"children":194},"Design","/design-system/design",[195,198,201,204],{"title":196,"_path":197,"layout":11},"Getting started","/design-system/design/getting-started",{"title":199,"_path":200,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":202,"_path":203,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":205,"_path":122,"layout":11},"Theming guidance for designers",{"title":207,"_path":208,"children":209},"Develop","/design-system/develop",[210,212,214,216],{"title":196,"_path":211,"layout":11},"/design-system/develop/getting-started",{"title":189,"_path":213,"layout":11},"/design-system/develop/contributing",{"title":215,"_path":130,"layout":11},"Theme and brand application",{"title":24,"_path":217,"children":218,"layout":11},"/design-system/develop/usage",[219,222,225,228,231],{"title":220,"_path":221,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":223,"_path":224,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":226,"_path":227,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":229,"_path":230,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":232,"_path":233,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":235,"_path":236,"children":237},"Styles","/design-system/styles",[238,241,244,247,250,253,256,259,262,265],{"title":239,"_path":240,"layout":11},"Colour","/design-system/styles/colour",{"title":242,"_path":243,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":245,"_path":246,"layout":11},"Grid","/design-system/styles/grid",{"title":248,"_path":249,"layout":11},"Icons","/design-system/styles/icons",{"title":251,"_path":252,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":254,"_path":255,"layout":11},"Layout","/design-system/styles/layout",{"title":257,"_path":258,"layout":11},"Logo","/design-system/styles/logo",{"title":260,"_path":261,"layout":11},"Motion","/design-system/styles/motion",{"title":263,"_path":264,"layout":11},"Spacing","/design-system/styles/spacing",{"title":266,"_path":267,"layout":11},"Typography","/design-system/styles/typography",{"title":269,"_path":270,"children":271},"Components","/design-system/components",[272,275,278,281,284,287,290,293,296,299,300,301,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407],{"title":273,"_path":274,"layout":11},"Accordion","/design-system/components/accordion",{"title":276,"_path":277,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":279,"_path":280,"layout":11},"Alert","/design-system/components/alert",{"title":282,"_path":283,"layout":11},"Block quote","/design-system/components/block-quote",{"title":285,"_path":286,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":288,"_path":289,"layout":11},"Button","/design-system/components/button",{"title":291,"_path":292,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":294,"_path":295,"layout":11},"Callout","/design-system/components/callout",{"title":297,"_path":298,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":154,"_path":153,"layout":11},{"title":9,"_path":5,"layout":11},{"title":160,"_path":159,"layout":11},{"title":303,"_path":304,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":306,"_path":307,"layout":11},"Chip","/design-system/components/chip",{"title":309,"_path":310,"layout":11},"Contact us","/design-system/components/contact-us",{"title":312,"_path":313,"layout":11},"Date input","/design-system/components/date-input",{"title":315,"_path":316,"layout":11},"Detail list","/design-system/components/detail-list",{"title":318,"_path":319,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":321,"_path":322,"layout":11},"File","/design-system/components/file",{"title":324,"_path":325,"layout":11},"Footer","/design-system/components/footer",{"title":327,"_path":328,"layout":11},"Form alert","/design-system/components/form-alert",{"title":330,"_path":331,"layout":11},"Form","/design-system/components/form",{"title":333,"_path":334,"layout":11},"Header","/design-system/components/header",{"title":336,"_path":337,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":339,"_path":340,"layout":11},"Input field","/design-system/components/input-field",{"title":342,"_path":343,"layout":11},"Key dates","/design-system/components/key-dates",{"title":345,"_path":346,"layout":11},"Media embed","/design-system/components/media-embed",{"title":348,"_path":349,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":351,"_path":352,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":354,"_path":355,"layout":11},"Media","/design-system/components/media",{"title":357,"_path":358,"layout":11},"Option button","/design-system/components/option-button",{"title":360,"_path":361,"layout":11},"Page action","/design-system/components/page-action",{"title":363,"_path":364,"layout":11},"Pagination","/design-system/components/pagination",{"title":366,"_path":367,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":369,"_path":370,"layout":11},"Profile","/design-system/components/profile",{"title":372,"_path":373,"layout":11},"Radio button","/design-system/components/radio-button",{"title":375,"_path":376,"layout":11},"Related links","/design-system/components/related-links",{"title":378,"_path":379,"layout":11},"Results listing","/design-system/components/results-listing",{"title":381,"_path":382,"layout":11},"Search bar","/design-system/components/search-bar",{"title":384,"_path":385,"layout":11},"Skip link","/design-system/components/skip-link",{"title":387,"_path":388,"layout":11},"Social share","/design-system/components/social-share",{"title":390,"_path":391,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":393,"_path":394,"layout":11},"Table","/design-system/components/table",{"title":396,"_path":397,"layout":11},"Tabs","/design-system/components/tabs",{"title":399,"_path":400,"layout":11},"Tag","/design-system/components/tag",{"title":402,"_path":403,"layout":11},"Text area","/design-system/components/text-area",{"title":405,"_path":406,"layout":11},"Timeline","/design-system/components/timeline",{"title":408,"_path":409,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":411,"_path":412,"children":413,"layout":11},"Ripple Framework","/framework",[414,415,433,455],{"title":411,"_path":412,"layout":11},{"title":416,"_path":417,"children":418},"Key Concepts","/framework/key-concepts",[419,421,424,427,430],{"title":226,"_path":420,"layout":11},"/framework/key-concepts/nuxt",{"title":422,"_path":423,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":425,"_path":426,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":428,"_path":429,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":431,"_path":432,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":434,"_path":435,"children":436},"Guides","/framework/guides",[437,440,443,446,449,452],{"title":438,"_path":439,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":441,"_path":442,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":444,"_path":445,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":447,"_path":448,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":450,"_path":451,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":453,"_path":454,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":456,"_path":457,"layout":11},"Core modules","/framework/core-modules",["Reactive",459],{"module-navigation":460},null,true,"/design-system/components/carousel/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Carousel</h1><p class="rpl-type-p-large" data-v-3163c6df>The Carousel component is a set of related cards that users can side-scroll through.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a carousel to let users browse through a set of up to 9 cards with pagination controls.<!--]--></p><p><!--[-->The content in the carousel should be related in some way. This helps users to find related and relevant content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-card-carousel--breakpoints&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-card-carousel--breakpoints&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use a combination of promotion cards.<!--]--></li><li><!--[-->Use when wanting to display a collection of cards with related content.<!--]--></li><li><!--[-->Add to any page type.<!--]--></li><li><!--[-->Include with an accompanying title to give context to users.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use more than 9 cards or fewer than 3.<!--]--></li><li><!--[-->Don't use with navigation or other card types.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The carousel adopts its theming from the card and pagination components.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-card-carousel--breakpoints&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-card-carousel--breakpoints&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/carousel.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/carousel/_payload.json">[{"state":1,"_errors":458,"serverRendered":461,"path":462,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":150,"$sdd-globals":164,"$sdd-navigation":165},{"/design-system/components/carousel":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":145,"_id":146,"_source":147,"_file":148,"_extension":149},"/design-system/components/carousel","components",false,"","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","page","Core",{"type":14,"children":15,"toc":136},"root",[16,25,31,36,41,48,73,79,92,96,102,107,114],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a carousel to let users browse through a set of up to 9 cards with pagination controls.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"The content in the carousel should be related in some way. This helps users to find related and relevant content.",{"type":17,"tag":37,"props":38,"children":40},"docs-example",{"id":39},"core-containers-card-carousel--breakpoints",[],{"type":17,"tag":42,"props":43,"children":45},"h3",{"id":44},"when-and-how-to-use",[46],{"type":23,"value":47},"When and how to use",{"type":17,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68],{"type":17,"tag":53,"props":54,"children":55},"li",{},[56],{"type":23,"value":57},"Use a combination of promotion cards.",{"type":17,"tag":53,"props":59,"children":60},{},[61],{"type":23,"value":62},"Use when wanting to display a collection of cards with related content.",{"type":17,"tag":53,"props":64,"children":65},{},[66],{"type":23,"value":67},"Add to any page type.",{"type":17,"tag":53,"props":69,"children":70},{},[71],{"type":23,"value":72},"Include with an accompanying title to give context to users.",{"type":17,"tag":42,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":49,"props":80,"children":81},{},[82,87],{"type":17,"tag":53,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don’t use more than 9 cards or fewer than 3.",{"type":17,"tag":53,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don't use with navigation or other card types.",{"type":17,"tag":93,"props":94,"children":95},"hr",{},[],{"type":17,"tag":18,"props":97,"children":99},{"id":98},"theming",[100],{"type":23,"value":101},"Theming",{"type":17,"tag":26,"props":103,"children":104},{},[105],{"type":23,"value":106},"The carousel adopts its theming from the card and pagination components.",{"type":17,"tag":108,"props":109,"children":110},"docs-theme-chooser",{},[111],{"type":17,"tag":37,"props":112,"children":113},{"id":39},[],{"type":17,"tag":26,"props":115,"children":116},{},[117,119,126,128,134],{"type":23,"value":118},"To create your own theme see ",{"type":17,"tag":120,"props":121,"children":123},"a",{"href":122},"/design-system/design/theming-guidance-for-designers",[124],{"type":23,"value":125},"theming guidance for designers",{"type":23,"value":127}," or ",{"type":17,"tag":120,"props":129,"children":131},{"href":130},"/design-system/develop/theming",[132],{"type":23,"value":133},"theming guidance for developers",{"type":23,"value":135},".",{"title":8,"searchDepth":137,"depth":137,"links":138},2,[139,144],{"id":20,"depth":137,"text":24,"children":140},[141,143],{"id":44,"depth":142,"text":47},3,{"id":75,"depth":142,"text":78},{"id":98,"depth":137,"text":101},"markdown","content:design-system:5.components:carousel.md","content","design-system/5.components/carousel.md","md",{"/design-system/components/carousel":151},[152,158],{"_path":153,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":154,"description":155,"layout":11,"label":12,"_type":145,"_id":156,"_source":147,"_file":157,"_extension":149},"/design-system/components/card","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","content:design-system:5.components:card.md","design-system/5.components/card.md",{"_path":159,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":160,"description":161,"layout":11,"label":12,"_type":145,"_id":162,"_source":147,"_file":163,"_extension":149},"/design-system/components/category-grid","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","content:design-system:5.components:category-grid.md","design-system/5.components/category-grid.md",{},[166,171,410],{"title":167,"_path":168,"icon":169,"layout":170},"Ripple Design System","/","carbon:home","home",{"title":172,"_path":173,"children":174},"Design System","/design-system",[175,191,206,234,268],{"title":176,"_path":177,"children":178},"About","/design-system/about",[179,182,185,188],{"title":180,"_path":181,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":183,"_path":184,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":186,"_path":187,"layout":11},"Support","/design-system/about/getting-support",{"title":189,"_path":190,"layout":11},"Contributing","/design-system/about/contributing",{"title":192,"_path":193,"children":194},"Design","/design-system/design",[195,198,201,204],{"title":196,"_path":197,"layout":11},"Getting started","/design-system/design/getting-started",{"title":199,"_path":200,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":202,"_path":203,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":205,"_path":122,"layout":11},"Theming guidance for designers",{"title":207,"_path":208,"children":209},"Develop","/design-system/develop",[210,212,214,216],{"title":196,"_path":211,"layout":11},"/design-system/develop/getting-started",{"title":189,"_path":213,"layout":11},"/design-system/develop/contributing",{"title":215,"_path":130,"layout":11},"Theme and brand application",{"title":24,"_path":217,"children":218,"layout":11},"/design-system/develop/usage",[219,222,225,228,231],{"title":220,"_path":221,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":223,"_path":224,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":226,"_path":227,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":229,"_path":230,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":232,"_path":233,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":235,"_path":236,"children":237},"Styles","/design-system/styles",[238,241,244,247,250,253,256,259,262,265],{"title":239,"_path":240,"layout":11},"Colour","/design-system/styles/colour",{"title":242,"_path":243,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":245,"_path":246,"layout":11},"Grid","/design-system/styles/grid",{"title":248,"_path":249,"layout":11},"Icons","/design-system/styles/icons",{"title":251,"_path":252,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":254,"_path":255,"layout":11},"Layout","/design-system/styles/layout",{"title":257,"_path":258,"layout":11},"Logo","/design-system/styles/logo",{"title":260,"_path":261,"layout":11},"Motion","/design-system/styles/motion",{"title":263,"_path":264,"layout":11},"Spacing","/design-system/styles/spacing",{"title":266,"_path":267,"layout":11},"Typography","/design-system/styles/typography",{"title":269,"_path":270,"children":271},"Components","/design-system/components",[272,275,278,281,284,287,290,293,296,299,300,301,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407],{"title":273,"_path":274,"layout":11},"Accordion","/design-system/components/accordion",{"title":276,"_path":277,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":279,"_path":280,"layout":11},"Alert","/design-system/components/alert",{"title":282,"_path":283,"layout":11},"Block quote","/design-system/components/block-quote",{"title":285,"_path":286,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":288,"_path":289,"layout":11},"Button","/design-system/components/button",{"title":291,"_path":292,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":294,"_path":295,"layout":11},"Callout","/design-system/components/callout",{"title":297,"_path":298,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":154,"_path":153,"layout":11},{"title":9,"_path":5,"layout":11},{"title":160,"_path":159,"layout":11},{"title":303,"_path":304,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":306,"_path":307,"layout":11},"Chip","/design-system/components/chip",{"title":309,"_path":310,"layout":11},"Contact us","/design-system/components/contact-us",{"title":312,"_path":313,"layout":11},"Date input","/design-system/components/date-input",{"title":315,"_path":316,"layout":11},"Detail list","/design-system/components/detail-list",{"title":318,"_path":319,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":321,"_path":322,"layout":11},"File","/design-system/components/file",{"title":324,"_path":325,"layout":11},"Footer","/design-system/components/footer",{"title":327,"_path":328,"layout":11},"Form alert","/design-system/components/form-alert",{"title":330,"_path":331,"layout":11},"Form","/design-system/components/form",{"title":333,"_path":334,"layout":11},"Header","/design-system/components/header",{"title":336,"_path":337,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":339,"_path":340,"layout":11},"Input field","/design-system/components/input-field",{"title":342,"_path":343,"layout":11},"Key dates","/design-system/components/key-dates",{"title":345,"_path":346,"layout":11},"Media embed","/design-system/components/media-embed",{"title":348,"_path":349,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":351,"_path":352,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":354,"_path":355,"layout":11},"Media","/design-system/components/media",{"title":357,"_path":358,"layout":11},"Option button","/design-system/components/option-button",{"title":360,"_path":361,"layout":11},"Page action","/design-system/components/page-action",{"title":363,"_path":364,"layout":11},"Pagination","/design-system/components/pagination",{"title":366,"_path":367,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":369,"_path":370,"layout":11},"Profile","/design-system/components/profile",{"title":372,"_path":373,"layout":11},"Radio button","/design-system/components/radio-button",{"title":375,"_path":376,"layout":11},"Related links","/design-system/components/related-links",{"title":378,"_path":379,"layout":11},"Results listing","/design-system/components/results-listing",{"title":381,"_path":382,"layout":11},"Search bar","/design-system/components/search-bar",{"title":384,"_path":385,"layout":11},"Skip link","/design-system/components/skip-link",{"title":387,"_path":388,"layout":11},"Social share","/design-system/components/social-share",{"title":390,"_path":391,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":393,"_path":394,"layout":11},"Table","/design-system/components/table",{"title":396,"_path":397,"layout":11},"Tabs","/design-system/components/tabs",{"title":399,"_path":400,"layout":11},"Tag","/design-system/components/tag",{"title":402,"_path":403,"layout":11},"Text area","/design-system/components/text-area",{"title":405,"_path":406,"layout":11},"Timeline","/design-system/components/timeline",{"title":408,"_path":409,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":411,"_path":412,"children":413,"layout":11},"Ripple Framework","/framework",[414,415,433,455],{"title":411,"_path":412,"layout":11},{"title":416,"_path":417,"children":418},"Key Concepts","/framework/key-concepts",[419,421,424,427,430],{"title":226,"_path":420,"layout":11},"/framework/key-concepts/nuxt",{"title":422,"_path":423,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":425,"_path":426,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":428,"_path":429,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":431,"_path":432,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":434,"_path":435,"children":436},"Guides","/framework/guides",[437,440,443,446,449,452],{"title":438,"_path":439,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":441,"_path":442,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":444,"_path":445,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":447,"_path":448,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":450,"_path":451,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":453,"_path":454,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":456,"_path":457,"layout":11},"Core modules","/framework/core-modules",["Reactive",459],{"module-navigation":460},null,true,"/design-system/components/carousel/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/category-grid/index.html b/design-system/components/category-grid/index.html index c97431e78d..f987dce495 100644 --- a/design-system/components/category-grid/index.html +++ b/design-system/components/category-grid/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Category grid</h1><p class="rpl-type-p-large" data-v-3163c6df>The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information.<!--]--></p><p><!--[-->A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category.<!--]--></p><p><!--[-->The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--category-grid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--category-grid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use as a collection of cards only.<!--]--></li><li><!--[-->Include clear and concise content.<!--]--></li><li><!--[-->Use with icons or pictograms.<!--]--></li><li><!--[-->Be careful not to include too many cards.<!--]--></li><li><!--[-->Always use unique media items per card.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use a single card only.<!--]--></li><li><!--[-->Don’t repeat content in the same a group of cards.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t include with other interactive elements like links.<!--]--></li><li><!--[-->Don’t use without a media item.<!--]--></li><li><!--[-->Don’t use on pages with a sidebar.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The category grid uses colour to indicate interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--category-grid&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--category-grid&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/category-grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/category-grid/_payload.json">[{"state":1,"_errors":488,"serverRendered":491,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":180,"$sdd-globals":194,"$sdd-navigation":195},{"/design-system/components/category-grid":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":175,"_id":176,"_source":177,"_file":178,"_extension":179},"/design-system/components/category-grid","components",false,"","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","page","Core",{"type":14,"children":15,"toc":166},"root",[16,25,31,36,41,46,53,83,89,122,126,132,137,144],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-navigation-card--category-grid",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68,73,78],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Use as a collection of cards only.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Include clear and concise content.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use with icons or pictograms.",{"type":17,"tag":58,"props":74,"children":75},{},[76],{"type":23,"value":77},"Be careful not to include too many cards.",{"type":17,"tag":58,"props":79,"children":80},{},[81],{"type":23,"value":82},"Always use unique media items per card.",{"type":17,"tag":47,"props":84,"children":86},{"id":85},"when-and-how-not-to-use",[87],{"type":23,"value":88},"When and how not to use",{"type":17,"tag":54,"props":90,"children":91},{},[92,97,102,107,112,117],{"type":17,"tag":58,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don’t use a single card only.",{"type":17,"tag":58,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t repeat content in the same a group of cards.",{"type":17,"tag":58,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don’t overload with content.",{"type":17,"tag":58,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don’t include with other interactive elements like links.",{"type":17,"tag":58,"props":113,"children":114},{},[115],{"type":23,"value":116},"Don’t use without a media item.",{"type":17,"tag":58,"props":118,"children":119},{},[120],{"type":23,"value":121},"Don’t use on pages with a sidebar.",{"type":17,"tag":123,"props":124,"children":125},"hr",{},[],{"type":17,"tag":18,"props":127,"children":129},{"id":128},"theming",[130],{"type":23,"value":131},"Theming",{"type":17,"tag":26,"props":133,"children":134},{},[135],{"type":23,"value":136},"The category grid uses colour to indicate interaction states.",{"type":17,"tag":138,"props":139,"children":140},"docs-theme-chooser",{},[141],{"type":17,"tag":42,"props":142,"children":143},{"id":44},[],{"type":17,"tag":26,"props":145,"children":146},{},[147,149,156,158,164],{"type":23,"value":148},"To create your own theme see ",{"type":17,"tag":150,"props":151,"children":153},"a",{"href":152},"/design-system/design/theming-guidance-for-designers",[154],{"type":23,"value":155},"theming guidance for designers",{"type":23,"value":157}," or ",{"type":17,"tag":150,"props":159,"children":161},{"href":160},"/design-system/develop/theming",[162],{"type":23,"value":163},"theming guidance for developers",{"type":23,"value":165},".",{"title":8,"searchDepth":167,"depth":167,"links":168},2,[169,174],{"id":20,"depth":167,"text":24,"children":170},[171,173],{"id":49,"depth":172,"text":52},3,{"id":85,"depth":172,"text":88},{"id":128,"depth":167,"text":131},"markdown","content:design-system:5.components:category-grid.md","content","design-system/5.components/category-grid.md","md",{"/design-system/components/category-grid":181},[182,188],{"_path":183,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":184,"description":185,"layout":11,"label":12,"_type":175,"_id":186,"_source":177,"_file":187,"_extension":179},"/design-system/components/carousel","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","content:design-system:5.components:carousel.md","design-system/5.components/carousel.md",{"_path":189,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":190,"description":191,"layout":11,"label":12,"_type":175,"_id":192,"_source":177,"_file":193,"_extension":179},"/design-system/components/checkbox","Checkbox","The Checkbox component lets users select one or more options from a list.","content:design-system:5.components:checkbox.md","design-system/5.components/checkbox.md",{},[196,201,440],{"title":197,"_path":198,"icon":199,"layout":200},"Ripple Design System","/","carbon:home","home",{"title":202,"_path":203,"children":204},"Design System","/design-system",[205,221,236,264,298],{"title":206,"_path":207,"children":208},"About","/design-system/about",[209,212,215,218],{"title":210,"_path":211,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":213,"_path":214,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":216,"_path":217,"layout":11},"Support","/design-system/about/getting-support",{"title":219,"_path":220,"layout":11},"Contributing","/design-system/about/contributing",{"title":222,"_path":223,"children":224},"Design","/design-system/design",[225,228,231,234],{"title":226,"_path":227,"layout":11},"Getting started","/design-system/design/getting-started",{"title":229,"_path":230,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":232,"_path":233,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":235,"_path":152,"layout":11},"Theming guidance for designers",{"title":237,"_path":238,"children":239},"Develop","/design-system/develop",[240,242,244,246],{"title":226,"_path":241,"layout":11},"/design-system/develop/getting-started",{"title":219,"_path":243,"layout":11},"/design-system/develop/contributing",{"title":245,"_path":160,"layout":11},"Theme and brand application",{"title":24,"_path":247,"children":248,"layout":11},"/design-system/develop/usage",[249,252,255,258,261],{"title":250,"_path":251,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":253,"_path":254,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":256,"_path":257,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":259,"_path":260,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":262,"_path":263,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":265,"_path":266,"children":267},"Styles","/design-system/styles",[268,271,274,277,280,283,286,289,292,295],{"title":269,"_path":270,"layout":11},"Colour","/design-system/styles/colour",{"title":272,"_path":273,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":275,"_path":276,"layout":11},"Grid","/design-system/styles/grid",{"title":278,"_path":279,"layout":11},"Icons","/design-system/styles/icons",{"title":281,"_path":282,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":284,"_path":285,"layout":11},"Layout","/design-system/styles/layout",{"title":287,"_path":288,"layout":11},"Logo","/design-system/styles/logo",{"title":290,"_path":291,"layout":11},"Motion","/design-system/styles/motion",{"title":293,"_path":294,"layout":11},"Spacing","/design-system/styles/spacing",{"title":296,"_path":297,"layout":11},"Typography","/design-system/styles/typography",{"title":299,"_path":300,"children":301},"Components","/design-system/components",[302,305,308,311,314,317,320,323,326,329,332,333,334,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437],{"title":303,"_path":304,"layout":11},"Accordion","/design-system/components/accordion",{"title":306,"_path":307,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":309,"_path":310,"layout":11},"Alert","/design-system/components/alert",{"title":312,"_path":313,"layout":11},"Block quote","/design-system/components/block-quote",{"title":315,"_path":316,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":318,"_path":319,"layout":11},"Button","/design-system/components/button",{"title":321,"_path":322,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":324,"_path":325,"layout":11},"Callout","/design-system/components/callout",{"title":327,"_path":328,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":330,"_path":331,"layout":11},"Card","/design-system/components/card",{"title":184,"_path":183,"layout":11},{"title":9,"_path":5,"layout":11},{"title":190,"_path":189,"layout":11},{"title":336,"_path":337,"layout":11},"Chip","/design-system/components/chip",{"title":339,"_path":340,"layout":11},"Contact us","/design-system/components/contact-us",{"title":342,"_path":343,"layout":11},"Date input","/design-system/components/date-input",{"title":345,"_path":346,"layout":11},"Detail list","/design-system/components/detail-list",{"title":348,"_path":349,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":351,"_path":352,"layout":11},"File","/design-system/components/file",{"title":354,"_path":355,"layout":11},"Footer","/design-system/components/footer",{"title":357,"_path":358,"layout":11},"Form alert","/design-system/components/form-alert",{"title":360,"_path":361,"layout":11},"Form","/design-system/components/form",{"title":363,"_path":364,"layout":11},"Header","/design-system/components/header",{"title":366,"_path":367,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":369,"_path":370,"layout":11},"Input field","/design-system/components/input-field",{"title":372,"_path":373,"layout":11},"Key dates","/design-system/components/key-dates",{"title":375,"_path":376,"layout":11},"Media embed","/design-system/components/media-embed",{"title":378,"_path":379,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":381,"_path":382,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":384,"_path":385,"layout":11},"Media","/design-system/components/media",{"title":387,"_path":388,"layout":11},"Option button","/design-system/components/option-button",{"title":390,"_path":391,"layout":11},"Page action","/design-system/components/page-action",{"title":393,"_path":394,"layout":11},"Pagination","/design-system/components/pagination",{"title":396,"_path":397,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":399,"_path":400,"layout":11},"Profile","/design-system/components/profile",{"title":402,"_path":403,"layout":11},"Radio button","/design-system/components/radio-button",{"title":405,"_path":406,"layout":11},"Related links","/design-system/components/related-links",{"title":408,"_path":409,"layout":11},"Results listing","/design-system/components/results-listing",{"title":411,"_path":412,"layout":11},"Search bar","/design-system/components/search-bar",{"title":414,"_path":415,"layout":11},"Skip link","/design-system/components/skip-link",{"title":417,"_path":418,"layout":11},"Social share","/design-system/components/social-share",{"title":420,"_path":421,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":423,"_path":424,"layout":11},"Table","/design-system/components/table",{"title":426,"_path":427,"layout":11},"Tabs","/design-system/components/tabs",{"title":429,"_path":430,"layout":11},"Tag","/design-system/components/tag",{"title":432,"_path":433,"layout":11},"Text area","/design-system/components/text-area",{"title":435,"_path":436,"layout":11},"Timeline","/design-system/components/timeline",{"title":438,"_path":439,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":441,"_path":442,"children":443,"layout":11},"Ripple Framework","/framework",[444,445,463,485],{"title":441,"_path":442,"layout":11},{"title":446,"_path":447,"children":448},"Key Concepts","/framework/key-concepts",[449,451,454,457,460],{"title":256,"_path":450,"layout":11},"/framework/key-concepts/nuxt",{"title":452,"_path":453,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":455,"_path":456,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":458,"_path":459,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":461,"_path":462,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":464,"_path":465,"children":466},"Guides","/framework/guides",[467,470,473,476,479,482],{"title":468,"_path":469,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":471,"_path":472,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":474,"_path":475,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":477,"_path":478,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":480,"_path":481,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":483,"_path":484,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":486,"_path":487,"layout":11},"Core modules","/framework/core-modules",["Reactive",489],{"module-navigation":490},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Category grid</h1><p class="rpl-type-p-large" data-v-3163c6df>The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information.<!--]--></p><p><!--[-->A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category.<!--]--></p><p><!--[-->The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--category-grid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--category-grid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use as a collection of cards only.<!--]--></li><li><!--[-->Include clear and concise content.<!--]--></li><li><!--[-->Use with icons or pictograms.<!--]--></li><li><!--[-->Be careful not to include too many cards.<!--]--></li><li><!--[-->Always use unique media items per card.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use a single card only.<!--]--></li><li><!--[-->Don’t repeat content in the same a group of cards.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t include with other interactive elements like links.<!--]--></li><li><!--[-->Don’t use without a media item.<!--]--></li><li><!--[-->Don’t use on pages with a sidebar.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The category grid uses colour to indicate interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--category-grid&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--category-grid&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/category-grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/category-grid/_payload.json">[{"state":1,"_errors":488,"serverRendered":491,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":180,"$sdd-globals":194,"$sdd-navigation":195},{"/design-system/components/category-grid":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":175,"_id":176,"_source":177,"_file":178,"_extension":179},"/design-system/components/category-grid","components",false,"","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","page","Core",{"type":14,"children":15,"toc":166},"root",[16,25,31,36,41,46,53,83,89,122,126,132,137,144],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-navigation-card--category-grid",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68,73,78],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Use as a collection of cards only.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Include clear and concise content.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use with icons or pictograms.",{"type":17,"tag":58,"props":74,"children":75},{},[76],{"type":23,"value":77},"Be careful not to include too many cards.",{"type":17,"tag":58,"props":79,"children":80},{},[81],{"type":23,"value":82},"Always use unique media items per card.",{"type":17,"tag":47,"props":84,"children":86},{"id":85},"when-and-how-not-to-use",[87],{"type":23,"value":88},"When and how not to use",{"type":17,"tag":54,"props":90,"children":91},{},[92,97,102,107,112,117],{"type":17,"tag":58,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don’t use a single card only.",{"type":17,"tag":58,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t repeat content in the same a group of cards.",{"type":17,"tag":58,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don’t overload with content.",{"type":17,"tag":58,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don’t include with other interactive elements like links.",{"type":17,"tag":58,"props":113,"children":114},{},[115],{"type":23,"value":116},"Don’t use without a media item.",{"type":17,"tag":58,"props":118,"children":119},{},[120],{"type":23,"value":121},"Don’t use on pages with a sidebar.",{"type":17,"tag":123,"props":124,"children":125},"hr",{},[],{"type":17,"tag":18,"props":127,"children":129},{"id":128},"theming",[130],{"type":23,"value":131},"Theming",{"type":17,"tag":26,"props":133,"children":134},{},[135],{"type":23,"value":136},"The category grid uses colour to indicate interaction states.",{"type":17,"tag":138,"props":139,"children":140},"docs-theme-chooser",{},[141],{"type":17,"tag":42,"props":142,"children":143},{"id":44},[],{"type":17,"tag":26,"props":145,"children":146},{},[147,149,156,158,164],{"type":23,"value":148},"To create your own theme see ",{"type":17,"tag":150,"props":151,"children":153},"a",{"href":152},"/design-system/design/theming-guidance-for-designers",[154],{"type":23,"value":155},"theming guidance for designers",{"type":23,"value":157}," or ",{"type":17,"tag":150,"props":159,"children":161},{"href":160},"/design-system/develop/theming",[162],{"type":23,"value":163},"theming guidance for developers",{"type":23,"value":165},".",{"title":8,"searchDepth":167,"depth":167,"links":168},2,[169,174],{"id":20,"depth":167,"text":24,"children":170},[171,173],{"id":49,"depth":172,"text":52},3,{"id":85,"depth":172,"text":88},{"id":128,"depth":167,"text":131},"markdown","content:design-system:5.components:category-grid.md","content","design-system/5.components/category-grid.md","md",{"/design-system/components/category-grid":181},[182,188],{"_path":183,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":184,"description":185,"layout":11,"label":12,"_type":175,"_id":186,"_source":177,"_file":187,"_extension":179},"/design-system/components/carousel","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","content:design-system:5.components:carousel.md","design-system/5.components/carousel.md",{"_path":189,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":190,"description":191,"layout":11,"label":12,"_type":175,"_id":192,"_source":177,"_file":193,"_extension":179},"/design-system/components/checkbox","Checkbox","The Checkbox component lets users select one or more options from a list.","content:design-system:5.components:checkbox.md","design-system/5.components/checkbox.md",{},[196,201,440],{"title":197,"_path":198,"icon":199,"layout":200},"Ripple Design System","/","carbon:home","home",{"title":202,"_path":203,"children":204},"Design System","/design-system",[205,221,236,264,298],{"title":206,"_path":207,"children":208},"About","/design-system/about",[209,212,215,218],{"title":210,"_path":211,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":213,"_path":214,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":216,"_path":217,"layout":11},"Support","/design-system/about/getting-support",{"title":219,"_path":220,"layout":11},"Contributing","/design-system/about/contributing",{"title":222,"_path":223,"children":224},"Design","/design-system/design",[225,228,231,234],{"title":226,"_path":227,"layout":11},"Getting started","/design-system/design/getting-started",{"title":229,"_path":230,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":232,"_path":233,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":235,"_path":152,"layout":11},"Theming guidance for designers",{"title":237,"_path":238,"children":239},"Develop","/design-system/develop",[240,242,244,246],{"title":226,"_path":241,"layout":11},"/design-system/develop/getting-started",{"title":219,"_path":243,"layout":11},"/design-system/develop/contributing",{"title":245,"_path":160,"layout":11},"Theme and brand application",{"title":24,"_path":247,"children":248,"layout":11},"/design-system/develop/usage",[249,252,255,258,261],{"title":250,"_path":251,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":253,"_path":254,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":256,"_path":257,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":259,"_path":260,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":262,"_path":263,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":265,"_path":266,"children":267},"Styles","/design-system/styles",[268,271,274,277,280,283,286,289,292,295],{"title":269,"_path":270,"layout":11},"Colour","/design-system/styles/colour",{"title":272,"_path":273,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":275,"_path":276,"layout":11},"Grid","/design-system/styles/grid",{"title":278,"_path":279,"layout":11},"Icons","/design-system/styles/icons",{"title":281,"_path":282,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":284,"_path":285,"layout":11},"Layout","/design-system/styles/layout",{"title":287,"_path":288,"layout":11},"Logo","/design-system/styles/logo",{"title":290,"_path":291,"layout":11},"Motion","/design-system/styles/motion",{"title":293,"_path":294,"layout":11},"Spacing","/design-system/styles/spacing",{"title":296,"_path":297,"layout":11},"Typography","/design-system/styles/typography",{"title":299,"_path":300,"children":301},"Components","/design-system/components",[302,305,308,311,314,317,320,323,326,329,332,333,334,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437],{"title":303,"_path":304,"layout":11},"Accordion","/design-system/components/accordion",{"title":306,"_path":307,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":309,"_path":310,"layout":11},"Alert","/design-system/components/alert",{"title":312,"_path":313,"layout":11},"Block quote","/design-system/components/block-quote",{"title":315,"_path":316,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":318,"_path":319,"layout":11},"Button","/design-system/components/button",{"title":321,"_path":322,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":324,"_path":325,"layout":11},"Callout","/design-system/components/callout",{"title":327,"_path":328,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":330,"_path":331,"layout":11},"Card","/design-system/components/card",{"title":184,"_path":183,"layout":11},{"title":9,"_path":5,"layout":11},{"title":190,"_path":189,"layout":11},{"title":336,"_path":337,"layout":11},"Chip","/design-system/components/chip",{"title":339,"_path":340,"layout":11},"Contact us","/design-system/components/contact-us",{"title":342,"_path":343,"layout":11},"Date input","/design-system/components/date-input",{"title":345,"_path":346,"layout":11},"Detail list","/design-system/components/detail-list",{"title":348,"_path":349,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":351,"_path":352,"layout":11},"File","/design-system/components/file",{"title":354,"_path":355,"layout":11},"Footer","/design-system/components/footer",{"title":357,"_path":358,"layout":11},"Form alert","/design-system/components/form-alert",{"title":360,"_path":361,"layout":11},"Form","/design-system/components/form",{"title":363,"_path":364,"layout":11},"Header","/design-system/components/header",{"title":366,"_path":367,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":369,"_path":370,"layout":11},"Input field","/design-system/components/input-field",{"title":372,"_path":373,"layout":11},"Key dates","/design-system/components/key-dates",{"title":375,"_path":376,"layout":11},"Media embed","/design-system/components/media-embed",{"title":378,"_path":379,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":381,"_path":382,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":384,"_path":385,"layout":11},"Media","/design-system/components/media",{"title":387,"_path":388,"layout":11},"Option button","/design-system/components/option-button",{"title":390,"_path":391,"layout":11},"Page action","/design-system/components/page-action",{"title":393,"_path":394,"layout":11},"Pagination","/design-system/components/pagination",{"title":396,"_path":397,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":399,"_path":400,"layout":11},"Profile","/design-system/components/profile",{"title":402,"_path":403,"layout":11},"Radio button","/design-system/components/radio-button",{"title":405,"_path":406,"layout":11},"Related links","/design-system/components/related-links",{"title":408,"_path":409,"layout":11},"Results listing","/design-system/components/results-listing",{"title":411,"_path":412,"layout":11},"Search bar","/design-system/components/search-bar",{"title":414,"_path":415,"layout":11},"Skip link","/design-system/components/skip-link",{"title":417,"_path":418,"layout":11},"Social share","/design-system/components/social-share",{"title":420,"_path":421,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":423,"_path":424,"layout":11},"Table","/design-system/components/table",{"title":426,"_path":427,"layout":11},"Tabs","/design-system/components/tabs",{"title":429,"_path":430,"layout":11},"Tag","/design-system/components/tag",{"title":432,"_path":433,"layout":11},"Text area","/design-system/components/text-area",{"title":435,"_path":436,"layout":11},"Timeline","/design-system/components/timeline",{"title":438,"_path":439,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":441,"_path":442,"children":443,"layout":11},"Ripple Framework","/framework",[444,445,463,485],{"title":441,"_path":442,"layout":11},{"title":446,"_path":447,"children":448},"Key Concepts","/framework/key-concepts",[449,451,454,457,460],{"title":256,"_path":450,"layout":11},"/framework/key-concepts/nuxt",{"title":452,"_path":453,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":455,"_path":456,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":458,"_path":459,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":461,"_path":462,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":464,"_path":465,"children":466},"Guides","/framework/guides",[467,470,473,476,479,482],{"title":468,"_path":469,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":471,"_path":472,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":474,"_path":475,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":477,"_path":478,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":480,"_path":481,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":483,"_path":484,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":486,"_path":487,"layout":11},"Core modules","/framework/core-modules",["Reactive",489],{"module-navigation":490},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/checkbox/index.html b/design-system/components/checkbox/index.html index ecac5297ce..dd68d4bfa6 100644 --- a/design-system/components/checkbox/index.html +++ b/design-system/components/checkbox/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Checkbox</h1><p class="rpl-type-p-large" data-v-3163c6df>The Checkbox component lets users select one or more options from a list.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use checkboxes to allow users to:<!--]--></p><ul><!--[--><li><!--[-->select one or more list options<!--]--></li><li><!--[-->toggle one option on or off.<!--]--></li><!--]--></ul><p><!--[-->Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Use checkboxes with a:<!--]--></p><ul><!--[--><li><!--[-->form label<!--]--></li><li><!--[-->optional requirement label<!--]--></li><li><!--[-->optional hint text<!--]--></li><li><!--[-->checkbox label.<!--]--></li><!--]--></ul><p><!--[-->Checkboxes should always have a form and checkbox label.<!--]--></p><h4 id="single-checkbox"><a href="#single-checkbox"><!--[-->Single checkbox<!--]--></a></h4><p><!--[-->A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented.<!--]--></p><h4 id="checkbox-group"><a href="#checkbox-group"><!--[-->Checkbox group<!--]--></a></h4><p><!--[-->Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select.<!--]--></p><p><!--[-->Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.<!--]--></p><p><!--[-->Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use checkboxes for lists with more than one selectable option.<!--]--></li><li><!--[-->Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'.<!--]--></li><li><!--[-->Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier.<!--]--></li><li><!--[-->Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use checkboxes for a single selectable list option, use radio buttons for this.<!--]--></li><li><!--[-->Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Checkboxes have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[--><strong><!--[-->Error: nothing is selected and the question has options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [options]’.<!--]--></li><li><!--[-->Example: ‘Select if you like summer, winter, autumn, and/or spring'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: nothing is selected and the question does not have options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select [options]’.<!--]--></li><li><!--[-->Example: 'Select your favourite season'.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--invalid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--invalid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->A checkbox uses colour for interactive states.<!--]--></p><p><!--[-->A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/checkbox.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/checkbox/_payload.json">[{"state":1,"_errors":697,"serverRendered":700,"path":701,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":389,"$sdd-globals":403,"$sdd-navigation":404},{"/design-system/components/checkbox":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":384,"_id":385,"_source":386,"_file":387,"_extension":388},"/design-system/components/checkbox","components",false,"","Checkbox","The Checkbox component lets users select one or more options from a list.","page","Core",{"type":14,"children":15,"toc":368},"root",[16,25,31,46,51,56,63,68,91,96,103,108,114,119,124,129,135,158,164,177,181,187,192,205,211,214,220,225,229,235,240,245,254,259,272,280,284,297,301,304,310,315,320,327,349,352,358,363],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use checkboxes to allow users to:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"select one or more list options",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"toggle one option on or off.",{"type":17,"tag":26,"props":47,"children":48},{},[49],{"type":23,"value":50},"Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead.",{"type":17,"tag":52,"props":53,"children":55},"docs-example",{"id":54},"forms-checkbox-group--default-variant",[],{"type":17,"tag":57,"props":58,"children":60},"h3",{"id":59},"how-this-component-works",[61],{"type":23,"value":62},"How this component works",{"type":17,"tag":26,"props":64,"children":65},{},[66],{"type":23,"value":67},"Use checkboxes with a:",{"type":17,"tag":32,"props":69,"children":70},{},[71,76,81,86],{"type":17,"tag":36,"props":72,"children":73},{},[74],{"type":23,"value":75},"form label",{"type":17,"tag":36,"props":77,"children":78},{},[79],{"type":23,"value":80},"optional requirement label",{"type":17,"tag":36,"props":82,"children":83},{},[84],{"type":23,"value":85},"optional hint text",{"type":17,"tag":36,"props":87,"children":88},{},[89],{"type":23,"value":90},"checkbox label.",{"type":17,"tag":26,"props":92,"children":93},{},[94],{"type":23,"value":95},"Checkboxes should always have a form and checkbox label.",{"type":17,"tag":97,"props":98,"children":100},"h4",{"id":99},"single-checkbox",[101],{"type":23,"value":102},"Single checkbox",{"type":17,"tag":26,"props":104,"children":105},{},[106],{"type":23,"value":107},"A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented.",{"type":17,"tag":97,"props":109,"children":111},{"id":110},"checkbox-group",[112],{"type":23,"value":113},"Checkbox group",{"type":17,"tag":26,"props":115,"children":116},{},[117],{"type":23,"value":118},"Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select.",{"type":17,"tag":26,"props":120,"children":121},{},[122],{"type":23,"value":123},"Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.",{"type":17,"tag":26,"props":125,"children":126},{},[127],{"type":23,"value":128},"Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’.",{"type":17,"tag":57,"props":130,"children":132},{"id":131},"when-and-how-to-use",[133],{"type":23,"value":134},"When and how to use",{"type":17,"tag":32,"props":136,"children":137},{},[138,143,148,153],{"type":17,"tag":36,"props":139,"children":140},{},[141],{"type":23,"value":142},"Use checkboxes for lists with more than one selectable option.",{"type":17,"tag":36,"props":144,"children":145},{},[146],{"type":23,"value":147},"Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'.",{"type":17,"tag":36,"props":149,"children":150},{},[151],{"type":23,"value":152},"Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier.",{"type":17,"tag":36,"props":154,"children":155},{},[156],{"type":23,"value":157},"Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common.",{"type":17,"tag":57,"props":159,"children":161},{"id":160},"when-and-how-not-to-use",[162],{"type":23,"value":163},"When and how not to use",{"type":17,"tag":32,"props":165,"children":166},{},[167,172],{"type":17,"tag":36,"props":168,"children":169},{},[170],{"type":23,"value":171},"Don't use checkboxes for a single selectable list option, use radio buttons for this.",{"type":17,"tag":36,"props":173,"children":174},{},[175],{"type":23,"value":176},"Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question.",{"type":17,"tag":178,"props":179,"children":180},"hr",{},[],{"type":17,"tag":18,"props":182,"children":184},{"id":183},"variants",[185],{"type":23,"value":186},"Variants",{"type":17,"tag":26,"props":188,"children":189},{},[190],{"type":23,"value":191},"Checkboxes have 2 variants:",{"type":17,"tag":32,"props":193,"children":194},{},[195,200],{"type":17,"tag":36,"props":196,"children":197},{},[198],{"type":23,"value":199},"default, used on white backgrounds",{"type":17,"tag":36,"props":201,"children":202},{},[203],{"type":23,"value":204},"reverse, used on neutral backgrounds.",{"type":17,"tag":57,"props":206,"children":208},{"id":207},"default",[209],{"type":23,"value":210},"Default",{"type":17,"tag":52,"props":212,"children":213},{"id":54},[],{"type":17,"tag":57,"props":215,"children":217},{"id":216},"reverse",[218],{"type":23,"value":219},"Reverse",{"type":17,"tag":26,"props":221,"children":222},{},[223],{"type":23,"value":224},"Use the reverse variant when the chip appears on the primary colour.",{"type":17,"tag":52,"props":226,"children":228},{"id":227},"forms-checkbox-group--reverse-variant",[],{"type":17,"tag":57,"props":230,"children":232},{"id":231},"error",[233],{"type":23,"value":234},"Error",{"type":17,"tag":26,"props":236,"children":237},{},[238],{"type":23,"value":239},"All form inputs share error state styling.",{"type":17,"tag":26,"props":241,"children":242},{},[243],{"type":23,"value":244},"Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":246,"children":247},{},[248],{"type":17,"tag":249,"props":250,"children":251},"strong",{},[252],{"type":23,"value":253},"Error: nothing is selected and the question has options in it",{"type":17,"tag":26,"props":255,"children":256},{},[257],{"type":23,"value":258},"Structure this message to help the user to choose which options apply to them.",{"type":17,"tag":32,"props":260,"children":261},{},[262,267],{"type":17,"tag":36,"props":263,"children":264},{},[265],{"type":23,"value":266},"Error message: ‘Select if [options]’.",{"type":17,"tag":36,"props":268,"children":269},{},[270],{"type":23,"value":271},"Example: ‘Select if you like summer, winter, autumn, and/or spring'.",{"type":17,"tag":26,"props":273,"children":274},{},[275],{"type":17,"tag":249,"props":276,"children":277},{},[278],{"type":23,"value":279},"Error: nothing is selected and the question does not have options in it",{"type":17,"tag":26,"props":281,"children":282},{},[283],{"type":23,"value":258},{"type":17,"tag":32,"props":285,"children":286},{},[287,292],{"type":17,"tag":36,"props":288,"children":289},{},[290],{"type":23,"value":291},"Error message: ‘Select [options]’.",{"type":17,"tag":36,"props":293,"children":294},{},[295],{"type":23,"value":296},"Example: 'Select your favourite season'.",{"type":17,"tag":52,"props":298,"children":300},{"id":299},"forms-checkbox-group--invalid",[],{"type":17,"tag":178,"props":302,"children":303},{},[],{"type":17,"tag":18,"props":305,"children":307},{"id":306},"theming",[308],{"type":23,"value":309},"Theming",{"type":17,"tag":26,"props":311,"children":312},{},[313],{"type":23,"value":314},"A checkbox uses colour for interactive states.",{"type":17,"tag":26,"props":316,"children":317},{},[318],{"type":23,"value":319},"A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":321,"props":322,"children":323},"docs-theme-chooser",{},[324],{"type":17,"tag":52,"props":325,"children":326},{"id":54},[],{"type":17,"tag":26,"props":328,"children":329},{},[330,332,339,341,347],{"type":23,"value":331},"To create your own theme see ",{"type":17,"tag":333,"props":334,"children":336},"a",{"href":335},"/design-system/design/theming-guidance-for-designers",[337],{"type":23,"value":338},"theming guidance for designers",{"type":23,"value":340}," or ",{"type":17,"tag":333,"props":342,"children":344},{"href":343},"/design-system/develop/theming",[345],{"type":23,"value":346},"theming guidance for developers",{"type":23,"value":348},".",{"type":17,"tag":178,"props":350,"children":351},{},[],{"type":17,"tag":18,"props":353,"children":355},{"id":354},"rationale",[356],{"type":23,"value":357},"Rationale",{"type":17,"tag":26,"props":359,"children":360},{},[361],{"type":23,"value":362},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":364,"children":365},{},[366],{"type":23,"value":367},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":369,"depth":369,"links":370},2,[371,377,382,383],{"id":20,"depth":369,"text":24,"children":372},[373,375,376],{"id":59,"depth":374,"text":62},3,{"id":131,"depth":374,"text":134},{"id":160,"depth":374,"text":163},{"id":183,"depth":369,"text":186,"children":378},[379,380,381],{"id":207,"depth":374,"text":210},{"id":216,"depth":374,"text":219},{"id":231,"depth":374,"text":234},{"id":306,"depth":369,"text":309},{"id":354,"depth":369,"text":357},"markdown","content:design-system:5.components:checkbox.md","content","design-system/5.components/checkbox.md","md",{"/design-system/components/checkbox":390},[391,397],{"_path":392,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":393,"description":394,"layout":11,"label":12,"_type":384,"_id":395,"_source":386,"_file":396,"_extension":388},"/design-system/components/category-grid","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","content:design-system:5.components:category-grid.md","design-system/5.components/category-grid.md",{"_path":398,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":399,"description":400,"layout":11,"label":12,"_type":384,"_id":401,"_source":386,"_file":402,"_extension":388},"/design-system/components/chip","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","content:design-system:5.components:chip.md","design-system/5.components/chip.md",{},[405,410,649],{"title":406,"_path":407,"icon":408,"layout":409},"Ripple Design System","/","carbon:home","home",{"title":411,"_path":412,"children":413},"Design System","/design-system",[414,430,445,473,507],{"title":415,"_path":416,"children":417},"About","/design-system/about",[418,421,424,427],{"title":419,"_path":420,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":422,"_path":423,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":425,"_path":426,"layout":11},"Support","/design-system/about/getting-support",{"title":428,"_path":429,"layout":11},"Contributing","/design-system/about/contributing",{"title":431,"_path":432,"children":433},"Design","/design-system/design",[434,437,440,443],{"title":435,"_path":436,"layout":11},"Getting started","/design-system/design/getting-started",{"title":438,"_path":439,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":441,"_path":442,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":444,"_path":335,"layout":11},"Theming guidance for designers",{"title":446,"_path":447,"children":448},"Develop","/design-system/develop",[449,451,453,455],{"title":435,"_path":450,"layout":11},"/design-system/develop/getting-started",{"title":428,"_path":452,"layout":11},"/design-system/develop/contributing",{"title":454,"_path":343,"layout":11},"Theme and brand application",{"title":24,"_path":456,"children":457,"layout":11},"/design-system/develop/usage",[458,461,464,467,470],{"title":459,"_path":460,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":462,"_path":463,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":465,"_path":466,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":468,"_path":469,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":471,"_path":472,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":474,"_path":475,"children":476},"Styles","/design-system/styles",[477,480,483,486,489,492,495,498,501,504],{"title":478,"_path":479,"layout":11},"Colour","/design-system/styles/colour",{"title":481,"_path":482,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":484,"_path":485,"layout":11},"Grid","/design-system/styles/grid",{"title":487,"_path":488,"layout":11},"Icons","/design-system/styles/icons",{"title":490,"_path":491,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":493,"_path":494,"layout":11},"Layout","/design-system/styles/layout",{"title":496,"_path":497,"layout":11},"Logo","/design-system/styles/logo",{"title":499,"_path":500,"layout":11},"Motion","/design-system/styles/motion",{"title":502,"_path":503,"layout":11},"Spacing","/design-system/styles/spacing",{"title":505,"_path":506,"layout":11},"Typography","/design-system/styles/typography",{"title":508,"_path":509,"children":510},"Components","/design-system/components",[511,514,517,520,523,526,529,532,535,538,541,544,545,546,547,550,553,556,559,562,565,568,571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646],{"title":512,"_path":513,"layout":11},"Accordion","/design-system/components/accordion",{"title":515,"_path":516,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":518,"_path":519,"layout":11},"Alert","/design-system/components/alert",{"title":521,"_path":522,"layout":11},"Block quote","/design-system/components/block-quote",{"title":524,"_path":525,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":527,"_path":528,"layout":11},"Button","/design-system/components/button",{"title":530,"_path":531,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":533,"_path":534,"layout":11},"Callout","/design-system/components/callout",{"title":536,"_path":537,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":539,"_path":540,"layout":11},"Card","/design-system/components/card",{"title":542,"_path":543,"layout":11},"Carousel","/design-system/components/carousel",{"title":393,"_path":392,"layout":11},{"title":9,"_path":5,"layout":11},{"title":399,"_path":398,"layout":11},{"title":548,"_path":549,"layout":11},"Contact us","/design-system/components/contact-us",{"title":551,"_path":552,"layout":11},"Date input","/design-system/components/date-input",{"title":554,"_path":555,"layout":11},"Detail list","/design-system/components/detail-list",{"title":557,"_path":558,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":560,"_path":561,"layout":11},"File","/design-system/components/file",{"title":563,"_path":564,"layout":11},"Footer","/design-system/components/footer",{"title":566,"_path":567,"layout":11},"Form alert","/design-system/components/form-alert",{"title":569,"_path":570,"layout":11},"Form","/design-system/components/form",{"title":572,"_path":573,"layout":11},"Header","/design-system/components/header",{"title":575,"_path":576,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":578,"_path":579,"layout":11},"Input field","/design-system/components/input-field",{"title":581,"_path":582,"layout":11},"Key dates","/design-system/components/key-dates",{"title":584,"_path":585,"layout":11},"Media embed","/design-system/components/media-embed",{"title":587,"_path":588,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":590,"_path":591,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":593,"_path":594,"layout":11},"Media","/design-system/components/media",{"title":596,"_path":597,"layout":11},"Option button","/design-system/components/option-button",{"title":599,"_path":600,"layout":11},"Page action","/design-system/components/page-action",{"title":602,"_path":603,"layout":11},"Pagination","/design-system/components/pagination",{"title":605,"_path":606,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":608,"_path":609,"layout":11},"Profile","/design-system/components/profile",{"title":611,"_path":612,"layout":11},"Radio button","/design-system/components/radio-button",{"title":614,"_path":615,"layout":11},"Related links","/design-system/components/related-links",{"title":617,"_path":618,"layout":11},"Results listing","/design-system/components/results-listing",{"title":620,"_path":621,"layout":11},"Search bar","/design-system/components/search-bar",{"title":623,"_path":624,"layout":11},"Skip link","/design-system/components/skip-link",{"title":626,"_path":627,"layout":11},"Social share","/design-system/components/social-share",{"title":629,"_path":630,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":632,"_path":633,"layout":11},"Table","/design-system/components/table",{"title":635,"_path":636,"layout":11},"Tabs","/design-system/components/tabs",{"title":638,"_path":639,"layout":11},"Tag","/design-system/components/tag",{"title":641,"_path":642,"layout":11},"Text area","/design-system/components/text-area",{"title":644,"_path":645,"layout":11},"Timeline","/design-system/components/timeline",{"title":647,"_path":648,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":650,"_path":651,"children":652,"layout":11},"Ripple Framework","/framework",[653,654,672,694],{"title":650,"_path":651,"layout":11},{"title":655,"_path":656,"children":657},"Key Concepts","/framework/key-concepts",[658,660,663,666,669],{"title":465,"_path":659,"layout":11},"/framework/key-concepts/nuxt",{"title":661,"_path":662,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":664,"_path":665,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":667,"_path":668,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":670,"_path":671,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":673,"_path":674,"children":675},"Guides","/framework/guides",[676,679,682,685,688,691],{"title":677,"_path":678,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":680,"_path":681,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":683,"_path":684,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":686,"_path":687,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":689,"_path":690,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":692,"_path":693,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":695,"_path":696,"layout":11},"Core modules","/framework/core-modules",["Reactive",698],{"module-navigation":699},null,true,"/design-system/components/checkbox/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Checkbox</h1><p class="rpl-type-p-large" data-v-3163c6df>The Checkbox component lets users select one or more options from a list.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use checkboxes to allow users to:<!--]--></p><ul><!--[--><li><!--[-->select one or more list options<!--]--></li><li><!--[-->toggle one option on or off.<!--]--></li><!--]--></ul><p><!--[-->Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Use checkboxes with a:<!--]--></p><ul><!--[--><li><!--[-->form label<!--]--></li><li><!--[-->optional requirement label<!--]--></li><li><!--[-->optional hint text<!--]--></li><li><!--[-->checkbox label.<!--]--></li><!--]--></ul><p><!--[-->Checkboxes should always have a form and checkbox label.<!--]--></p><h4 id="single-checkbox"><a href="#single-checkbox"><!--[-->Single checkbox<!--]--></a></h4><p><!--[-->A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented.<!--]--></p><h4 id="checkbox-group"><a href="#checkbox-group"><!--[-->Checkbox group<!--]--></a></h4><p><!--[-->Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select.<!--]--></p><p><!--[-->Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.<!--]--></p><p><!--[-->Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use checkboxes for lists with more than one selectable option.<!--]--></li><li><!--[-->Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'.<!--]--></li><li><!--[-->Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier.<!--]--></li><li><!--[-->Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use checkboxes for a single selectable list option, use radio buttons for this.<!--]--></li><li><!--[-->Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Checkboxes have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[--><strong><!--[-->Error: nothing is selected and the question has options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [options]’.<!--]--></li><li><!--[-->Example: ‘Select if you like summer, winter, autumn, and/or spring'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: nothing is selected and the question does not have options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select [options]’.<!--]--></li><li><!--[-->Example: 'Select your favourite season'.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--invalid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--invalid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->A checkbox uses colour for interactive states.<!--]--></p><p><!--[-->A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/checkbox.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/checkbox/_payload.json">[{"state":1,"_errors":697,"serverRendered":700,"path":701,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":389,"$sdd-globals":403,"$sdd-navigation":404},{"/design-system/components/checkbox":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":384,"_id":385,"_source":386,"_file":387,"_extension":388},"/design-system/components/checkbox","components",false,"","Checkbox","The Checkbox component lets users select one or more options from a list.","page","Core",{"type":14,"children":15,"toc":368},"root",[16,25,31,46,51,56,63,68,91,96,103,108,114,119,124,129,135,158,164,177,181,187,192,205,211,214,220,225,229,235,240,245,254,259,272,280,284,297,301,304,310,315,320,327,349,352,358,363],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use checkboxes to allow users to:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"select one or more list options",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"toggle one option on or off.",{"type":17,"tag":26,"props":47,"children":48},{},[49],{"type":23,"value":50},"Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead.",{"type":17,"tag":52,"props":53,"children":55},"docs-example",{"id":54},"forms-checkbox-group--default-variant",[],{"type":17,"tag":57,"props":58,"children":60},"h3",{"id":59},"how-this-component-works",[61],{"type":23,"value":62},"How this component works",{"type":17,"tag":26,"props":64,"children":65},{},[66],{"type":23,"value":67},"Use checkboxes with a:",{"type":17,"tag":32,"props":69,"children":70},{},[71,76,81,86],{"type":17,"tag":36,"props":72,"children":73},{},[74],{"type":23,"value":75},"form label",{"type":17,"tag":36,"props":77,"children":78},{},[79],{"type":23,"value":80},"optional requirement label",{"type":17,"tag":36,"props":82,"children":83},{},[84],{"type":23,"value":85},"optional hint text",{"type":17,"tag":36,"props":87,"children":88},{},[89],{"type":23,"value":90},"checkbox label.",{"type":17,"tag":26,"props":92,"children":93},{},[94],{"type":23,"value":95},"Checkboxes should always have a form and checkbox label.",{"type":17,"tag":97,"props":98,"children":100},"h4",{"id":99},"single-checkbox",[101],{"type":23,"value":102},"Single checkbox",{"type":17,"tag":26,"props":104,"children":105},{},[106],{"type":23,"value":107},"A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented.",{"type":17,"tag":97,"props":109,"children":111},{"id":110},"checkbox-group",[112],{"type":23,"value":113},"Checkbox group",{"type":17,"tag":26,"props":115,"children":116},{},[117],{"type":23,"value":118},"Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select.",{"type":17,"tag":26,"props":120,"children":121},{},[122],{"type":23,"value":123},"Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.",{"type":17,"tag":26,"props":125,"children":126},{},[127],{"type":23,"value":128},"Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’.",{"type":17,"tag":57,"props":130,"children":132},{"id":131},"when-and-how-to-use",[133],{"type":23,"value":134},"When and how to use",{"type":17,"tag":32,"props":136,"children":137},{},[138,143,148,153],{"type":17,"tag":36,"props":139,"children":140},{},[141],{"type":23,"value":142},"Use checkboxes for lists with more than one selectable option.",{"type":17,"tag":36,"props":144,"children":145},{},[146],{"type":23,"value":147},"Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'.",{"type":17,"tag":36,"props":149,"children":150},{},[151],{"type":23,"value":152},"Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier.",{"type":17,"tag":36,"props":154,"children":155},{},[156],{"type":23,"value":157},"Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common.",{"type":17,"tag":57,"props":159,"children":161},{"id":160},"when-and-how-not-to-use",[162],{"type":23,"value":163},"When and how not to use",{"type":17,"tag":32,"props":165,"children":166},{},[167,172],{"type":17,"tag":36,"props":168,"children":169},{},[170],{"type":23,"value":171},"Don't use checkboxes for a single selectable list option, use radio buttons for this.",{"type":17,"tag":36,"props":173,"children":174},{},[175],{"type":23,"value":176},"Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question.",{"type":17,"tag":178,"props":179,"children":180},"hr",{},[],{"type":17,"tag":18,"props":182,"children":184},{"id":183},"variants",[185],{"type":23,"value":186},"Variants",{"type":17,"tag":26,"props":188,"children":189},{},[190],{"type":23,"value":191},"Checkboxes have 2 variants:",{"type":17,"tag":32,"props":193,"children":194},{},[195,200],{"type":17,"tag":36,"props":196,"children":197},{},[198],{"type":23,"value":199},"default, used on white backgrounds",{"type":17,"tag":36,"props":201,"children":202},{},[203],{"type":23,"value":204},"reverse, used on neutral backgrounds.",{"type":17,"tag":57,"props":206,"children":208},{"id":207},"default",[209],{"type":23,"value":210},"Default",{"type":17,"tag":52,"props":212,"children":213},{"id":54},[],{"type":17,"tag":57,"props":215,"children":217},{"id":216},"reverse",[218],{"type":23,"value":219},"Reverse",{"type":17,"tag":26,"props":221,"children":222},{},[223],{"type":23,"value":224},"Use the reverse variant when the chip appears on the primary colour.",{"type":17,"tag":52,"props":226,"children":228},{"id":227},"forms-checkbox-group--reverse-variant",[],{"type":17,"tag":57,"props":230,"children":232},{"id":231},"error",[233],{"type":23,"value":234},"Error",{"type":17,"tag":26,"props":236,"children":237},{},[238],{"type":23,"value":239},"All form inputs share error state styling.",{"type":17,"tag":26,"props":241,"children":242},{},[243],{"type":23,"value":244},"Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":246,"children":247},{},[248],{"type":17,"tag":249,"props":250,"children":251},"strong",{},[252],{"type":23,"value":253},"Error: nothing is selected and the question has options in it",{"type":17,"tag":26,"props":255,"children":256},{},[257],{"type":23,"value":258},"Structure this message to help the user to choose which options apply to them.",{"type":17,"tag":32,"props":260,"children":261},{},[262,267],{"type":17,"tag":36,"props":263,"children":264},{},[265],{"type":23,"value":266},"Error message: ‘Select if [options]’.",{"type":17,"tag":36,"props":268,"children":269},{},[270],{"type":23,"value":271},"Example: ‘Select if you like summer, winter, autumn, and/or spring'.",{"type":17,"tag":26,"props":273,"children":274},{},[275],{"type":17,"tag":249,"props":276,"children":277},{},[278],{"type":23,"value":279},"Error: nothing is selected and the question does not have options in it",{"type":17,"tag":26,"props":281,"children":282},{},[283],{"type":23,"value":258},{"type":17,"tag":32,"props":285,"children":286},{},[287,292],{"type":17,"tag":36,"props":288,"children":289},{},[290],{"type":23,"value":291},"Error message: ‘Select [options]’.",{"type":17,"tag":36,"props":293,"children":294},{},[295],{"type":23,"value":296},"Example: 'Select your favourite season'.",{"type":17,"tag":52,"props":298,"children":300},{"id":299},"forms-checkbox-group--invalid",[],{"type":17,"tag":178,"props":302,"children":303},{},[],{"type":17,"tag":18,"props":305,"children":307},{"id":306},"theming",[308],{"type":23,"value":309},"Theming",{"type":17,"tag":26,"props":311,"children":312},{},[313],{"type":23,"value":314},"A checkbox uses colour for interactive states.",{"type":17,"tag":26,"props":316,"children":317},{},[318],{"type":23,"value":319},"A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":321,"props":322,"children":323},"docs-theme-chooser",{},[324],{"type":17,"tag":52,"props":325,"children":326},{"id":54},[],{"type":17,"tag":26,"props":328,"children":329},{},[330,332,339,341,347],{"type":23,"value":331},"To create your own theme see ",{"type":17,"tag":333,"props":334,"children":336},"a",{"href":335},"/design-system/design/theming-guidance-for-designers",[337],{"type":23,"value":338},"theming guidance for designers",{"type":23,"value":340}," or ",{"type":17,"tag":333,"props":342,"children":344},{"href":343},"/design-system/develop/theming",[345],{"type":23,"value":346},"theming guidance for developers",{"type":23,"value":348},".",{"type":17,"tag":178,"props":350,"children":351},{},[],{"type":17,"tag":18,"props":353,"children":355},{"id":354},"rationale",[356],{"type":23,"value":357},"Rationale",{"type":17,"tag":26,"props":359,"children":360},{},[361],{"type":23,"value":362},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":364,"children":365},{},[366],{"type":23,"value":367},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":369,"depth":369,"links":370},2,[371,377,382,383],{"id":20,"depth":369,"text":24,"children":372},[373,375,376],{"id":59,"depth":374,"text":62},3,{"id":131,"depth":374,"text":134},{"id":160,"depth":374,"text":163},{"id":183,"depth":369,"text":186,"children":378},[379,380,381],{"id":207,"depth":374,"text":210},{"id":216,"depth":374,"text":219},{"id":231,"depth":374,"text":234},{"id":306,"depth":369,"text":309},{"id":354,"depth":369,"text":357},"markdown","content:design-system:5.components:checkbox.md","content","design-system/5.components/checkbox.md","md",{"/design-system/components/checkbox":390},[391,397],{"_path":392,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":393,"description":394,"layout":11,"label":12,"_type":384,"_id":395,"_source":386,"_file":396,"_extension":388},"/design-system/components/category-grid","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","content:design-system:5.components:category-grid.md","design-system/5.components/category-grid.md",{"_path":398,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":399,"description":400,"layout":11,"label":12,"_type":384,"_id":401,"_source":386,"_file":402,"_extension":388},"/design-system/components/chip","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","content:design-system:5.components:chip.md","design-system/5.components/chip.md",{},[405,410,649],{"title":406,"_path":407,"icon":408,"layout":409},"Ripple Design System","/","carbon:home","home",{"title":411,"_path":412,"children":413},"Design System","/design-system",[414,430,445,473,507],{"title":415,"_path":416,"children":417},"About","/design-system/about",[418,421,424,427],{"title":419,"_path":420,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":422,"_path":423,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":425,"_path":426,"layout":11},"Support","/design-system/about/getting-support",{"title":428,"_path":429,"layout":11},"Contributing","/design-system/about/contributing",{"title":431,"_path":432,"children":433},"Design","/design-system/design",[434,437,440,443],{"title":435,"_path":436,"layout":11},"Getting started","/design-system/design/getting-started",{"title":438,"_path":439,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":441,"_path":442,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":444,"_path":335,"layout":11},"Theming guidance for designers",{"title":446,"_path":447,"children":448},"Develop","/design-system/develop",[449,451,453,455],{"title":435,"_path":450,"layout":11},"/design-system/develop/getting-started",{"title":428,"_path":452,"layout":11},"/design-system/develop/contributing",{"title":454,"_path":343,"layout":11},"Theme and brand application",{"title":24,"_path":456,"children":457,"layout":11},"/design-system/develop/usage",[458,461,464,467,470],{"title":459,"_path":460,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":462,"_path":463,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":465,"_path":466,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":468,"_path":469,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":471,"_path":472,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":474,"_path":475,"children":476},"Styles","/design-system/styles",[477,480,483,486,489,492,495,498,501,504],{"title":478,"_path":479,"layout":11},"Colour","/design-system/styles/colour",{"title":481,"_path":482,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":484,"_path":485,"layout":11},"Grid","/design-system/styles/grid",{"title":487,"_path":488,"layout":11},"Icons","/design-system/styles/icons",{"title":490,"_path":491,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":493,"_path":494,"layout":11},"Layout","/design-system/styles/layout",{"title":496,"_path":497,"layout":11},"Logo","/design-system/styles/logo",{"title":499,"_path":500,"layout":11},"Motion","/design-system/styles/motion",{"title":502,"_path":503,"layout":11},"Spacing","/design-system/styles/spacing",{"title":505,"_path":506,"layout":11},"Typography","/design-system/styles/typography",{"title":508,"_path":509,"children":510},"Components","/design-system/components",[511,514,517,520,523,526,529,532,535,538,541,544,545,546,547,550,553,556,559,562,565,568,571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646],{"title":512,"_path":513,"layout":11},"Accordion","/design-system/components/accordion",{"title":515,"_path":516,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":518,"_path":519,"layout":11},"Alert","/design-system/components/alert",{"title":521,"_path":522,"layout":11},"Block quote","/design-system/components/block-quote",{"title":524,"_path":525,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":527,"_path":528,"layout":11},"Button","/design-system/components/button",{"title":530,"_path":531,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":533,"_path":534,"layout":11},"Callout","/design-system/components/callout",{"title":536,"_path":537,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":539,"_path":540,"layout":11},"Card","/design-system/components/card",{"title":542,"_path":543,"layout":11},"Carousel","/design-system/components/carousel",{"title":393,"_path":392,"layout":11},{"title":9,"_path":5,"layout":11},{"title":399,"_path":398,"layout":11},{"title":548,"_path":549,"layout":11},"Contact us","/design-system/components/contact-us",{"title":551,"_path":552,"layout":11},"Date input","/design-system/components/date-input",{"title":554,"_path":555,"layout":11},"Detail list","/design-system/components/detail-list",{"title":557,"_path":558,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":560,"_path":561,"layout":11},"File","/design-system/components/file",{"title":563,"_path":564,"layout":11},"Footer","/design-system/components/footer",{"title":566,"_path":567,"layout":11},"Form alert","/design-system/components/form-alert",{"title":569,"_path":570,"layout":11},"Form","/design-system/components/form",{"title":572,"_path":573,"layout":11},"Header","/design-system/components/header",{"title":575,"_path":576,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":578,"_path":579,"layout":11},"Input field","/design-system/components/input-field",{"title":581,"_path":582,"layout":11},"Key dates","/design-system/components/key-dates",{"title":584,"_path":585,"layout":11},"Media embed","/design-system/components/media-embed",{"title":587,"_path":588,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":590,"_path":591,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":593,"_path":594,"layout":11},"Media","/design-system/components/media",{"title":596,"_path":597,"layout":11},"Option button","/design-system/components/option-button",{"title":599,"_path":600,"layout":11},"Page action","/design-system/components/page-action",{"title":602,"_path":603,"layout":11},"Pagination","/design-system/components/pagination",{"title":605,"_path":606,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":608,"_path":609,"layout":11},"Profile","/design-system/components/profile",{"title":611,"_path":612,"layout":11},"Radio button","/design-system/components/radio-button",{"title":614,"_path":615,"layout":11},"Related links","/design-system/components/related-links",{"title":617,"_path":618,"layout":11},"Results listing","/design-system/components/results-listing",{"title":620,"_path":621,"layout":11},"Search bar","/design-system/components/search-bar",{"title":623,"_path":624,"layout":11},"Skip link","/design-system/components/skip-link",{"title":626,"_path":627,"layout":11},"Social share","/design-system/components/social-share",{"title":629,"_path":630,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":632,"_path":633,"layout":11},"Table","/design-system/components/table",{"title":635,"_path":636,"layout":11},"Tabs","/design-system/components/tabs",{"title":638,"_path":639,"layout":11},"Tag","/design-system/components/tag",{"title":641,"_path":642,"layout":11},"Text area","/design-system/components/text-area",{"title":644,"_path":645,"layout":11},"Timeline","/design-system/components/timeline",{"title":647,"_path":648,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":650,"_path":651,"children":652,"layout":11},"Ripple Framework","/framework",[653,654,672,694],{"title":650,"_path":651,"layout":11},{"title":655,"_path":656,"children":657},"Key Concepts","/framework/key-concepts",[658,660,663,666,669],{"title":465,"_path":659,"layout":11},"/framework/key-concepts/nuxt",{"title":661,"_path":662,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":664,"_path":665,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":667,"_path":668,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":670,"_path":671,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":673,"_path":674,"children":675},"Guides","/framework/guides",[676,679,682,685,688,691],{"title":677,"_path":678,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":680,"_path":681,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":683,"_path":684,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":686,"_path":687,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":689,"_path":690,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":692,"_path":693,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":695,"_path":696,"layout":11},"Core modules","/framework/core-modules",["Reactive",698],{"module-navigation":699},null,true,"/design-system/components/checkbox/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/chip/index.html b/design-system/components/chip/index.html index 3cc71a2c79..ac7e6aa7b4 100644 --- a/design-system/components/chip/index.html +++ b/design-system/components/chip/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Chip</h1><p class="rpl-type-p-large" data-v-3163c6df>The Chip component is an interactive element to draw a user’s user attention to a category.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts.<!--]--></p><p><!--[-->A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily.<!--]--></p><p><!--[-->When displaying multiple chips together, place them in a row.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Include keywords.<!--]--></li><li><!--[-->Use on any content page.<!--]--></li><li><!--[-->Link through to the topic page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t include punctuation.<!--]--></li><li><!--[-->Don’t use as a heading.<!--]--></li><li><!--[-->Don’t include more than 4 words.<!--]--></li><li><!--[-->Don’t use without an interaction or link.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="chips-or-buttons"><a href="#chips-or-buttons"><!--[-->Chips or buttons?<!--]--></a></h2><p><!--[-->While chips and buttons both prompt calls to action, they are different.<!--]--></p><p><!--[-->Multiple chips should all sit together. Buttons should sit separately from each other.<!--]--></p><p><!--[-->Chips react to their context, but buttons are fixed and remain static.<!--]--></p><p><!--[-->Chips convey forking paths in a user experience, while buttons show a linear step.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The chip has a default and reverse variant, allowing flexible use across a range of backgrounds.<!--]--></p><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-chip--reversed&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--reversed&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming.<!--]--></p><p><!--[-->If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/chip.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/chip/_payload.json">[{"state":1,"_errors":545,"serverRendered":548,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":237,"$sdd-globals":251,"$sdd-navigation":252},{"/design-system/components/chip":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":232,"_id":233,"_source":234,"_file":235,"_extension":236},"/design-system/components/chip","components",false,"","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","page","Core",{"type":14,"children":15,"toc":218},"root",[16,25,31,36,41,46,53,73,79,102,106,112,117,122,127,132,135,141,146,152,155,161,166,170,173,179,184,189,196],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"When displaying multiple chips together, place them in a row.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-navigation-chip--default-story",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Include keywords.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Use on any content page.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Link through to the topic page.",{"type":17,"tag":47,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":54,"props":80,"children":81},{},[82,87,92,97],{"type":17,"tag":58,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don’t include punctuation.",{"type":17,"tag":58,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don’t use as a heading.",{"type":17,"tag":58,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don’t include more than 4 words.",{"type":17,"tag":58,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t use without an interaction or link.",{"type":17,"tag":103,"props":104,"children":105},"hr",{},[],{"type":17,"tag":18,"props":107,"children":109},{"id":108},"chips-or-buttons",[110],{"type":23,"value":111},"Chips or buttons?",{"type":17,"tag":26,"props":113,"children":114},{},[115],{"type":23,"value":116},"While chips and buttons both prompt calls to action, they are different.",{"type":17,"tag":26,"props":118,"children":119},{},[120],{"type":23,"value":121},"Multiple chips should all sit together. Buttons should sit separately from each other.",{"type":17,"tag":26,"props":123,"children":124},{},[125],{"type":23,"value":126},"Chips react to their context, but buttons are fixed and remain static.",{"type":17,"tag":26,"props":128,"children":129},{},[130],{"type":23,"value":131},"Chips convey forking paths in a user experience, while buttons show a linear step.",{"type":17,"tag":103,"props":133,"children":134},{},[],{"type":17,"tag":18,"props":136,"children":138},{"id":137},"variants",[139],{"type":23,"value":140},"Variants",{"type":17,"tag":26,"props":142,"children":143},{},[144],{"type":23,"value":145},"The chip has a default and reverse variant, allowing flexible use across a range of backgrounds.",{"type":17,"tag":47,"props":147,"children":149},{"id":148},"default",[150],{"type":23,"value":151},"Default",{"type":17,"tag":42,"props":153,"children":154},{"id":44},[],{"type":17,"tag":47,"props":156,"children":158},{"id":157},"reverse",[159],{"type":23,"value":160},"Reverse",{"type":17,"tag":26,"props":162,"children":163},{},[164],{"type":23,"value":165},"Use the reverse variant when the chip appears on the primary colour.",{"type":17,"tag":42,"props":167,"children":169},{"id":168},"core-navigation-chip--reversed",[],{"type":17,"tag":103,"props":171,"children":172},{},[],{"type":17,"tag":18,"props":174,"children":176},{"id":175},"theming",[177],{"type":23,"value":178},"Theming",{"type":17,"tag":26,"props":180,"children":181},{},[182],{"type":23,"value":183},"The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming.",{"type":17,"tag":26,"props":185,"children":186},{},[187],{"type":23,"value":188},"If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour.",{"type":17,"tag":190,"props":191,"children":192},"docs-theme-chooser",{},[193],{"type":17,"tag":42,"props":194,"children":195},{"id":44},[],{"type":17,"tag":26,"props":197,"children":198},{},[199,201,208,210,216],{"type":23,"value":200},"To create your own theme see ",{"type":17,"tag":202,"props":203,"children":205},"a",{"href":204},"/design-system/design/theming-guidance-for-designers",[206],{"type":23,"value":207},"theming guidance for designers",{"type":23,"value":209}," or ",{"type":17,"tag":202,"props":211,"children":213},{"href":212},"/design-system/develop/theming",[214],{"type":23,"value":215},"theming guidance for developers",{"type":23,"value":217},".",{"title":8,"searchDepth":219,"depth":219,"links":220},2,[221,226,227,231],{"id":20,"depth":219,"text":24,"children":222},[223,225],{"id":49,"depth":224,"text":52},3,{"id":75,"depth":224,"text":78},{"id":108,"depth":219,"text":111},{"id":137,"depth":219,"text":140,"children":228},[229,230],{"id":148,"depth":224,"text":151},{"id":157,"depth":224,"text":160},{"id":175,"depth":219,"text":178},"markdown","content:design-system:5.components:chip.md","content","design-system/5.components/chip.md","md",{"/design-system/components/chip":238},[239,245],{"_path":240,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":241,"description":242,"layout":11,"label":12,"_type":232,"_id":243,"_source":234,"_file":244,"_extension":236},"/design-system/components/checkbox","Checkbox","The Checkbox component lets users select one or more options from a list.","content:design-system:5.components:checkbox.md","design-system/5.components/checkbox.md",{"_path":246,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":247,"description":248,"layout":11,"label":12,"_type":232,"_id":249,"_source":234,"_file":250,"_extension":236},"/design-system/components/contact-us","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","content:design-system:5.components:contact-us.md","design-system/5.components/contact-us.md",{},[253,258,497],{"title":254,"_path":255,"icon":256,"layout":257},"Ripple Design System","/","carbon:home","home",{"title":259,"_path":260,"children":261},"Design System","/design-system",[262,278,293,321,355],{"title":263,"_path":264,"children":265},"About","/design-system/about",[266,269,272,275],{"title":267,"_path":268,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":270,"_path":271,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":273,"_path":274,"layout":11},"Support","/design-system/about/getting-support",{"title":276,"_path":277,"layout":11},"Contributing","/design-system/about/contributing",{"title":279,"_path":280,"children":281},"Design","/design-system/design",[282,285,288,291],{"title":283,"_path":284,"layout":11},"Getting started","/design-system/design/getting-started",{"title":286,"_path":287,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":289,"_path":290,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":292,"_path":204,"layout":11},"Theming guidance for designers",{"title":294,"_path":295,"children":296},"Develop","/design-system/develop",[297,299,301,303],{"title":283,"_path":298,"layout":11},"/design-system/develop/getting-started",{"title":276,"_path":300,"layout":11},"/design-system/develop/contributing",{"title":302,"_path":212,"layout":11},"Theme and brand application",{"title":24,"_path":304,"children":305,"layout":11},"/design-system/develop/usage",[306,309,312,315,318],{"title":307,"_path":308,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":310,"_path":311,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":313,"_path":314,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":316,"_path":317,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":319,"_path":320,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":322,"_path":323,"children":324},"Styles","/design-system/styles",[325,328,331,334,337,340,343,346,349,352],{"title":326,"_path":327,"layout":11},"Colour","/design-system/styles/colour",{"title":329,"_path":330,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":332,"_path":333,"layout":11},"Grid","/design-system/styles/grid",{"title":335,"_path":336,"layout":11},"Icons","/design-system/styles/icons",{"title":338,"_path":339,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":341,"_path":342,"layout":11},"Layout","/design-system/styles/layout",{"title":344,"_path":345,"layout":11},"Logo","/design-system/styles/logo",{"title":347,"_path":348,"layout":11},"Motion","/design-system/styles/motion",{"title":350,"_path":351,"layout":11},"Spacing","/design-system/styles/spacing",{"title":353,"_path":354,"layout":11},"Typography","/design-system/styles/typography",{"title":356,"_path":357,"children":358},"Components","/design-system/components",[359,362,365,368,371,374,377,380,383,386,389,392,395,396,397,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494],{"title":360,"_path":361,"layout":11},"Accordion","/design-system/components/accordion",{"title":363,"_path":364,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":366,"_path":367,"layout":11},"Alert","/design-system/components/alert",{"title":369,"_path":370,"layout":11},"Block quote","/design-system/components/block-quote",{"title":372,"_path":373,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":375,"_path":376,"layout":11},"Button","/design-system/components/button",{"title":378,"_path":379,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":381,"_path":382,"layout":11},"Callout","/design-system/components/callout",{"title":384,"_path":385,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":387,"_path":388,"layout":11},"Card","/design-system/components/card",{"title":390,"_path":391,"layout":11},"Carousel","/design-system/components/carousel",{"title":393,"_path":394,"layout":11},"Category grid","/design-system/components/category-grid",{"title":241,"_path":240,"layout":11},{"title":9,"_path":5,"layout":11},{"title":247,"_path":246,"layout":11},{"title":399,"_path":400,"layout":11},"Date input","/design-system/components/date-input",{"title":402,"_path":403,"layout":11},"Detail list","/design-system/components/detail-list",{"title":405,"_path":406,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":408,"_path":409,"layout":11},"File","/design-system/components/file",{"title":411,"_path":412,"layout":11},"Footer","/design-system/components/footer",{"title":414,"_path":415,"layout":11},"Form alert","/design-system/components/form-alert",{"title":417,"_path":418,"layout":11},"Form","/design-system/components/form",{"title":420,"_path":421,"layout":11},"Header","/design-system/components/header",{"title":423,"_path":424,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":426,"_path":427,"layout":11},"Input field","/design-system/components/input-field",{"title":429,"_path":430,"layout":11},"Key dates","/design-system/components/key-dates",{"title":432,"_path":433,"layout":11},"Media embed","/design-system/components/media-embed",{"title":435,"_path":436,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":438,"_path":439,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":441,"_path":442,"layout":11},"Media","/design-system/components/media",{"title":444,"_path":445,"layout":11},"Option button","/design-system/components/option-button",{"title":447,"_path":448,"layout":11},"Page action","/design-system/components/page-action",{"title":450,"_path":451,"layout":11},"Pagination","/design-system/components/pagination",{"title":453,"_path":454,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":456,"_path":457,"layout":11},"Profile","/design-system/components/profile",{"title":459,"_path":460,"layout":11},"Radio button","/design-system/components/radio-button",{"title":462,"_path":463,"layout":11},"Related links","/design-system/components/related-links",{"title":465,"_path":466,"layout":11},"Results listing","/design-system/components/results-listing",{"title":468,"_path":469,"layout":11},"Search bar","/design-system/components/search-bar",{"title":471,"_path":472,"layout":11},"Skip link","/design-system/components/skip-link",{"title":474,"_path":475,"layout":11},"Social share","/design-system/components/social-share",{"title":477,"_path":478,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":480,"_path":481,"layout":11},"Table","/design-system/components/table",{"title":483,"_path":484,"layout":11},"Tabs","/design-system/components/tabs",{"title":486,"_path":487,"layout":11},"Tag","/design-system/components/tag",{"title":489,"_path":490,"layout":11},"Text area","/design-system/components/text-area",{"title":492,"_path":493,"layout":11},"Timeline","/design-system/components/timeline",{"title":495,"_path":496,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":498,"_path":499,"children":500,"layout":11},"Ripple Framework","/framework",[501,502,520,542],{"title":498,"_path":499,"layout":11},{"title":503,"_path":504,"children":505},"Key Concepts","/framework/key-concepts",[506,508,511,514,517],{"title":313,"_path":507,"layout":11},"/framework/key-concepts/nuxt",{"title":509,"_path":510,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":512,"_path":513,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":515,"_path":516,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":518,"_path":519,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":521,"_path":522,"children":523},"Guides","/framework/guides",[524,527,530,533,536,539],{"title":525,"_path":526,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":528,"_path":529,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":531,"_path":532,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":534,"_path":535,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":537,"_path":538,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":540,"_path":541,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":543,"_path":544,"layout":11},"Core modules","/framework/core-modules",["Reactive",546],{"module-navigation":547},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Chip</h1><p class="rpl-type-p-large" data-v-3163c6df>The Chip component is an interactive element to draw a user’s user attention to a category.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts.<!--]--></p><p><!--[-->A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily.<!--]--></p><p><!--[-->When displaying multiple chips together, place them in a row.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Include keywords.<!--]--></li><li><!--[-->Use on any content page.<!--]--></li><li><!--[-->Link through to the topic page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t include punctuation.<!--]--></li><li><!--[-->Don’t use as a heading.<!--]--></li><li><!--[-->Don’t include more than 4 words.<!--]--></li><li><!--[-->Don’t use without an interaction or link.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="chips-or-buttons"><a href="#chips-or-buttons"><!--[-->Chips or buttons?<!--]--></a></h2><p><!--[-->While chips and buttons both prompt calls to action, they are different.<!--]--></p><p><!--[-->Multiple chips should all sit together. Buttons should sit separately from each other.<!--]--></p><p><!--[-->Chips react to their context, but buttons are fixed and remain static.<!--]--></p><p><!--[-->Chips convey forking paths in a user experience, while buttons show a linear step.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The chip has a default and reverse variant, allowing flexible use across a range of backgrounds.<!--]--></p><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-chip--reversed&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--reversed&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming.<!--]--></p><p><!--[-->If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/chip.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/chip/_payload.json">[{"state":1,"_errors":545,"serverRendered":548,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":237,"$sdd-globals":251,"$sdd-navigation":252},{"/design-system/components/chip":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":232,"_id":233,"_source":234,"_file":235,"_extension":236},"/design-system/components/chip","components",false,"","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","page","Core",{"type":14,"children":15,"toc":218},"root",[16,25,31,36,41,46,53,73,79,102,106,112,117,122,127,132,135,141,146,152,155,161,166,170,173,179,184,189,196],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"When displaying multiple chips together, place them in a row.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-navigation-chip--default-story",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Include keywords.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Use on any content page.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Link through to the topic page.",{"type":17,"tag":47,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":54,"props":80,"children":81},{},[82,87,92,97],{"type":17,"tag":58,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don’t include punctuation.",{"type":17,"tag":58,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don’t use as a heading.",{"type":17,"tag":58,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don’t include more than 4 words.",{"type":17,"tag":58,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t use without an interaction or link.",{"type":17,"tag":103,"props":104,"children":105},"hr",{},[],{"type":17,"tag":18,"props":107,"children":109},{"id":108},"chips-or-buttons",[110],{"type":23,"value":111},"Chips or buttons?",{"type":17,"tag":26,"props":113,"children":114},{},[115],{"type":23,"value":116},"While chips and buttons both prompt calls to action, they are different.",{"type":17,"tag":26,"props":118,"children":119},{},[120],{"type":23,"value":121},"Multiple chips should all sit together. Buttons should sit separately from each other.",{"type":17,"tag":26,"props":123,"children":124},{},[125],{"type":23,"value":126},"Chips react to their context, but buttons are fixed and remain static.",{"type":17,"tag":26,"props":128,"children":129},{},[130],{"type":23,"value":131},"Chips convey forking paths in a user experience, while buttons show a linear step.",{"type":17,"tag":103,"props":133,"children":134},{},[],{"type":17,"tag":18,"props":136,"children":138},{"id":137},"variants",[139],{"type":23,"value":140},"Variants",{"type":17,"tag":26,"props":142,"children":143},{},[144],{"type":23,"value":145},"The chip has a default and reverse variant, allowing flexible use across a range of backgrounds.",{"type":17,"tag":47,"props":147,"children":149},{"id":148},"default",[150],{"type":23,"value":151},"Default",{"type":17,"tag":42,"props":153,"children":154},{"id":44},[],{"type":17,"tag":47,"props":156,"children":158},{"id":157},"reverse",[159],{"type":23,"value":160},"Reverse",{"type":17,"tag":26,"props":162,"children":163},{},[164],{"type":23,"value":165},"Use the reverse variant when the chip appears on the primary colour.",{"type":17,"tag":42,"props":167,"children":169},{"id":168},"core-navigation-chip--reversed",[],{"type":17,"tag":103,"props":171,"children":172},{},[],{"type":17,"tag":18,"props":174,"children":176},{"id":175},"theming",[177],{"type":23,"value":178},"Theming",{"type":17,"tag":26,"props":180,"children":181},{},[182],{"type":23,"value":183},"The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming.",{"type":17,"tag":26,"props":185,"children":186},{},[187],{"type":23,"value":188},"If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour.",{"type":17,"tag":190,"props":191,"children":192},"docs-theme-chooser",{},[193],{"type":17,"tag":42,"props":194,"children":195},{"id":44},[],{"type":17,"tag":26,"props":197,"children":198},{},[199,201,208,210,216],{"type":23,"value":200},"To create your own theme see ",{"type":17,"tag":202,"props":203,"children":205},"a",{"href":204},"/design-system/design/theming-guidance-for-designers",[206],{"type":23,"value":207},"theming guidance for designers",{"type":23,"value":209}," or ",{"type":17,"tag":202,"props":211,"children":213},{"href":212},"/design-system/develop/theming",[214],{"type":23,"value":215},"theming guidance for developers",{"type":23,"value":217},".",{"title":8,"searchDepth":219,"depth":219,"links":220},2,[221,226,227,231],{"id":20,"depth":219,"text":24,"children":222},[223,225],{"id":49,"depth":224,"text":52},3,{"id":75,"depth":224,"text":78},{"id":108,"depth":219,"text":111},{"id":137,"depth":219,"text":140,"children":228},[229,230],{"id":148,"depth":224,"text":151},{"id":157,"depth":224,"text":160},{"id":175,"depth":219,"text":178},"markdown","content:design-system:5.components:chip.md","content","design-system/5.components/chip.md","md",{"/design-system/components/chip":238},[239,245],{"_path":240,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":241,"description":242,"layout":11,"label":12,"_type":232,"_id":243,"_source":234,"_file":244,"_extension":236},"/design-system/components/checkbox","Checkbox","The Checkbox component lets users select one or more options from a list.","content:design-system:5.components:checkbox.md","design-system/5.components/checkbox.md",{"_path":246,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":247,"description":248,"layout":11,"label":12,"_type":232,"_id":249,"_source":234,"_file":250,"_extension":236},"/design-system/components/contact-us","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","content:design-system:5.components:contact-us.md","design-system/5.components/contact-us.md",{},[253,258,497],{"title":254,"_path":255,"icon":256,"layout":257},"Ripple Design System","/","carbon:home","home",{"title":259,"_path":260,"children":261},"Design System","/design-system",[262,278,293,321,355],{"title":263,"_path":264,"children":265},"About","/design-system/about",[266,269,272,275],{"title":267,"_path":268,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":270,"_path":271,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":273,"_path":274,"layout":11},"Support","/design-system/about/getting-support",{"title":276,"_path":277,"layout":11},"Contributing","/design-system/about/contributing",{"title":279,"_path":280,"children":281},"Design","/design-system/design",[282,285,288,291],{"title":283,"_path":284,"layout":11},"Getting started","/design-system/design/getting-started",{"title":286,"_path":287,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":289,"_path":290,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":292,"_path":204,"layout":11},"Theming guidance for designers",{"title":294,"_path":295,"children":296},"Develop","/design-system/develop",[297,299,301,303],{"title":283,"_path":298,"layout":11},"/design-system/develop/getting-started",{"title":276,"_path":300,"layout":11},"/design-system/develop/contributing",{"title":302,"_path":212,"layout":11},"Theme and brand application",{"title":24,"_path":304,"children":305,"layout":11},"/design-system/develop/usage",[306,309,312,315,318],{"title":307,"_path":308,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":310,"_path":311,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":313,"_path":314,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":316,"_path":317,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":319,"_path":320,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":322,"_path":323,"children":324},"Styles","/design-system/styles",[325,328,331,334,337,340,343,346,349,352],{"title":326,"_path":327,"layout":11},"Colour","/design-system/styles/colour",{"title":329,"_path":330,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":332,"_path":333,"layout":11},"Grid","/design-system/styles/grid",{"title":335,"_path":336,"layout":11},"Icons","/design-system/styles/icons",{"title":338,"_path":339,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":341,"_path":342,"layout":11},"Layout","/design-system/styles/layout",{"title":344,"_path":345,"layout":11},"Logo","/design-system/styles/logo",{"title":347,"_path":348,"layout":11},"Motion","/design-system/styles/motion",{"title":350,"_path":351,"layout":11},"Spacing","/design-system/styles/spacing",{"title":353,"_path":354,"layout":11},"Typography","/design-system/styles/typography",{"title":356,"_path":357,"children":358},"Components","/design-system/components",[359,362,365,368,371,374,377,380,383,386,389,392,395,396,397,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494],{"title":360,"_path":361,"layout":11},"Accordion","/design-system/components/accordion",{"title":363,"_path":364,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":366,"_path":367,"layout":11},"Alert","/design-system/components/alert",{"title":369,"_path":370,"layout":11},"Block quote","/design-system/components/block-quote",{"title":372,"_path":373,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":375,"_path":376,"layout":11},"Button","/design-system/components/button",{"title":378,"_path":379,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":381,"_path":382,"layout":11},"Callout","/design-system/components/callout",{"title":384,"_path":385,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":387,"_path":388,"layout":11},"Card","/design-system/components/card",{"title":390,"_path":391,"layout":11},"Carousel","/design-system/components/carousel",{"title":393,"_path":394,"layout":11},"Category grid","/design-system/components/category-grid",{"title":241,"_path":240,"layout":11},{"title":9,"_path":5,"layout":11},{"title":247,"_path":246,"layout":11},{"title":399,"_path":400,"layout":11},"Date input","/design-system/components/date-input",{"title":402,"_path":403,"layout":11},"Detail list","/design-system/components/detail-list",{"title":405,"_path":406,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":408,"_path":409,"layout":11},"File","/design-system/components/file",{"title":411,"_path":412,"layout":11},"Footer","/design-system/components/footer",{"title":414,"_path":415,"layout":11},"Form alert","/design-system/components/form-alert",{"title":417,"_path":418,"layout":11},"Form","/design-system/components/form",{"title":420,"_path":421,"layout":11},"Header","/design-system/components/header",{"title":423,"_path":424,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":426,"_path":427,"layout":11},"Input field","/design-system/components/input-field",{"title":429,"_path":430,"layout":11},"Key dates","/design-system/components/key-dates",{"title":432,"_path":433,"layout":11},"Media embed","/design-system/components/media-embed",{"title":435,"_path":436,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":438,"_path":439,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":441,"_path":442,"layout":11},"Media","/design-system/components/media",{"title":444,"_path":445,"layout":11},"Option button","/design-system/components/option-button",{"title":447,"_path":448,"layout":11},"Page action","/design-system/components/page-action",{"title":450,"_path":451,"layout":11},"Pagination","/design-system/components/pagination",{"title":453,"_path":454,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":456,"_path":457,"layout":11},"Profile","/design-system/components/profile",{"title":459,"_path":460,"layout":11},"Radio button","/design-system/components/radio-button",{"title":462,"_path":463,"layout":11},"Related links","/design-system/components/related-links",{"title":465,"_path":466,"layout":11},"Results listing","/design-system/components/results-listing",{"title":468,"_path":469,"layout":11},"Search bar","/design-system/components/search-bar",{"title":471,"_path":472,"layout":11},"Skip link","/design-system/components/skip-link",{"title":474,"_path":475,"layout":11},"Social share","/design-system/components/social-share",{"title":477,"_path":478,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":480,"_path":481,"layout":11},"Table","/design-system/components/table",{"title":483,"_path":484,"layout":11},"Tabs","/design-system/components/tabs",{"title":486,"_path":487,"layout":11},"Tag","/design-system/components/tag",{"title":489,"_path":490,"layout":11},"Text area","/design-system/components/text-area",{"title":492,"_path":493,"layout":11},"Timeline","/design-system/components/timeline",{"title":495,"_path":496,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":498,"_path":499,"children":500,"layout":11},"Ripple Framework","/framework",[501,502,520,542],{"title":498,"_path":499,"layout":11},{"title":503,"_path":504,"children":505},"Key Concepts","/framework/key-concepts",[506,508,511,514,517],{"title":313,"_path":507,"layout":11},"/framework/key-concepts/nuxt",{"title":509,"_path":510,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":512,"_path":513,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":515,"_path":516,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":518,"_path":519,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":521,"_path":522,"children":523},"Guides","/framework/guides",[524,527,530,533,536,539],{"title":525,"_path":526,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":528,"_path":529,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":531,"_path":532,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":534,"_path":535,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":537,"_path":538,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":540,"_path":541,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":543,"_path":544,"layout":11},"Core modules","/framework/core-modules",["Reactive",546],{"module-navigation":547},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/contact-us/index.html b/design-system/components/contact-us/index.html index e3a92d6aea..c1d72f3b23 100644 --- a/design-system/components/contact-us/index.html +++ b/design-system/components/contact-us/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contact us</h1><p class="rpl-type-p-large" data-v-3163c6df>The Contact us component is a list of contact details and links to help the user get in touch with you.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact.<!--]--></p><p><!--[-->Contact us details can include a:<!--]--></p><ul><!--[--><li><!--[-->contact person<!--]--></li><li><!--[-->address<!--]--></li><li><!--[-->phone number<!--]--></li><li><!--[-->social media account.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-contact-us--contact-us&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-contact-us--contact-us&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Provide users with additional contact details relevant to the page.<!--]--></li><li><!--[-->Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts.<!--]--></li><li><!--[-->Display in the sidebar of the page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->If you add social media accounts to the contact us component, don’t add the social share component.<!--]--></li><li><!--[-->Never use unrelated contact details or social media accounts.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Contact us uses colour for:<!--]--></p><ul><!--[--><li><!--[-->visual prominence for key information<!--]--></li><li><!--[-->link icons.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-contact-us--contact-us&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-contact-us--contact-us&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/contact-us.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/contact-us/_payload.json">[{"state":1,"_errors":489,"serverRendered":492,"path":493,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":181,"$sdd-globals":195,"$sdd-navigation":196},{"/design-system/components/contact-us":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":176,"_id":177,"_source":178,"_file":179,"_extension":180},"/design-system/components/contact-us","components",false,"","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","page","Core",{"type":14,"children":15,"toc":167},"root",[16,25,31,36,61,66,73,91,97,110,114,120,125,138,145],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Contact us details can include a:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"contact person",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"address",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"phone number",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"social media account.",{"type":17,"tag":62,"props":63,"children":65},"docs-example",{"id":64},"core-containers-contact-us--contact-us",[],{"type":17,"tag":67,"props":68,"children":70},"h3",{"id":69},"when-and-how-to-use",[71],{"type":23,"value":72},"When and how to use",{"type":17,"tag":37,"props":74,"children":75},{},[76,81,86],{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Provide users with additional contact details relevant to the page.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Display in the sidebar of the page.",{"type":17,"tag":67,"props":92,"children":94},{"id":93},"when-and-how-not-to-use",[95],{"type":23,"value":96},"When and how not to use",{"type":17,"tag":37,"props":98,"children":99},{},[100,105],{"type":17,"tag":41,"props":101,"children":102},{},[103],{"type":23,"value":104},"If you add social media accounts to the contact us component, don’t add the social share component.",{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Never use unrelated contact details or social media accounts.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"theming",[118],{"type":23,"value":119},"Theming",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"Contact us uses colour for:",{"type":17,"tag":37,"props":126,"children":127},{},[128,133],{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"visual prominence for key information",{"type":17,"tag":41,"props":134,"children":135},{},[136],{"type":23,"value":137},"link icons.",{"type":17,"tag":139,"props":140,"children":141},"docs-theme-chooser",{},[142],{"type":17,"tag":62,"props":143,"children":144},{"id":64},[],{"type":17,"tag":26,"props":146,"children":147},{},[148,150,157,159,165],{"type":23,"value":149},"To create your own theme see ",{"type":17,"tag":151,"props":152,"children":154},"a",{"href":153},"/design-system/design/theming-guidance-for-designers",[155],{"type":23,"value":156},"theming guidance for designers",{"type":23,"value":158}," or ",{"type":17,"tag":151,"props":160,"children":162},{"href":161},"/design-system/develop/theming",[163],{"type":23,"value":164},"theming guidance for developers",{"type":23,"value":166},".",{"title":8,"searchDepth":168,"depth":168,"links":169},2,[170,175],{"id":20,"depth":168,"text":24,"children":171},[172,174],{"id":69,"depth":173,"text":72},3,{"id":93,"depth":173,"text":96},{"id":116,"depth":168,"text":119},"markdown","content:design-system:5.components:contact-us.md","content","design-system/5.components/contact-us.md","md",{"/design-system/components/contact-us":182},[183,189],{"_path":184,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":185,"description":186,"layout":11,"label":12,"_type":176,"_id":187,"_source":178,"_file":188,"_extension":180},"/design-system/components/chip","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","content:design-system:5.components:chip.md","design-system/5.components/chip.md",{"_path":190,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":191,"description":192,"layout":11,"label":12,"_type":176,"_id":193,"_source":178,"_file":194,"_extension":180},"/design-system/components/date-input","Date input","The Date input component helps users enter a date.","content:design-system:5.components:date-input.md","design-system/5.components/date-input.md",{},[197,202,441],{"title":198,"_path":199,"icon":200,"layout":201},"Ripple Design System","/","carbon:home","home",{"title":203,"_path":204,"children":205},"Design System","/design-system",[206,222,237,265,299],{"title":207,"_path":208,"children":209},"About","/design-system/about",[210,213,216,219],{"title":211,"_path":212,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":214,"_path":215,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":217,"_path":218,"layout":11},"Support","/design-system/about/getting-support",{"title":220,"_path":221,"layout":11},"Contributing","/design-system/about/contributing",{"title":223,"_path":224,"children":225},"Design","/design-system/design",[226,229,232,235],{"title":227,"_path":228,"layout":11},"Getting started","/design-system/design/getting-started",{"title":230,"_path":231,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":233,"_path":234,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":236,"_path":153,"layout":11},"Theming guidance for designers",{"title":238,"_path":239,"children":240},"Develop","/design-system/develop",[241,243,245,247],{"title":227,"_path":242,"layout":11},"/design-system/develop/getting-started",{"title":220,"_path":244,"layout":11},"/design-system/develop/contributing",{"title":246,"_path":161,"layout":11},"Theme and brand application",{"title":24,"_path":248,"children":249,"layout":11},"/design-system/develop/usage",[250,253,256,259,262],{"title":251,"_path":252,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":254,"_path":255,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":257,"_path":258,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":260,"_path":261,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":263,"_path":264,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":266,"_path":267,"children":268},"Styles","/design-system/styles",[269,272,275,278,281,284,287,290,293,296],{"title":270,"_path":271,"layout":11},"Colour","/design-system/styles/colour",{"title":273,"_path":274,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":276,"_path":277,"layout":11},"Grid","/design-system/styles/grid",{"title":279,"_path":280,"layout":11},"Icons","/design-system/styles/icons",{"title":282,"_path":283,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":285,"_path":286,"layout":11},"Layout","/design-system/styles/layout",{"title":288,"_path":289,"layout":11},"Logo","/design-system/styles/logo",{"title":291,"_path":292,"layout":11},"Motion","/design-system/styles/motion",{"title":294,"_path":295,"layout":11},"Spacing","/design-system/styles/spacing",{"title":297,"_path":298,"layout":11},"Typography","/design-system/styles/typography",{"title":300,"_path":301,"children":302},"Components","/design-system/components",[303,306,309,312,315,318,321,324,327,330,333,336,339,342,343,344,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438],{"title":304,"_path":305,"layout":11},"Accordion","/design-system/components/accordion",{"title":307,"_path":308,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":310,"_path":311,"layout":11},"Alert","/design-system/components/alert",{"title":313,"_path":314,"layout":11},"Block quote","/design-system/components/block-quote",{"title":316,"_path":317,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":319,"_path":320,"layout":11},"Button","/design-system/components/button",{"title":322,"_path":323,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":325,"_path":326,"layout":11},"Callout","/design-system/components/callout",{"title":328,"_path":329,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":331,"_path":332,"layout":11},"Card","/design-system/components/card",{"title":334,"_path":335,"layout":11},"Carousel","/design-system/components/carousel",{"title":337,"_path":338,"layout":11},"Category grid","/design-system/components/category-grid",{"title":340,"_path":341,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":185,"_path":184,"layout":11},{"title":9,"_path":5,"layout":11},{"title":191,"_path":190,"layout":11},{"title":346,"_path":347,"layout":11},"Detail list","/design-system/components/detail-list",{"title":349,"_path":350,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":352,"_path":353,"layout":11},"File","/design-system/components/file",{"title":355,"_path":356,"layout":11},"Footer","/design-system/components/footer",{"title":358,"_path":359,"layout":11},"Form alert","/design-system/components/form-alert",{"title":361,"_path":362,"layout":11},"Form","/design-system/components/form",{"title":364,"_path":365,"layout":11},"Header","/design-system/components/header",{"title":367,"_path":368,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":370,"_path":371,"layout":11},"Input field","/design-system/components/input-field",{"title":373,"_path":374,"layout":11},"Key dates","/design-system/components/key-dates",{"title":376,"_path":377,"layout":11},"Media embed","/design-system/components/media-embed",{"title":379,"_path":380,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":382,"_path":383,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":385,"_path":386,"layout":11},"Media","/design-system/components/media",{"title":388,"_path":389,"layout":11},"Option button","/design-system/components/option-button",{"title":391,"_path":392,"layout":11},"Page action","/design-system/components/page-action",{"title":394,"_path":395,"layout":11},"Pagination","/design-system/components/pagination",{"title":397,"_path":398,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":400,"_path":401,"layout":11},"Profile","/design-system/components/profile",{"title":403,"_path":404,"layout":11},"Radio button","/design-system/components/radio-button",{"title":406,"_path":407,"layout":11},"Related links","/design-system/components/related-links",{"title":409,"_path":410,"layout":11},"Results listing","/design-system/components/results-listing",{"title":412,"_path":413,"layout":11},"Search bar","/design-system/components/search-bar",{"title":415,"_path":416,"layout":11},"Skip link","/design-system/components/skip-link",{"title":418,"_path":419,"layout":11},"Social share","/design-system/components/social-share",{"title":421,"_path":422,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":424,"_path":425,"layout":11},"Table","/design-system/components/table",{"title":427,"_path":428,"layout":11},"Tabs","/design-system/components/tabs",{"title":430,"_path":431,"layout":11},"Tag","/design-system/components/tag",{"title":433,"_path":434,"layout":11},"Text area","/design-system/components/text-area",{"title":436,"_path":437,"layout":11},"Timeline","/design-system/components/timeline",{"title":439,"_path":440,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":442,"_path":443,"children":444,"layout":11},"Ripple Framework","/framework",[445,446,464,486],{"title":442,"_path":443,"layout":11},{"title":447,"_path":448,"children":449},"Key Concepts","/framework/key-concepts",[450,452,455,458,461],{"title":257,"_path":451,"layout":11},"/framework/key-concepts/nuxt",{"title":453,"_path":454,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":456,"_path":457,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":459,"_path":460,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":462,"_path":463,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,480,483],{"title":469,"_path":470,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":479,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":481,"_path":482,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":484,"_path":485,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":487,"_path":488,"layout":11},"Core modules","/framework/core-modules",["Reactive",490],{"module-navigation":491},null,true,"/design-system/components/contact-us/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contact us</h1><p class="rpl-type-p-large" data-v-3163c6df>The Contact us component is a list of contact details and links to help the user get in touch with you.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact.<!--]--></p><p><!--[-->Contact us details can include a:<!--]--></p><ul><!--[--><li><!--[-->contact person<!--]--></li><li><!--[-->address<!--]--></li><li><!--[-->phone number<!--]--></li><li><!--[-->social media account.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-contact-us--contact-us&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-contact-us--contact-us&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Provide users with additional contact details relevant to the page.<!--]--></li><li><!--[-->Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts.<!--]--></li><li><!--[-->Display in the sidebar of the page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->If you add social media accounts to the contact us component, don’t add the social share component.<!--]--></li><li><!--[-->Never use unrelated contact details or social media accounts.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Contact us uses colour for:<!--]--></p><ul><!--[--><li><!--[-->visual prominence for key information<!--]--></li><li><!--[-->link icons.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-contact-us--contact-us&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-contact-us--contact-us&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/contact-us.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/contact-us/_payload.json">[{"state":1,"_errors":489,"serverRendered":492,"path":493,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":181,"$sdd-globals":195,"$sdd-navigation":196},{"/design-system/components/contact-us":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":176,"_id":177,"_source":178,"_file":179,"_extension":180},"/design-system/components/contact-us","components",false,"","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","page","Core",{"type":14,"children":15,"toc":167},"root",[16,25,31,36,61,66,73,91,97,110,114,120,125,138,145],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Contact us details can include a:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"contact person",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"address",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"phone number",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"social media account.",{"type":17,"tag":62,"props":63,"children":65},"docs-example",{"id":64},"core-containers-contact-us--contact-us",[],{"type":17,"tag":67,"props":68,"children":70},"h3",{"id":69},"when-and-how-to-use",[71],{"type":23,"value":72},"When and how to use",{"type":17,"tag":37,"props":74,"children":75},{},[76,81,86],{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Provide users with additional contact details relevant to the page.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Display in the sidebar of the page.",{"type":17,"tag":67,"props":92,"children":94},{"id":93},"when-and-how-not-to-use",[95],{"type":23,"value":96},"When and how not to use",{"type":17,"tag":37,"props":98,"children":99},{},[100,105],{"type":17,"tag":41,"props":101,"children":102},{},[103],{"type":23,"value":104},"If you add social media accounts to the contact us component, don’t add the social share component.",{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Never use unrelated contact details or social media accounts.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"theming",[118],{"type":23,"value":119},"Theming",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"Contact us uses colour for:",{"type":17,"tag":37,"props":126,"children":127},{},[128,133],{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"visual prominence for key information",{"type":17,"tag":41,"props":134,"children":135},{},[136],{"type":23,"value":137},"link icons.",{"type":17,"tag":139,"props":140,"children":141},"docs-theme-chooser",{},[142],{"type":17,"tag":62,"props":143,"children":144},{"id":64},[],{"type":17,"tag":26,"props":146,"children":147},{},[148,150,157,159,165],{"type":23,"value":149},"To create your own theme see ",{"type":17,"tag":151,"props":152,"children":154},"a",{"href":153},"/design-system/design/theming-guidance-for-designers",[155],{"type":23,"value":156},"theming guidance for designers",{"type":23,"value":158}," or ",{"type":17,"tag":151,"props":160,"children":162},{"href":161},"/design-system/develop/theming",[163],{"type":23,"value":164},"theming guidance for developers",{"type":23,"value":166},".",{"title":8,"searchDepth":168,"depth":168,"links":169},2,[170,175],{"id":20,"depth":168,"text":24,"children":171},[172,174],{"id":69,"depth":173,"text":72},3,{"id":93,"depth":173,"text":96},{"id":116,"depth":168,"text":119},"markdown","content:design-system:5.components:contact-us.md","content","design-system/5.components/contact-us.md","md",{"/design-system/components/contact-us":182},[183,189],{"_path":184,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":185,"description":186,"layout":11,"label":12,"_type":176,"_id":187,"_source":178,"_file":188,"_extension":180},"/design-system/components/chip","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","content:design-system:5.components:chip.md","design-system/5.components/chip.md",{"_path":190,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":191,"description":192,"layout":11,"label":12,"_type":176,"_id":193,"_source":178,"_file":194,"_extension":180},"/design-system/components/date-input","Date input","The Date input component helps users enter a date.","content:design-system:5.components:date-input.md","design-system/5.components/date-input.md",{},[197,202,441],{"title":198,"_path":199,"icon":200,"layout":201},"Ripple Design System","/","carbon:home","home",{"title":203,"_path":204,"children":205},"Design System","/design-system",[206,222,237,265,299],{"title":207,"_path":208,"children":209},"About","/design-system/about",[210,213,216,219],{"title":211,"_path":212,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":214,"_path":215,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":217,"_path":218,"layout":11},"Support","/design-system/about/getting-support",{"title":220,"_path":221,"layout":11},"Contributing","/design-system/about/contributing",{"title":223,"_path":224,"children":225},"Design","/design-system/design",[226,229,232,235],{"title":227,"_path":228,"layout":11},"Getting started","/design-system/design/getting-started",{"title":230,"_path":231,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":233,"_path":234,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":236,"_path":153,"layout":11},"Theming guidance for designers",{"title":238,"_path":239,"children":240},"Develop","/design-system/develop",[241,243,245,247],{"title":227,"_path":242,"layout":11},"/design-system/develop/getting-started",{"title":220,"_path":244,"layout":11},"/design-system/develop/contributing",{"title":246,"_path":161,"layout":11},"Theme and brand application",{"title":24,"_path":248,"children":249,"layout":11},"/design-system/develop/usage",[250,253,256,259,262],{"title":251,"_path":252,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":254,"_path":255,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":257,"_path":258,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":260,"_path":261,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":263,"_path":264,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":266,"_path":267,"children":268},"Styles","/design-system/styles",[269,272,275,278,281,284,287,290,293,296],{"title":270,"_path":271,"layout":11},"Colour","/design-system/styles/colour",{"title":273,"_path":274,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":276,"_path":277,"layout":11},"Grid","/design-system/styles/grid",{"title":279,"_path":280,"layout":11},"Icons","/design-system/styles/icons",{"title":282,"_path":283,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":285,"_path":286,"layout":11},"Layout","/design-system/styles/layout",{"title":288,"_path":289,"layout":11},"Logo","/design-system/styles/logo",{"title":291,"_path":292,"layout":11},"Motion","/design-system/styles/motion",{"title":294,"_path":295,"layout":11},"Spacing","/design-system/styles/spacing",{"title":297,"_path":298,"layout":11},"Typography","/design-system/styles/typography",{"title":300,"_path":301,"children":302},"Components","/design-system/components",[303,306,309,312,315,318,321,324,327,330,333,336,339,342,343,344,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438],{"title":304,"_path":305,"layout":11},"Accordion","/design-system/components/accordion",{"title":307,"_path":308,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":310,"_path":311,"layout":11},"Alert","/design-system/components/alert",{"title":313,"_path":314,"layout":11},"Block quote","/design-system/components/block-quote",{"title":316,"_path":317,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":319,"_path":320,"layout":11},"Button","/design-system/components/button",{"title":322,"_path":323,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":325,"_path":326,"layout":11},"Callout","/design-system/components/callout",{"title":328,"_path":329,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":331,"_path":332,"layout":11},"Card","/design-system/components/card",{"title":334,"_path":335,"layout":11},"Carousel","/design-system/components/carousel",{"title":337,"_path":338,"layout":11},"Category grid","/design-system/components/category-grid",{"title":340,"_path":341,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":185,"_path":184,"layout":11},{"title":9,"_path":5,"layout":11},{"title":191,"_path":190,"layout":11},{"title":346,"_path":347,"layout":11},"Detail list","/design-system/components/detail-list",{"title":349,"_path":350,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":352,"_path":353,"layout":11},"File","/design-system/components/file",{"title":355,"_path":356,"layout":11},"Footer","/design-system/components/footer",{"title":358,"_path":359,"layout":11},"Form alert","/design-system/components/form-alert",{"title":361,"_path":362,"layout":11},"Form","/design-system/components/form",{"title":364,"_path":365,"layout":11},"Header","/design-system/components/header",{"title":367,"_path":368,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":370,"_path":371,"layout":11},"Input field","/design-system/components/input-field",{"title":373,"_path":374,"layout":11},"Key dates","/design-system/components/key-dates",{"title":376,"_path":377,"layout":11},"Media embed","/design-system/components/media-embed",{"title":379,"_path":380,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":382,"_path":383,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":385,"_path":386,"layout":11},"Media","/design-system/components/media",{"title":388,"_path":389,"layout":11},"Option button","/design-system/components/option-button",{"title":391,"_path":392,"layout":11},"Page action","/design-system/components/page-action",{"title":394,"_path":395,"layout":11},"Pagination","/design-system/components/pagination",{"title":397,"_path":398,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":400,"_path":401,"layout":11},"Profile","/design-system/components/profile",{"title":403,"_path":404,"layout":11},"Radio button","/design-system/components/radio-button",{"title":406,"_path":407,"layout":11},"Related links","/design-system/components/related-links",{"title":409,"_path":410,"layout":11},"Results listing","/design-system/components/results-listing",{"title":412,"_path":413,"layout":11},"Search bar","/design-system/components/search-bar",{"title":415,"_path":416,"layout":11},"Skip link","/design-system/components/skip-link",{"title":418,"_path":419,"layout":11},"Social share","/design-system/components/social-share",{"title":421,"_path":422,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":424,"_path":425,"layout":11},"Table","/design-system/components/table",{"title":427,"_path":428,"layout":11},"Tabs","/design-system/components/tabs",{"title":430,"_path":431,"layout":11},"Tag","/design-system/components/tag",{"title":433,"_path":434,"layout":11},"Text area","/design-system/components/text-area",{"title":436,"_path":437,"layout":11},"Timeline","/design-system/components/timeline",{"title":439,"_path":440,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":442,"_path":443,"children":444,"layout":11},"Ripple Framework","/framework",[445,446,464,486],{"title":442,"_path":443,"layout":11},{"title":447,"_path":448,"children":449},"Key Concepts","/framework/key-concepts",[450,452,455,458,461],{"title":257,"_path":451,"layout":11},"/framework/key-concepts/nuxt",{"title":453,"_path":454,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":456,"_path":457,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":459,"_path":460,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":462,"_path":463,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,480,483],{"title":469,"_path":470,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":479,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":481,"_path":482,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":484,"_path":485,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":487,"_path":488,"layout":11},"Core modules","/framework/core-modules",["Reactive",490],{"module-navigation":491},null,true,"/design-system/components/contact-us/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/date-input/index.html b/design-system/components/date-input/index.html index 8d26ffee0b..a652dc6f85 100644 --- a/design-system/components/date-input/index.html +++ b/design-system/components/date-input/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Date input</h1><p class="rpl-type-p-large" data-v-3163c6df>The Date input component helps users enter a date.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar.<!--]--></p><p><!--[-->Date input has 3 fields: day, month and year.<!--]--></p><p><!--[-->Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-to-use-this-component"><a href="#how-to-use-this-component"><!--[-->How to use this component<!--]--></a></h3><p><!--[-->You must use a form label with a date input.<!--]--></p><p><!--[-->You can use an date input with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><h4 id="avoid-placeholder-text"><a href="#avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></a></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a date input.<!--]--></p><p><!--[-->For example, hint text can include specific formatting examples or requirements.<!--]--></p><p><!--[-->Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always use date inputs with a label.<!--]--></li><li><!--[-->Write short and concise labels.<!--]--></li><li><!--[-->Use hint text to show the expected date format, for example, ‘07 11 2022’.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->If it’s not likely users will know the exact date, don’t use date input.<!--]--></li><li><!--[-->Don’t use without a form label or hint text specifying the expected date format.<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions or important examples.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The date input has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for a date input, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: whole date field is empty<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘Enter [the missing information]'.<!--]--></li><li><!--[-->Example: ‘Enter your dog’s birthday'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: some of date field is empty or incomplete<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must include a [name of empty or incomplete field]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s birthday must include a month'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: impossible date entered<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be a real date’.<!--]--></li><li><!--[-->Example: ‘Your dog’s birthday must be a real date'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: future date given when past date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be in the past’.<!--]--></li><li><!--[-->Example: ‘Your dog’s first playdate must be in the past'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: future date given when today or past date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be today or in the past’.<!--]--></li><li><!--[-->Example: ‘Your dog’s first beach visit must be today or in the past'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: past date given when future date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be in the future’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next raincoat purchase must be in the future'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: past date given when today or future date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be today or in the future’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next zoomies must be today or in the future'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not on or after another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not after another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be after [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not the same as or before another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be on or before [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next hike must be on or before 2 January 2025'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not before another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be before [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not between 2 other dates<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘The date must not include [characters]'.<!--]--></li><li><!--[-->Example: ‘The date must not include + & ~'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘The date must only include numbers'.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--invalid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--invalid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/date-input.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/date-input/_payload.json">[{"state":1,"_errors":995,"serverRendered":998,"path":999,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":687,"$sdd-globals":701,"$sdd-navigation":702},{"/design-system/components/date-input":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":682,"_id":683,"_source":684,"_file":685,"_extension":686},"/design-system/components/date-input","components",false,"","Date input","The Date input component helps users enter a date.","page","Core",{"type":14,"children":15,"toc":666},"root",[16,25,31,36,41,46,53,58,63,83,90,95,100,106,111,116,121,127,145,151,184,188,194,199,212,218,221,227,231,237,242,247,252,261,279,287,305,313,330,338,355,363,380,388,405,413,430,438,455,463,480,488,505,513,530,538,555,563,580,588,600,604,607,613,618,625,647,650,656,661],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Date input has 3 fields: day, month and year.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"forms-date-input--default-story",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"how-to-use-this-component",[51],{"type":23,"value":52},"How to use this component",{"type":17,"tag":26,"props":54,"children":55},{},[56],{"type":23,"value":57},"You must use a form label with a date input.",{"type":17,"tag":26,"props":59,"children":60},{},[61],{"type":23,"value":62},"You can use an date input with:",{"type":17,"tag":64,"props":65,"children":66},"ul",{},[67,73,78],{"type":17,"tag":68,"props":69,"children":70},"li",{},[71],{"type":23,"value":72},"requirement label",{"type":17,"tag":68,"props":74,"children":75},{},[76],{"type":23,"value":77},"hint text",{"type":17,"tag":68,"props":79,"children":80},{},[81],{"type":23,"value":82},"placeholder text.",{"type":17,"tag":84,"props":85,"children":87},"h4",{"id":86},"avoid-placeholder-text",[88],{"type":23,"value":89},"Avoid placeholder text",{"type":17,"tag":26,"props":91,"children":92},{},[93],{"type":23,"value":94},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":96,"children":97},{},[98],{"type":23,"value":99},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":17,"tag":84,"props":101,"children":103},{"id":102},"hint-text",[104],{"type":23,"value":105},"Hint text",{"type":17,"tag":26,"props":107,"children":108},{},[109],{"type":23,"value":110},"Hint text can be used to tell the user what, or how, to successfully complete a date input.",{"type":17,"tag":26,"props":112,"children":113},{},[114],{"type":23,"value":115},"For example, hint text can include specific formatting examples or requirements.",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":47,"props":122,"children":124},{"id":123},"when-and-how-to-use",[125],{"type":23,"value":126},"When and how to use",{"type":17,"tag":64,"props":128,"children":129},{},[130,135,140],{"type":17,"tag":68,"props":131,"children":132},{},[133],{"type":23,"value":134},"Always use date inputs with a label.",{"type":17,"tag":68,"props":136,"children":137},{},[138],{"type":23,"value":139},"Write short and concise labels.",{"type":17,"tag":68,"props":141,"children":142},{},[143],{"type":23,"value":144},"Use hint text to show the expected date format, for example, ‘07 11 2022’.",{"type":17,"tag":47,"props":146,"children":148},{"id":147},"when-and-how-not-to-use",[149],{"type":23,"value":150},"When and how not to use",{"type":17,"tag":64,"props":152,"children":153},{},[154,159,164,169,174,179],{"type":17,"tag":68,"props":155,"children":156},{},[157],{"type":23,"value":158},"If it’s not likely users will know the exact date, don’t use date input.",{"type":17,"tag":68,"props":160,"children":161},{},[162],{"type":23,"value":163},"Don’t use without a form label or hint text specifying the expected date format.",{"type":17,"tag":68,"props":165,"children":166},{},[167],{"type":23,"value":168},"Avoid placeholder text because it can cause accessibility issues.",{"type":17,"tag":68,"props":170,"children":171},{},[172],{"type":23,"value":173},"Don’t disable copy and paste.",{"type":17,"tag":68,"props":175,"children":176},{},[177],{"type":23,"value":178},"Don’t use placeholder text to give instructions or important examples.",{"type":17,"tag":68,"props":180,"children":181},{},[182],{"type":23,"value":183},"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.",{"type":17,"tag":185,"props":186,"children":187},"hr",{},[],{"type":17,"tag":18,"props":189,"children":191},{"id":190},"variants",[192],{"type":23,"value":193},"Variants",{"type":17,"tag":26,"props":195,"children":196},{},[197],{"type":23,"value":198},"The date input has 2 variants:",{"type":17,"tag":64,"props":200,"children":201},{},[202,207],{"type":17,"tag":68,"props":203,"children":204},{},[205],{"type":23,"value":206},"default, used on white backgrounds",{"type":17,"tag":68,"props":208,"children":209},{},[210],{"type":23,"value":211},"reverse, used on neutral backgrounds.",{"type":17,"tag":47,"props":213,"children":215},{"id":214},"default",[216],{"type":23,"value":217},"Default",{"type":17,"tag":42,"props":219,"children":220},{"id":44},[],{"type":17,"tag":47,"props":222,"children":224},{"id":223},"reverse",[225],{"type":23,"value":226},"Reverse",{"type":17,"tag":42,"props":228,"children":230},{"id":229},"forms-date-input--reverse",[],{"type":17,"tag":47,"props":232,"children":234},{"id":233},"error",[235],{"type":23,"value":236},"Error",{"type":17,"tag":26,"props":238,"children":239},{},[240],{"type":23,"value":241},"All form inputs share error state styling.",{"type":17,"tag":26,"props":243,"children":244},{},[245],{"type":23,"value":246},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":248,"children":249},{},[250],{"type":23,"value":251},"When creating an error message for a date input, use the wording below.",{"type":17,"tag":26,"props":253,"children":254},{},[255],{"type":17,"tag":256,"props":257,"children":258},"strong",{},[259],{"type":23,"value":260},"Error: whole date field is empty",{"type":17,"tag":64,"props":262,"children":263},{},[264,269,274],{"type":17,"tag":68,"props":265,"children":266},{},[267],{"type":23,"value":268},"Highlight area: entire date input.",{"type":17,"tag":68,"props":270,"children":271},{},[272],{"type":23,"value":273},"Error message: ‘Enter [the missing information]'.",{"type":17,"tag":68,"props":275,"children":276},{},[277],{"type":23,"value":278},"Example: ‘Enter your dog’s birthday'.",{"type":17,"tag":26,"props":280,"children":281},{},[282],{"type":17,"tag":256,"props":283,"children":284},{},[285],{"type":23,"value":286},"Error: some of date field is empty or incomplete",{"type":17,"tag":64,"props":288,"children":289},{},[290,295,300],{"type":17,"tag":68,"props":291,"children":292},{},[293],{"type":23,"value":294},"Highlight area: relevant day, month and/or year fields.",{"type":17,"tag":68,"props":296,"children":297},{},[298],{"type":23,"value":299},"Error message: ‘[Information requested] must include a [name of empty or incomplete field]’.",{"type":17,"tag":68,"props":301,"children":302},{},[303],{"type":23,"value":304},"Example: ‘Your dog’s birthday must include a month'.",{"type":17,"tag":26,"props":306,"children":307},{},[308],{"type":17,"tag":256,"props":309,"children":310},{},[311],{"type":23,"value":312},"Error: impossible date entered",{"type":17,"tag":64,"props":314,"children":315},{},[316,320,325],{"type":17,"tag":68,"props":317,"children":318},{},[319],{"type":23,"value":294},{"type":17,"tag":68,"props":321,"children":322},{},[323],{"type":23,"value":324},"Error message: ‘[Information requested] must be a real date’.",{"type":17,"tag":68,"props":326,"children":327},{},[328],{"type":23,"value":329},"Example: ‘Your dog’s birthday must be a real date'.",{"type":17,"tag":26,"props":331,"children":332},{},[333],{"type":17,"tag":256,"props":334,"children":335},{},[336],{"type":23,"value":337},"Error: future date given when past date needed",{"type":17,"tag":64,"props":339,"children":340},{},[341,345,350],{"type":17,"tag":68,"props":342,"children":343},{},[344],{"type":23,"value":268},{"type":17,"tag":68,"props":346,"children":347},{},[348],{"type":23,"value":349},"Error message: ‘[Information requested] must be in the past’.",{"type":17,"tag":68,"props":351,"children":352},{},[353],{"type":23,"value":354},"Example: ‘Your dog’s first playdate must be in the past'.",{"type":17,"tag":26,"props":356,"children":357},{},[358],{"type":17,"tag":256,"props":359,"children":360},{},[361],{"type":23,"value":362},"Error: future date given when today or past date needed",{"type":17,"tag":64,"props":364,"children":365},{},[366,370,375],{"type":17,"tag":68,"props":367,"children":368},{},[369],{"type":23,"value":268},{"type":17,"tag":68,"props":371,"children":372},{},[373],{"type":23,"value":374},"Error message: ‘[Information requested] must be today or in the past’.",{"type":17,"tag":68,"props":376,"children":377},{},[378],{"type":23,"value":379},"Example: ‘Your dog’s first beach visit must be today or in the past'.",{"type":17,"tag":26,"props":381,"children":382},{},[383],{"type":17,"tag":256,"props":384,"children":385},{},[386],{"type":23,"value":387},"Error: past date given when future date needed",{"type":17,"tag":64,"props":389,"children":390},{},[391,395,400],{"type":17,"tag":68,"props":392,"children":393},{},[394],{"type":23,"value":268},{"type":17,"tag":68,"props":396,"children":397},{},[398],{"type":23,"value":399},"Error message: ‘[Information requested] must be in the future’.",{"type":17,"tag":68,"props":401,"children":402},{},[403],{"type":23,"value":404},"Example: ‘Your dog’s next raincoat purchase must be in the future'.",{"type":17,"tag":26,"props":406,"children":407},{},[408],{"type":17,"tag":256,"props":409,"children":410},{},[411],{"type":23,"value":412},"Error: past date given when today or future date needed",{"type":17,"tag":64,"props":414,"children":415},{},[416,420,425],{"type":17,"tag":68,"props":417,"children":418},{},[419],{"type":23,"value":268},{"type":17,"tag":68,"props":421,"children":422},{},[423],{"type":23,"value":424},"Error message: ‘[Information requested] must be today or in the future’.",{"type":17,"tag":68,"props":426,"children":427},{},[428],{"type":23,"value":429},"Example: ‘Your dog’s next zoomies must be today or in the future'.",{"type":17,"tag":26,"props":431,"children":432},{},[433],{"type":17,"tag":256,"props":434,"children":435},{},[436],{"type":23,"value":437},"Error: date is not on or after another particular date",{"type":17,"tag":64,"props":439,"children":440},{},[441,445,450],{"type":17,"tag":68,"props":442,"children":443},{},[444],{"type":23,"value":268},{"type":17,"tag":68,"props":446,"children":447},{},[448],{"type":23,"value":449},"Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’.",{"type":17,"tag":68,"props":451,"children":452},{},[453],{"type":23,"value":454},"Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'.",{"type":17,"tag":26,"props":456,"children":457},{},[458],{"type":17,"tag":256,"props":459,"children":460},{},[461],{"type":23,"value":462},"Error: date is not after another particular date",{"type":17,"tag":64,"props":464,"children":465},{},[466,470,475],{"type":17,"tag":68,"props":467,"children":468},{},[469],{"type":23,"value":268},{"type":17,"tag":68,"props":471,"children":472},{},[473],{"type":23,"value":474},"Error message: ‘[Information requested] must be after [particular date and optional description]’.",{"type":17,"tag":68,"props":476,"children":477},{},[478],{"type":23,"value":479},"Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'.",{"type":17,"tag":26,"props":481,"children":482},{},[483],{"type":17,"tag":256,"props":484,"children":485},{},[486],{"type":23,"value":487},"Error: date is not the same as or before another particular date",{"type":17,"tag":64,"props":489,"children":490},{},[491,495,500],{"type":17,"tag":68,"props":492,"children":493},{},[494],{"type":23,"value":268},{"type":17,"tag":68,"props":496,"children":497},{},[498],{"type":23,"value":499},"Error message: ‘[Information requested] must be on or before [particular date and optional description]’.",{"type":17,"tag":68,"props":501,"children":502},{},[503],{"type":23,"value":504},"Example: ‘Your dog’s next hike must be on or before 2 January 2025'.",{"type":17,"tag":26,"props":506,"children":507},{},[508],{"type":17,"tag":256,"props":509,"children":510},{},[511],{"type":23,"value":512},"Error: date is not before another particular date",{"type":17,"tag":64,"props":514,"children":515},{},[516,520,525],{"type":17,"tag":68,"props":517,"children":518},{},[519],{"type":23,"value":268},{"type":17,"tag":68,"props":521,"children":522},{},[523],{"type":23,"value":524},"Error message: ‘[Information requested] must be before [particular date and optional description]’.",{"type":17,"tag":68,"props":526,"children":527},{},[528],{"type":23,"value":529},"Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'.",{"type":17,"tag":26,"props":531,"children":532},{},[533],{"type":17,"tag":256,"props":534,"children":535},{},[536],{"type":23,"value":537},"Error: date is not between 2 other dates",{"type":17,"tag":64,"props":539,"children":540},{},[541,545,550],{"type":17,"tag":68,"props":542,"children":543},{},[544],{"type":23,"value":268},{"type":17,"tag":68,"props":546,"children":547},{},[548],{"type":23,"value":549},"Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’.",{"type":17,"tag":68,"props":551,"children":552},{},[553],{"type":23,"value":554},"Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'.",{"type":17,"tag":26,"props":556,"children":557},{},[558],{"type":17,"tag":256,"props":559,"children":560},{},[561],{"type":23,"value":562},"Error: date uses known characters that aren’t allowed",{"type":17,"tag":64,"props":564,"children":565},{},[566,570,575],{"type":17,"tag":68,"props":567,"children":568},{},[569],{"type":23,"value":294},{"type":17,"tag":68,"props":571,"children":572},{},[573],{"type":23,"value":574},"Error message: ‘The date must not include [characters]'.",{"type":17,"tag":68,"props":576,"children":577},{},[578],{"type":23,"value":579},"Example: ‘The date must not include + & ~'.",{"type":17,"tag":26,"props":581,"children":582},{},[583],{"type":17,"tag":256,"props":584,"children":585},{},[586],{"type":23,"value":587},"Error: date uses unknown characters that aren’t allowed",{"type":17,"tag":64,"props":589,"children":590},{},[591,595],{"type":17,"tag":68,"props":592,"children":593},{},[594],{"type":23,"value":294},{"type":17,"tag":68,"props":596,"children":597},{},[598],{"type":23,"value":599},"Error message: ‘The date must only include numbers'.",{"type":17,"tag":42,"props":601,"children":603},{"id":602},"forms-date-input--invalid",[],{"type":17,"tag":185,"props":605,"children":606},{},[],{"type":17,"tag":18,"props":608,"children":610},{"id":609},"theming",[611],{"type":23,"value":612},"Theming",{"type":17,"tag":26,"props":614,"children":615},{},[616],{"type":23,"value":617},"Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":619,"props":620,"children":621},"docs-theme-chooser",{},[622],{"type":17,"tag":42,"props":623,"children":624},{"id":44},[],{"type":17,"tag":26,"props":626,"children":627},{},[628,630,637,639,645],{"type":23,"value":629},"To create your own theme see ",{"type":17,"tag":631,"props":632,"children":634},"a",{"href":633},"/design-system/design/theming-guidance-for-designers",[635],{"type":23,"value":636},"theming guidance for designers",{"type":23,"value":638}," or ",{"type":17,"tag":631,"props":640,"children":642},{"href":641},"/design-system/develop/theming",[643],{"type":23,"value":644},"theming guidance for developers",{"type":23,"value":646},".",{"type":17,"tag":185,"props":648,"children":649},{},[],{"type":17,"tag":18,"props":651,"children":653},{"id":652},"rationale",[654],{"type":23,"value":655},"Rationale",{"type":17,"tag":26,"props":657,"children":658},{},[659],{"type":23,"value":660},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":662,"children":663},{},[664],{"type":23,"value":665},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":667,"depth":667,"links":668},2,[669,675,680,681],{"id":20,"depth":667,"text":24,"children":670},[671,673,674],{"id":49,"depth":672,"text":52},3,{"id":123,"depth":672,"text":126},{"id":147,"depth":672,"text":150},{"id":190,"depth":667,"text":193,"children":676},[677,678,679],{"id":214,"depth":672,"text":217},{"id":223,"depth":672,"text":226},{"id":233,"depth":672,"text":236},{"id":609,"depth":667,"text":612},{"id":652,"depth":667,"text":655},"markdown","content:design-system:5.components:date-input.md","content","design-system/5.components/date-input.md","md",{"/design-system/components/date-input":688},[689,695],{"_path":690,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":691,"description":692,"layout":11,"label":12,"_type":682,"_id":693,"_source":684,"_file":694,"_extension":686},"/design-system/components/contact-us","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","content:design-system:5.components:contact-us.md","design-system/5.components/contact-us.md",{"_path":696,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":697,"description":698,"layout":11,"label":12,"_type":682,"_id":699,"_source":684,"_file":700,"_extension":686},"/design-system/components/detail-list","Detail list","The Detail list component shows a list of key information to users.","content:design-system:5.components:detail-list.md","design-system/5.components/detail-list.md",{},[703,708,947],{"title":704,"_path":705,"icon":706,"layout":707},"Ripple Design System","/","carbon:home","home",{"title":709,"_path":710,"children":711},"Design System","/design-system",[712,728,743,771,805],{"title":713,"_path":714,"children":715},"About","/design-system/about",[716,719,722,725],{"title":717,"_path":718,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":720,"_path":721,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":723,"_path":724,"layout":11},"Support","/design-system/about/getting-support",{"title":726,"_path":727,"layout":11},"Contributing","/design-system/about/contributing",{"title":729,"_path":730,"children":731},"Design","/design-system/design",[732,735,738,741],{"title":733,"_path":734,"layout":11},"Getting started","/design-system/design/getting-started",{"title":736,"_path":737,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":739,"_path":740,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":742,"_path":633,"layout":11},"Theming guidance for designers",{"title":744,"_path":745,"children":746},"Develop","/design-system/develop",[747,749,751,753],{"title":733,"_path":748,"layout":11},"/design-system/develop/getting-started",{"title":726,"_path":750,"layout":11},"/design-system/develop/contributing",{"title":752,"_path":641,"layout":11},"Theme and brand application",{"title":24,"_path":754,"children":755,"layout":11},"/design-system/develop/usage",[756,759,762,765,768],{"title":757,"_path":758,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":760,"_path":761,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":763,"_path":764,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":766,"_path":767,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":769,"_path":770,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":772,"_path":773,"children":774},"Styles","/design-system/styles",[775,778,781,784,787,790,793,796,799,802],{"title":776,"_path":777,"layout":11},"Colour","/design-system/styles/colour",{"title":779,"_path":780,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":782,"_path":783,"layout":11},"Grid","/design-system/styles/grid",{"title":785,"_path":786,"layout":11},"Icons","/design-system/styles/icons",{"title":788,"_path":789,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":791,"_path":792,"layout":11},"Layout","/design-system/styles/layout",{"title":794,"_path":795,"layout":11},"Logo","/design-system/styles/logo",{"title":797,"_path":798,"layout":11},"Motion","/design-system/styles/motion",{"title":800,"_path":801,"layout":11},"Spacing","/design-system/styles/spacing",{"title":803,"_path":804,"layout":11},"Typography","/design-system/styles/typography",{"title":806,"_path":807,"children":808},"Components","/design-system/components",[809,812,815,818,821,824,827,830,833,836,839,842,845,848,851,852,853,854,857,860,863,866,869,872,875,878,881,884,887,890,893,896,899,902,905,908,911,914,917,920,923,926,929,932,935,938,941,944],{"title":810,"_path":811,"layout":11},"Accordion","/design-system/components/accordion",{"title":813,"_path":814,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":816,"_path":817,"layout":11},"Alert","/design-system/components/alert",{"title":819,"_path":820,"layout":11},"Block quote","/design-system/components/block-quote",{"title":822,"_path":823,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":825,"_path":826,"layout":11},"Button","/design-system/components/button",{"title":828,"_path":829,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":831,"_path":832,"layout":11},"Callout","/design-system/components/callout",{"title":834,"_path":835,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":837,"_path":838,"layout":11},"Card","/design-system/components/card",{"title":840,"_path":841,"layout":11},"Carousel","/design-system/components/carousel",{"title":843,"_path":844,"layout":11},"Category grid","/design-system/components/category-grid",{"title":846,"_path":847,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":849,"_path":850,"layout":11},"Chip","/design-system/components/chip",{"title":691,"_path":690,"layout":11},{"title":9,"_path":5,"layout":11},{"title":697,"_path":696,"layout":11},{"title":855,"_path":856,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":858,"_path":859,"layout":11},"File","/design-system/components/file",{"title":861,"_path":862,"layout":11},"Footer","/design-system/components/footer",{"title":864,"_path":865,"layout":11},"Form alert","/design-system/components/form-alert",{"title":867,"_path":868,"layout":11},"Form","/design-system/components/form",{"title":870,"_path":871,"layout":11},"Header","/design-system/components/header",{"title":873,"_path":874,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":876,"_path":877,"layout":11},"Input field","/design-system/components/input-field",{"title":879,"_path":880,"layout":11},"Key dates","/design-system/components/key-dates",{"title":882,"_path":883,"layout":11},"Media embed","/design-system/components/media-embed",{"title":885,"_path":886,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":888,"_path":889,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":891,"_path":892,"layout":11},"Media","/design-system/components/media",{"title":894,"_path":895,"layout":11},"Option button","/design-system/components/option-button",{"title":897,"_path":898,"layout":11},"Page action","/design-system/components/page-action",{"title":900,"_path":901,"layout":11},"Pagination","/design-system/components/pagination",{"title":903,"_path":904,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":906,"_path":907,"layout":11},"Profile","/design-system/components/profile",{"title":909,"_path":910,"layout":11},"Radio button","/design-system/components/radio-button",{"title":912,"_path":913,"layout":11},"Related links","/design-system/components/related-links",{"title":915,"_path":916,"layout":11},"Results listing","/design-system/components/results-listing",{"title":918,"_path":919,"layout":11},"Search bar","/design-system/components/search-bar",{"title":921,"_path":922,"layout":11},"Skip link","/design-system/components/skip-link",{"title":924,"_path":925,"layout":11},"Social share","/design-system/components/social-share",{"title":927,"_path":928,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":930,"_path":931,"layout":11},"Table","/design-system/components/table",{"title":933,"_path":934,"layout":11},"Tabs","/design-system/components/tabs",{"title":936,"_path":937,"layout":11},"Tag","/design-system/components/tag",{"title":939,"_path":940,"layout":11},"Text area","/design-system/components/text-area",{"title":942,"_path":943,"layout":11},"Timeline","/design-system/components/timeline",{"title":945,"_path":946,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":948,"_path":949,"children":950,"layout":11},"Ripple Framework","/framework",[951,952,970,992],{"title":948,"_path":949,"layout":11},{"title":953,"_path":954,"children":955},"Key Concepts","/framework/key-concepts",[956,958,961,964,967],{"title":763,"_path":957,"layout":11},"/framework/key-concepts/nuxt",{"title":959,"_path":960,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":962,"_path":963,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":965,"_path":966,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":968,"_path":969,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":971,"_path":972,"children":973},"Guides","/framework/guides",[974,977,980,983,986,989],{"title":975,"_path":976,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":978,"_path":979,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":981,"_path":982,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":984,"_path":985,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":987,"_path":988,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":990,"_path":991,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":993,"_path":994,"layout":11},"Core modules","/framework/core-modules",["Reactive",996],{"module-navigation":997},null,true,"/design-system/components/date-input/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Date input</h1><p class="rpl-type-p-large" data-v-3163c6df>The Date input component helps users enter a date.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar.<!--]--></p><p><!--[-->Date input has 3 fields: day, month and year.<!--]--></p><p><!--[-->Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-to-use-this-component"><a href="#how-to-use-this-component"><!--[-->How to use this component<!--]--></a></h3><p><!--[-->You must use a form label with a date input.<!--]--></p><p><!--[-->You can use an date input with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><h4 id="avoid-placeholder-text"><a href="#avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></a></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a date input.<!--]--></p><p><!--[-->For example, hint text can include specific formatting examples or requirements.<!--]--></p><p><!--[-->Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always use date inputs with a label.<!--]--></li><li><!--[-->Write short and concise labels.<!--]--></li><li><!--[-->Use hint text to show the expected date format, for example, ‘07 11 2022’.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->If it’s not likely users will know the exact date, don’t use date input.<!--]--></li><li><!--[-->Don’t use without a form label or hint text specifying the expected date format.<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions or important examples.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The date input has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for a date input, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: whole date field is empty<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘Enter [the missing information]'.<!--]--></li><li><!--[-->Example: ‘Enter your dog’s birthday'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: some of date field is empty or incomplete<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must include a [name of empty or incomplete field]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s birthday must include a month'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: impossible date entered<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be a real date’.<!--]--></li><li><!--[-->Example: ‘Your dog’s birthday must be a real date'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: future date given when past date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be in the past’.<!--]--></li><li><!--[-->Example: ‘Your dog’s first playdate must be in the past'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: future date given when today or past date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be today or in the past’.<!--]--></li><li><!--[-->Example: ‘Your dog’s first beach visit must be today or in the past'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: past date given when future date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be in the future’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next raincoat purchase must be in the future'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: past date given when today or future date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be today or in the future’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next zoomies must be today or in the future'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not on or after another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not after another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be after [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not the same as or before another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be on or before [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next hike must be on or before 2 January 2025'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not before another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be before [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not between 2 other dates<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘The date must not include [characters]'.<!--]--></li><li><!--[-->Example: ‘The date must not include + & ~'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘The date must only include numbers'.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--invalid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--invalid&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-date-input--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/date-input.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/date-input/_payload.json">[{"state":1,"_errors":995,"serverRendered":998,"path":999,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":687,"$sdd-globals":701,"$sdd-navigation":702},{"/design-system/components/date-input":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":682,"_id":683,"_source":684,"_file":685,"_extension":686},"/design-system/components/date-input","components",false,"","Date input","The Date input component helps users enter a date.","page","Core",{"type":14,"children":15,"toc":666},"root",[16,25,31,36,41,46,53,58,63,83,90,95,100,106,111,116,121,127,145,151,184,188,194,199,212,218,221,227,231,237,242,247,252,261,279,287,305,313,330,338,355,363,380,388,405,413,430,438,455,463,480,488,505,513,530,538,555,563,580,588,600,604,607,613,618,625,647,650,656,661],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Date input has 3 fields: day, month and year.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"forms-date-input--default-story",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"how-to-use-this-component",[51],{"type":23,"value":52},"How to use this component",{"type":17,"tag":26,"props":54,"children":55},{},[56],{"type":23,"value":57},"You must use a form label with a date input.",{"type":17,"tag":26,"props":59,"children":60},{},[61],{"type":23,"value":62},"You can use an date input with:",{"type":17,"tag":64,"props":65,"children":66},"ul",{},[67,73,78],{"type":17,"tag":68,"props":69,"children":70},"li",{},[71],{"type":23,"value":72},"requirement label",{"type":17,"tag":68,"props":74,"children":75},{},[76],{"type":23,"value":77},"hint text",{"type":17,"tag":68,"props":79,"children":80},{},[81],{"type":23,"value":82},"placeholder text.",{"type":17,"tag":84,"props":85,"children":87},"h4",{"id":86},"avoid-placeholder-text",[88],{"type":23,"value":89},"Avoid placeholder text",{"type":17,"tag":26,"props":91,"children":92},{},[93],{"type":23,"value":94},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":96,"children":97},{},[98],{"type":23,"value":99},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":17,"tag":84,"props":101,"children":103},{"id":102},"hint-text",[104],{"type":23,"value":105},"Hint text",{"type":17,"tag":26,"props":107,"children":108},{},[109],{"type":23,"value":110},"Hint text can be used to tell the user what, or how, to successfully complete a date input.",{"type":17,"tag":26,"props":112,"children":113},{},[114],{"type":23,"value":115},"For example, hint text can include specific formatting examples or requirements.",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":47,"props":122,"children":124},{"id":123},"when-and-how-to-use",[125],{"type":23,"value":126},"When and how to use",{"type":17,"tag":64,"props":128,"children":129},{},[130,135,140],{"type":17,"tag":68,"props":131,"children":132},{},[133],{"type":23,"value":134},"Always use date inputs with a label.",{"type":17,"tag":68,"props":136,"children":137},{},[138],{"type":23,"value":139},"Write short and concise labels.",{"type":17,"tag":68,"props":141,"children":142},{},[143],{"type":23,"value":144},"Use hint text to show the expected date format, for example, ‘07 11 2022’.",{"type":17,"tag":47,"props":146,"children":148},{"id":147},"when-and-how-not-to-use",[149],{"type":23,"value":150},"When and how not to use",{"type":17,"tag":64,"props":152,"children":153},{},[154,159,164,169,174,179],{"type":17,"tag":68,"props":155,"children":156},{},[157],{"type":23,"value":158},"If it’s not likely users will know the exact date, don’t use date input.",{"type":17,"tag":68,"props":160,"children":161},{},[162],{"type":23,"value":163},"Don’t use without a form label or hint text specifying the expected date format.",{"type":17,"tag":68,"props":165,"children":166},{},[167],{"type":23,"value":168},"Avoid placeholder text because it can cause accessibility issues.",{"type":17,"tag":68,"props":170,"children":171},{},[172],{"type":23,"value":173},"Don’t disable copy and paste.",{"type":17,"tag":68,"props":175,"children":176},{},[177],{"type":23,"value":178},"Don’t use placeholder text to give instructions or important examples.",{"type":17,"tag":68,"props":180,"children":181},{},[182],{"type":23,"value":183},"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.",{"type":17,"tag":185,"props":186,"children":187},"hr",{},[],{"type":17,"tag":18,"props":189,"children":191},{"id":190},"variants",[192],{"type":23,"value":193},"Variants",{"type":17,"tag":26,"props":195,"children":196},{},[197],{"type":23,"value":198},"The date input has 2 variants:",{"type":17,"tag":64,"props":200,"children":201},{},[202,207],{"type":17,"tag":68,"props":203,"children":204},{},[205],{"type":23,"value":206},"default, used on white backgrounds",{"type":17,"tag":68,"props":208,"children":209},{},[210],{"type":23,"value":211},"reverse, used on neutral backgrounds.",{"type":17,"tag":47,"props":213,"children":215},{"id":214},"default",[216],{"type":23,"value":217},"Default",{"type":17,"tag":42,"props":219,"children":220},{"id":44},[],{"type":17,"tag":47,"props":222,"children":224},{"id":223},"reverse",[225],{"type":23,"value":226},"Reverse",{"type":17,"tag":42,"props":228,"children":230},{"id":229},"forms-date-input--reverse",[],{"type":17,"tag":47,"props":232,"children":234},{"id":233},"error",[235],{"type":23,"value":236},"Error",{"type":17,"tag":26,"props":238,"children":239},{},[240],{"type":23,"value":241},"All form inputs share error state styling.",{"type":17,"tag":26,"props":243,"children":244},{},[245],{"type":23,"value":246},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":248,"children":249},{},[250],{"type":23,"value":251},"When creating an error message for a date input, use the wording below.",{"type":17,"tag":26,"props":253,"children":254},{},[255],{"type":17,"tag":256,"props":257,"children":258},"strong",{},[259],{"type":23,"value":260},"Error: whole date field is empty",{"type":17,"tag":64,"props":262,"children":263},{},[264,269,274],{"type":17,"tag":68,"props":265,"children":266},{},[267],{"type":23,"value":268},"Highlight area: entire date input.",{"type":17,"tag":68,"props":270,"children":271},{},[272],{"type":23,"value":273},"Error message: ‘Enter [the missing information]'.",{"type":17,"tag":68,"props":275,"children":276},{},[277],{"type":23,"value":278},"Example: ‘Enter your dog’s birthday'.",{"type":17,"tag":26,"props":280,"children":281},{},[282],{"type":17,"tag":256,"props":283,"children":284},{},[285],{"type":23,"value":286},"Error: some of date field is empty or incomplete",{"type":17,"tag":64,"props":288,"children":289},{},[290,295,300],{"type":17,"tag":68,"props":291,"children":292},{},[293],{"type":23,"value":294},"Highlight area: relevant day, month and/or year fields.",{"type":17,"tag":68,"props":296,"children":297},{},[298],{"type":23,"value":299},"Error message: ‘[Information requested] must include a [name of empty or incomplete field]’.",{"type":17,"tag":68,"props":301,"children":302},{},[303],{"type":23,"value":304},"Example: ‘Your dog’s birthday must include a month'.",{"type":17,"tag":26,"props":306,"children":307},{},[308],{"type":17,"tag":256,"props":309,"children":310},{},[311],{"type":23,"value":312},"Error: impossible date entered",{"type":17,"tag":64,"props":314,"children":315},{},[316,320,325],{"type":17,"tag":68,"props":317,"children":318},{},[319],{"type":23,"value":294},{"type":17,"tag":68,"props":321,"children":322},{},[323],{"type":23,"value":324},"Error message: ‘[Information requested] must be a real date’.",{"type":17,"tag":68,"props":326,"children":327},{},[328],{"type":23,"value":329},"Example: ‘Your dog’s birthday must be a real date'.",{"type":17,"tag":26,"props":331,"children":332},{},[333],{"type":17,"tag":256,"props":334,"children":335},{},[336],{"type":23,"value":337},"Error: future date given when past date needed",{"type":17,"tag":64,"props":339,"children":340},{},[341,345,350],{"type":17,"tag":68,"props":342,"children":343},{},[344],{"type":23,"value":268},{"type":17,"tag":68,"props":346,"children":347},{},[348],{"type":23,"value":349},"Error message: ‘[Information requested] must be in the past’.",{"type":17,"tag":68,"props":351,"children":352},{},[353],{"type":23,"value":354},"Example: ‘Your dog’s first playdate must be in the past'.",{"type":17,"tag":26,"props":356,"children":357},{},[358],{"type":17,"tag":256,"props":359,"children":360},{},[361],{"type":23,"value":362},"Error: future date given when today or past date needed",{"type":17,"tag":64,"props":364,"children":365},{},[366,370,375],{"type":17,"tag":68,"props":367,"children":368},{},[369],{"type":23,"value":268},{"type":17,"tag":68,"props":371,"children":372},{},[373],{"type":23,"value":374},"Error message: ‘[Information requested] must be today or in the past’.",{"type":17,"tag":68,"props":376,"children":377},{},[378],{"type":23,"value":379},"Example: ‘Your dog’s first beach visit must be today or in the past'.",{"type":17,"tag":26,"props":381,"children":382},{},[383],{"type":17,"tag":256,"props":384,"children":385},{},[386],{"type":23,"value":387},"Error: past date given when future date needed",{"type":17,"tag":64,"props":389,"children":390},{},[391,395,400],{"type":17,"tag":68,"props":392,"children":393},{},[394],{"type":23,"value":268},{"type":17,"tag":68,"props":396,"children":397},{},[398],{"type":23,"value":399},"Error message: ‘[Information requested] must be in the future’.",{"type":17,"tag":68,"props":401,"children":402},{},[403],{"type":23,"value":404},"Example: ‘Your dog’s next raincoat purchase must be in the future'.",{"type":17,"tag":26,"props":406,"children":407},{},[408],{"type":17,"tag":256,"props":409,"children":410},{},[411],{"type":23,"value":412},"Error: past date given when today or future date needed",{"type":17,"tag":64,"props":414,"children":415},{},[416,420,425],{"type":17,"tag":68,"props":417,"children":418},{},[419],{"type":23,"value":268},{"type":17,"tag":68,"props":421,"children":422},{},[423],{"type":23,"value":424},"Error message: ‘[Information requested] must be today or in the future’.",{"type":17,"tag":68,"props":426,"children":427},{},[428],{"type":23,"value":429},"Example: ‘Your dog’s next zoomies must be today or in the future'.",{"type":17,"tag":26,"props":431,"children":432},{},[433],{"type":17,"tag":256,"props":434,"children":435},{},[436],{"type":23,"value":437},"Error: date is not on or after another particular date",{"type":17,"tag":64,"props":439,"children":440},{},[441,445,450],{"type":17,"tag":68,"props":442,"children":443},{},[444],{"type":23,"value":268},{"type":17,"tag":68,"props":446,"children":447},{},[448],{"type":23,"value":449},"Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’.",{"type":17,"tag":68,"props":451,"children":452},{},[453],{"type":23,"value":454},"Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'.",{"type":17,"tag":26,"props":456,"children":457},{},[458],{"type":17,"tag":256,"props":459,"children":460},{},[461],{"type":23,"value":462},"Error: date is not after another particular date",{"type":17,"tag":64,"props":464,"children":465},{},[466,470,475],{"type":17,"tag":68,"props":467,"children":468},{},[469],{"type":23,"value":268},{"type":17,"tag":68,"props":471,"children":472},{},[473],{"type":23,"value":474},"Error message: ‘[Information requested] must be after [particular date and optional description]’.",{"type":17,"tag":68,"props":476,"children":477},{},[478],{"type":23,"value":479},"Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'.",{"type":17,"tag":26,"props":481,"children":482},{},[483],{"type":17,"tag":256,"props":484,"children":485},{},[486],{"type":23,"value":487},"Error: date is not the same as or before another particular date",{"type":17,"tag":64,"props":489,"children":490},{},[491,495,500],{"type":17,"tag":68,"props":492,"children":493},{},[494],{"type":23,"value":268},{"type":17,"tag":68,"props":496,"children":497},{},[498],{"type":23,"value":499},"Error message: ‘[Information requested] must be on or before [particular date and optional description]’.",{"type":17,"tag":68,"props":501,"children":502},{},[503],{"type":23,"value":504},"Example: ‘Your dog’s next hike must be on or before 2 January 2025'.",{"type":17,"tag":26,"props":506,"children":507},{},[508],{"type":17,"tag":256,"props":509,"children":510},{},[511],{"type":23,"value":512},"Error: date is not before another particular date",{"type":17,"tag":64,"props":514,"children":515},{},[516,520,525],{"type":17,"tag":68,"props":517,"children":518},{},[519],{"type":23,"value":268},{"type":17,"tag":68,"props":521,"children":522},{},[523],{"type":23,"value":524},"Error message: ‘[Information requested] must be before [particular date and optional description]’.",{"type":17,"tag":68,"props":526,"children":527},{},[528],{"type":23,"value":529},"Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'.",{"type":17,"tag":26,"props":531,"children":532},{},[533],{"type":17,"tag":256,"props":534,"children":535},{},[536],{"type":23,"value":537},"Error: date is not between 2 other dates",{"type":17,"tag":64,"props":539,"children":540},{},[541,545,550],{"type":17,"tag":68,"props":542,"children":543},{},[544],{"type":23,"value":268},{"type":17,"tag":68,"props":546,"children":547},{},[548],{"type":23,"value":549},"Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’.",{"type":17,"tag":68,"props":551,"children":552},{},[553],{"type":23,"value":554},"Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'.",{"type":17,"tag":26,"props":556,"children":557},{},[558],{"type":17,"tag":256,"props":559,"children":560},{},[561],{"type":23,"value":562},"Error: date uses known characters that aren’t allowed",{"type":17,"tag":64,"props":564,"children":565},{},[566,570,575],{"type":17,"tag":68,"props":567,"children":568},{},[569],{"type":23,"value":294},{"type":17,"tag":68,"props":571,"children":572},{},[573],{"type":23,"value":574},"Error message: ‘The date must not include [characters]'.",{"type":17,"tag":68,"props":576,"children":577},{},[578],{"type":23,"value":579},"Example: ‘The date must not include + & ~'.",{"type":17,"tag":26,"props":581,"children":582},{},[583],{"type":17,"tag":256,"props":584,"children":585},{},[586],{"type":23,"value":587},"Error: date uses unknown characters that aren’t allowed",{"type":17,"tag":64,"props":589,"children":590},{},[591,595],{"type":17,"tag":68,"props":592,"children":593},{},[594],{"type":23,"value":294},{"type":17,"tag":68,"props":596,"children":597},{},[598],{"type":23,"value":599},"Error message: ‘The date must only include numbers'.",{"type":17,"tag":42,"props":601,"children":603},{"id":602},"forms-date-input--invalid",[],{"type":17,"tag":185,"props":605,"children":606},{},[],{"type":17,"tag":18,"props":608,"children":610},{"id":609},"theming",[611],{"type":23,"value":612},"Theming",{"type":17,"tag":26,"props":614,"children":615},{},[616],{"type":23,"value":617},"Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":619,"props":620,"children":621},"docs-theme-chooser",{},[622],{"type":17,"tag":42,"props":623,"children":624},{"id":44},[],{"type":17,"tag":26,"props":626,"children":627},{},[628,630,637,639,645],{"type":23,"value":629},"To create your own theme see ",{"type":17,"tag":631,"props":632,"children":634},"a",{"href":633},"/design-system/design/theming-guidance-for-designers",[635],{"type":23,"value":636},"theming guidance for designers",{"type":23,"value":638}," or ",{"type":17,"tag":631,"props":640,"children":642},{"href":641},"/design-system/develop/theming",[643],{"type":23,"value":644},"theming guidance for developers",{"type":23,"value":646},".",{"type":17,"tag":185,"props":648,"children":649},{},[],{"type":17,"tag":18,"props":651,"children":653},{"id":652},"rationale",[654],{"type":23,"value":655},"Rationale",{"type":17,"tag":26,"props":657,"children":658},{},[659],{"type":23,"value":660},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":662,"children":663},{},[664],{"type":23,"value":665},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":667,"depth":667,"links":668},2,[669,675,680,681],{"id":20,"depth":667,"text":24,"children":670},[671,673,674],{"id":49,"depth":672,"text":52},3,{"id":123,"depth":672,"text":126},{"id":147,"depth":672,"text":150},{"id":190,"depth":667,"text":193,"children":676},[677,678,679],{"id":214,"depth":672,"text":217},{"id":223,"depth":672,"text":226},{"id":233,"depth":672,"text":236},{"id":609,"depth":667,"text":612},{"id":652,"depth":667,"text":655},"markdown","content:design-system:5.components:date-input.md","content","design-system/5.components/date-input.md","md",{"/design-system/components/date-input":688},[689,695],{"_path":690,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":691,"description":692,"layout":11,"label":12,"_type":682,"_id":693,"_source":684,"_file":694,"_extension":686},"/design-system/components/contact-us","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","content:design-system:5.components:contact-us.md","design-system/5.components/contact-us.md",{"_path":696,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":697,"description":698,"layout":11,"label":12,"_type":682,"_id":699,"_source":684,"_file":700,"_extension":686},"/design-system/components/detail-list","Detail list","The Detail list component shows a list of key information to users.","content:design-system:5.components:detail-list.md","design-system/5.components/detail-list.md",{},[703,708,947],{"title":704,"_path":705,"icon":706,"layout":707},"Ripple Design System","/","carbon:home","home",{"title":709,"_path":710,"children":711},"Design System","/design-system",[712,728,743,771,805],{"title":713,"_path":714,"children":715},"About","/design-system/about",[716,719,722,725],{"title":717,"_path":718,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":720,"_path":721,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":723,"_path":724,"layout":11},"Support","/design-system/about/getting-support",{"title":726,"_path":727,"layout":11},"Contributing","/design-system/about/contributing",{"title":729,"_path":730,"children":731},"Design","/design-system/design",[732,735,738,741],{"title":733,"_path":734,"layout":11},"Getting started","/design-system/design/getting-started",{"title":736,"_path":737,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":739,"_path":740,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":742,"_path":633,"layout":11},"Theming guidance for designers",{"title":744,"_path":745,"children":746},"Develop","/design-system/develop",[747,749,751,753],{"title":733,"_path":748,"layout":11},"/design-system/develop/getting-started",{"title":726,"_path":750,"layout":11},"/design-system/develop/contributing",{"title":752,"_path":641,"layout":11},"Theme and brand application",{"title":24,"_path":754,"children":755,"layout":11},"/design-system/develop/usage",[756,759,762,765,768],{"title":757,"_path":758,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":760,"_path":761,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":763,"_path":764,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":766,"_path":767,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":769,"_path":770,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":772,"_path":773,"children":774},"Styles","/design-system/styles",[775,778,781,784,787,790,793,796,799,802],{"title":776,"_path":777,"layout":11},"Colour","/design-system/styles/colour",{"title":779,"_path":780,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":782,"_path":783,"layout":11},"Grid","/design-system/styles/grid",{"title":785,"_path":786,"layout":11},"Icons","/design-system/styles/icons",{"title":788,"_path":789,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":791,"_path":792,"layout":11},"Layout","/design-system/styles/layout",{"title":794,"_path":795,"layout":11},"Logo","/design-system/styles/logo",{"title":797,"_path":798,"layout":11},"Motion","/design-system/styles/motion",{"title":800,"_path":801,"layout":11},"Spacing","/design-system/styles/spacing",{"title":803,"_path":804,"layout":11},"Typography","/design-system/styles/typography",{"title":806,"_path":807,"children":808},"Components","/design-system/components",[809,812,815,818,821,824,827,830,833,836,839,842,845,848,851,852,853,854,857,860,863,866,869,872,875,878,881,884,887,890,893,896,899,902,905,908,911,914,917,920,923,926,929,932,935,938,941,944],{"title":810,"_path":811,"layout":11},"Accordion","/design-system/components/accordion",{"title":813,"_path":814,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":816,"_path":817,"layout":11},"Alert","/design-system/components/alert",{"title":819,"_path":820,"layout":11},"Block quote","/design-system/components/block-quote",{"title":822,"_path":823,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":825,"_path":826,"layout":11},"Button","/design-system/components/button",{"title":828,"_path":829,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":831,"_path":832,"layout":11},"Callout","/design-system/components/callout",{"title":834,"_path":835,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":837,"_path":838,"layout":11},"Card","/design-system/components/card",{"title":840,"_path":841,"layout":11},"Carousel","/design-system/components/carousel",{"title":843,"_path":844,"layout":11},"Category grid","/design-system/components/category-grid",{"title":846,"_path":847,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":849,"_path":850,"layout":11},"Chip","/design-system/components/chip",{"title":691,"_path":690,"layout":11},{"title":9,"_path":5,"layout":11},{"title":697,"_path":696,"layout":11},{"title":855,"_path":856,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":858,"_path":859,"layout":11},"File","/design-system/components/file",{"title":861,"_path":862,"layout":11},"Footer","/design-system/components/footer",{"title":864,"_path":865,"layout":11},"Form alert","/design-system/components/form-alert",{"title":867,"_path":868,"layout":11},"Form","/design-system/components/form",{"title":870,"_path":871,"layout":11},"Header","/design-system/components/header",{"title":873,"_path":874,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":876,"_path":877,"layout":11},"Input field","/design-system/components/input-field",{"title":879,"_path":880,"layout":11},"Key dates","/design-system/components/key-dates",{"title":882,"_path":883,"layout":11},"Media embed","/design-system/components/media-embed",{"title":885,"_path":886,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":888,"_path":889,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":891,"_path":892,"layout":11},"Media","/design-system/components/media",{"title":894,"_path":895,"layout":11},"Option button","/design-system/components/option-button",{"title":897,"_path":898,"layout":11},"Page action","/design-system/components/page-action",{"title":900,"_path":901,"layout":11},"Pagination","/design-system/components/pagination",{"title":903,"_path":904,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":906,"_path":907,"layout":11},"Profile","/design-system/components/profile",{"title":909,"_path":910,"layout":11},"Radio button","/design-system/components/radio-button",{"title":912,"_path":913,"layout":11},"Related links","/design-system/components/related-links",{"title":915,"_path":916,"layout":11},"Results listing","/design-system/components/results-listing",{"title":918,"_path":919,"layout":11},"Search bar","/design-system/components/search-bar",{"title":921,"_path":922,"layout":11},"Skip link","/design-system/components/skip-link",{"title":924,"_path":925,"layout":11},"Social share","/design-system/components/social-share",{"title":927,"_path":928,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":930,"_path":931,"layout":11},"Table","/design-system/components/table",{"title":933,"_path":934,"layout":11},"Tabs","/design-system/components/tabs",{"title":936,"_path":937,"layout":11},"Tag","/design-system/components/tag",{"title":939,"_path":940,"layout":11},"Text area","/design-system/components/text-area",{"title":942,"_path":943,"layout":11},"Timeline","/design-system/components/timeline",{"title":945,"_path":946,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":948,"_path":949,"children":950,"layout":11},"Ripple Framework","/framework",[951,952,970,992],{"title":948,"_path":949,"layout":11},{"title":953,"_path":954,"children":955},"Key Concepts","/framework/key-concepts",[956,958,961,964,967],{"title":763,"_path":957,"layout":11},"/framework/key-concepts/nuxt",{"title":959,"_path":960,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":962,"_path":963,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":965,"_path":966,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":968,"_path":969,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":971,"_path":972,"children":973},"Guides","/framework/guides",[974,977,980,983,986,989],{"title":975,"_path":976,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":978,"_path":979,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":981,"_path":982,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":984,"_path":985,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":987,"_path":988,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":990,"_path":991,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":993,"_path":994,"layout":11},"Core modules","/framework/core-modules",["Reactive",996],{"module-navigation":997},null,true,"/design-system/components/date-input/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/detail-list/index.html b/design-system/components/detail-list/index.html index 1d4361aaf8..d552f7ea77 100644 --- a/design-system/components/detail-list/index.html +++ b/design-system/components/detail-list/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Detail list</h1><p class="rpl-type-p-large" data-v-3163c6df>The Detail list component shows a list of key information to users.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.<!--]--></p><p><!--[-->Each row of the detail list comprises a:<!--]--></p><ul><!--[--><li><!--[-->label, a descriptive or informative label for your content, for example, 'Location'<!--]--></li><li><!--[-->content, the piece of information itself, for example, 'East Gippsland'.<!--]--></li><!--]--></ul><p><!--[-->The detail list is used to display:<!--]--></p><ul><!--[--><li><!--[-->metadata, for example, ‘Published date' (which shows as '22 March 2023’)<!--]--></li><li><!--[-->status, for example of a program or grant.<!--]--></li><!--]--></ul><p><!--[-->Only use the detail list for simple information. For data or complex information, consider using a table.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-description-list--with-link&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-description-list--with-link&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use single words only for the label.<!--]--></li><li><!--[-->Include a link if you need to.<!--]--></li><li><!--[-->Keep the summary content and labels clear and concise.<!--]--></li><li><!--[-->Align all summary content to the longest label.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use labels for unrelated summary content.<!--]--></li><li><!--[-->Don't use it to surface information that is not important to users.<!--]--></li><li><!--[-->Don't use with complex or long form content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->When a link is present, the detail list uses the link colour for interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-description-list--with-link&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-description-list--with-link&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/detail-list.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/detail-list/_payload.json">[{"state":1,"_errors":499,"serverRendered":502,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":189,"$sdd-globals":203,"$sdd-navigation":204},{"/design-system/components/detail-list":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":184,"_id":185,"_source":186,"_file":187,"_extension":188},"/design-system/components/detail-list","components",false,"","Detail list","The Detail list component shows a list of key information to users.","page","Core",{"type":14,"children":15,"toc":175},"root",[16,25,31,36,51,56,69,74,79,86,109,115,133,137,143,148,155],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Each row of the detail list comprises a:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"label, a descriptive or informative label for your content, for example, 'Location'",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"content, the piece of information itself, for example, 'East Gippsland'.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"The detail list is used to display:",{"type":17,"tag":37,"props":57,"children":58},{},[59,64],{"type":17,"tag":41,"props":60,"children":61},{},[62],{"type":23,"value":63},"metadata, for example, ‘Published date' (which shows as '22 March 2023’)",{"type":17,"tag":41,"props":65,"children":66},{},[67],{"type":23,"value":68},"status, for example of a program or grant.",{"type":17,"tag":26,"props":70,"children":71},{},[72],{"type":23,"value":73},"Only use the detail list for simple information. For data or complex information, consider using a table.",{"type":17,"tag":75,"props":76,"children":78},"docs-example",{"id":77},"core-containers-description-list--with-link",[],{"type":17,"tag":80,"props":81,"children":83},"h3",{"id":82},"when-and-how-to-use",[84],{"type":23,"value":85},"When and how to use",{"type":17,"tag":37,"props":87,"children":88},{},[89,94,99,104],{"type":17,"tag":41,"props":90,"children":91},{},[92],{"type":23,"value":93},"Use single words only for the label.",{"type":17,"tag":41,"props":95,"children":96},{},[97],{"type":23,"value":98},"Include a link if you need to.",{"type":17,"tag":41,"props":100,"children":101},{},[102],{"type":23,"value":103},"Keep the summary content and labels clear and concise.",{"type":17,"tag":41,"props":105,"children":106},{},[107],{"type":23,"value":108},"Align all summary content to the longest label.",{"type":17,"tag":80,"props":110,"children":112},{"id":111},"when-and-how-not-to-use",[113],{"type":23,"value":114},"When and how not to use",{"type":17,"tag":37,"props":116,"children":117},{},[118,123,128],{"type":17,"tag":41,"props":119,"children":120},{},[121],{"type":23,"value":122},"Don't use labels for unrelated summary content.",{"type":17,"tag":41,"props":124,"children":125},{},[126],{"type":23,"value":127},"Don't use it to surface information that is not important to users.",{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"Don't use with complex or long form content.",{"type":17,"tag":134,"props":135,"children":136},"hr",{},[],{"type":17,"tag":18,"props":138,"children":140},{"id":139},"theming",[141],{"type":23,"value":142},"Theming",{"type":17,"tag":26,"props":144,"children":145},{},[146],{"type":23,"value":147},"When a link is present, the detail list uses the link colour for interaction states.",{"type":17,"tag":149,"props":150,"children":151},"docs-theme-chooser",{},[152],{"type":17,"tag":75,"props":153,"children":154},{"id":77},[],{"type":17,"tag":26,"props":156,"children":157},{},[158,160,166,168,173],{"type":23,"value":159},"To create your own theme, see ",{"type":17,"tag":161,"props":162,"children":163},"a",{"href":8},[164],{"type":23,"value":165},"theming guidance for designers",{"type":23,"value":167}," or ",{"type":17,"tag":161,"props":169,"children":170},{"href":8},[171],{"type":23,"value":172},"theming guidance for developers",{"type":23,"value":174},".",{"title":8,"searchDepth":176,"depth":176,"links":177},2,[178,183],{"id":20,"depth":176,"text":24,"children":179},[180,182],{"id":82,"depth":181,"text":85},3,{"id":111,"depth":181,"text":114},{"id":139,"depth":176,"text":142},"markdown","content:design-system:5.components:detail-list.md","content","design-system/5.components/detail-list.md","md",{"/design-system/components/detail-list":190},[191,197],{"_path":192,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":193,"description":194,"layout":11,"label":12,"_type":184,"_id":195,"_source":186,"_file":196,"_extension":188},"/design-system/components/date-input","Date input","The Date input component helps users enter a date.","content:design-system:5.components:date-input.md","design-system/5.components/date-input.md",{"_path":198,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":199,"description":200,"layout":11,"label":12,"_type":184,"_id":201,"_source":186,"_file":202,"_extension":188},"/design-system/components/dropdown","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","content:design-system:5.components:dropdown.md","design-system/5.components/dropdown.md",{},[205,210,451],{"title":206,"_path":207,"icon":208,"layout":209},"Ripple Design System","/","carbon:home","home",{"title":211,"_path":212,"children":213},"Design System","/design-system",[214,230,246,275,309],{"title":215,"_path":216,"children":217},"About","/design-system/about",[218,221,224,227],{"title":219,"_path":220,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":222,"_path":223,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":225,"_path":226,"layout":11},"Support","/design-system/about/getting-support",{"title":228,"_path":229,"layout":11},"Contributing","/design-system/about/contributing",{"title":231,"_path":232,"children":233},"Design","/design-system/design",[234,237,240,243],{"title":235,"_path":236,"layout":11},"Getting started","/design-system/design/getting-started",{"title":238,"_path":239,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":241,"_path":242,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":244,"_path":245,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":247,"_path":248,"children":249},"Develop","/design-system/develop",[250,252,254,257],{"title":235,"_path":251,"layout":11},"/design-system/develop/getting-started",{"title":228,"_path":253,"layout":11},"/design-system/develop/contributing",{"title":255,"_path":256,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":258,"children":259,"layout":11},"/design-system/develop/usage",[260,263,266,269,272],{"title":261,"_path":262,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":264,"_path":265,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":267,"_path":268,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":270,"_path":271,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":273,"_path":274,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":276,"_path":277,"children":278},"Styles","/design-system/styles",[279,282,285,288,291,294,297,300,303,306],{"title":280,"_path":281,"layout":11},"Colour","/design-system/styles/colour",{"title":283,"_path":284,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":286,"_path":287,"layout":11},"Grid","/design-system/styles/grid",{"title":289,"_path":290,"layout":11},"Icons","/design-system/styles/icons",{"title":292,"_path":293,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":295,"_path":296,"layout":11},"Layout","/design-system/styles/layout",{"title":298,"_path":299,"layout":11},"Logo","/design-system/styles/logo",{"title":301,"_path":302,"layout":11},"Motion","/design-system/styles/motion",{"title":304,"_path":305,"layout":11},"Spacing","/design-system/styles/spacing",{"title":307,"_path":308,"layout":11},"Typography","/design-system/styles/typography",{"title":310,"_path":311,"children":312},"Components","/design-system/components",[313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,359,360,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448],{"title":314,"_path":315,"layout":11},"Accordion","/design-system/components/accordion",{"title":317,"_path":318,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":320,"_path":321,"layout":11},"Alert","/design-system/components/alert",{"title":323,"_path":324,"layout":11},"Block quote","/design-system/components/block-quote",{"title":326,"_path":327,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":329,"_path":330,"layout":11},"Button","/design-system/components/button",{"title":332,"_path":333,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":335,"_path":336,"layout":11},"Callout","/design-system/components/callout",{"title":338,"_path":339,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":341,"_path":342,"layout":11},"Card","/design-system/components/card",{"title":344,"_path":345,"layout":11},"Carousel","/design-system/components/carousel",{"title":347,"_path":348,"layout":11},"Category grid","/design-system/components/category-grid",{"title":350,"_path":351,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":353,"_path":354,"layout":11},"Chip","/design-system/components/chip",{"title":356,"_path":357,"layout":11},"Contact us","/design-system/components/contact-us",{"title":193,"_path":192,"layout":11},{"title":9,"_path":5,"layout":11},{"title":199,"_path":198,"layout":11},{"title":362,"_path":363,"layout":11},"File","/design-system/components/file",{"title":365,"_path":366,"layout":11},"Footer","/design-system/components/footer",{"title":368,"_path":369,"layout":11},"Form alert","/design-system/components/form-alert",{"title":371,"_path":372,"layout":11},"Form","/design-system/components/form",{"title":374,"_path":375,"layout":11},"Header","/design-system/components/header",{"title":377,"_path":378,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":380,"_path":381,"layout":11},"Input field","/design-system/components/input-field",{"title":383,"_path":384,"layout":11},"Key dates","/design-system/components/key-dates",{"title":386,"_path":387,"layout":11},"Media embed","/design-system/components/media-embed",{"title":389,"_path":390,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":392,"_path":393,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":395,"_path":396,"layout":11},"Media","/design-system/components/media",{"title":398,"_path":399,"layout":11},"Option button","/design-system/components/option-button",{"title":401,"_path":402,"layout":11},"Page action","/design-system/components/page-action",{"title":404,"_path":405,"layout":11},"Pagination","/design-system/components/pagination",{"title":407,"_path":408,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":410,"_path":411,"layout":11},"Profile","/design-system/components/profile",{"title":413,"_path":414,"layout":11},"Radio button","/design-system/components/radio-button",{"title":416,"_path":417,"layout":11},"Related links","/design-system/components/related-links",{"title":419,"_path":420,"layout":11},"Results listing","/design-system/components/results-listing",{"title":422,"_path":423,"layout":11},"Search bar","/design-system/components/search-bar",{"title":425,"_path":426,"layout":11},"Skip link","/design-system/components/skip-link",{"title":428,"_path":429,"layout":11},"Social share","/design-system/components/social-share",{"title":431,"_path":432,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":434,"_path":435,"layout":11},"Table","/design-system/components/table",{"title":437,"_path":438,"layout":11},"Tabs","/design-system/components/tabs",{"title":440,"_path":441,"layout":11},"Tag","/design-system/components/tag",{"title":443,"_path":444,"layout":11},"Text area","/design-system/components/text-area",{"title":446,"_path":447,"layout":11},"Timeline","/design-system/components/timeline",{"title":449,"_path":450,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":452,"_path":453,"children":454,"layout":11},"Ripple Framework","/framework",[455,456,474,496],{"title":452,"_path":453,"layout":11},{"title":457,"_path":458,"children":459},"Key Concepts","/framework/key-concepts",[460,462,465,468,471],{"title":267,"_path":461,"layout":11},"/framework/key-concepts/nuxt",{"title":463,"_path":464,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":466,"_path":467,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":469,"_path":470,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":472,"_path":473,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":475,"_path":476,"children":477},"Guides","/framework/guides",[478,481,484,487,490,493],{"title":479,"_path":480,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":482,"_path":483,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":485,"_path":486,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":488,"_path":489,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":491,"_path":492,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":494,"_path":495,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":497,"_path":498,"layout":11},"Core modules","/framework/core-modules",["Reactive",500],{"module-navigation":501},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Detail list</h1><p class="rpl-type-p-large" data-v-3163c6df>The Detail list component shows a list of key information to users.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.<!--]--></p><p><!--[-->Each row of the detail list comprises a:<!--]--></p><ul><!--[--><li><!--[-->label, a descriptive or informative label for your content, for example, 'Location'<!--]--></li><li><!--[-->content, the piece of information itself, for example, 'East Gippsland'.<!--]--></li><!--]--></ul><p><!--[-->The detail list is used to display:<!--]--></p><ul><!--[--><li><!--[-->metadata, for example, ‘Published date' (which shows as '22 March 2023’)<!--]--></li><li><!--[-->status, for example of a program or grant.<!--]--></li><!--]--></ul><p><!--[-->Only use the detail list for simple information. For data or complex information, consider using a table.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-description-list--with-link&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-description-list--with-link&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use single words only for the label.<!--]--></li><li><!--[-->Include a link if you need to.<!--]--></li><li><!--[-->Keep the summary content and labels clear and concise.<!--]--></li><li><!--[-->Align all summary content to the longest label.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use labels for unrelated summary content.<!--]--></li><li><!--[-->Don't use it to surface information that is not important to users.<!--]--></li><li><!--[-->Don't use with complex or long form content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->When a link is present, the detail list uses the link colour for interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-description-list--with-link&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-description-list--with-link&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/detail-list.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/detail-list/_payload.json">[{"state":1,"_errors":499,"serverRendered":502,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":189,"$sdd-globals":203,"$sdd-navigation":204},{"/design-system/components/detail-list":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":184,"_id":185,"_source":186,"_file":187,"_extension":188},"/design-system/components/detail-list","components",false,"","Detail list","The Detail list component shows a list of key information to users.","page","Core",{"type":14,"children":15,"toc":175},"root",[16,25,31,36,51,56,69,74,79,86,109,115,133,137,143,148,155],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Each row of the detail list comprises a:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"label, a descriptive or informative label for your content, for example, 'Location'",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"content, the piece of information itself, for example, 'East Gippsland'.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"The detail list is used to display:",{"type":17,"tag":37,"props":57,"children":58},{},[59,64],{"type":17,"tag":41,"props":60,"children":61},{},[62],{"type":23,"value":63},"metadata, for example, ‘Published date' (which shows as '22 March 2023’)",{"type":17,"tag":41,"props":65,"children":66},{},[67],{"type":23,"value":68},"status, for example of a program or grant.",{"type":17,"tag":26,"props":70,"children":71},{},[72],{"type":23,"value":73},"Only use the detail list for simple information. For data or complex information, consider using a table.",{"type":17,"tag":75,"props":76,"children":78},"docs-example",{"id":77},"core-containers-description-list--with-link",[],{"type":17,"tag":80,"props":81,"children":83},"h3",{"id":82},"when-and-how-to-use",[84],{"type":23,"value":85},"When and how to use",{"type":17,"tag":37,"props":87,"children":88},{},[89,94,99,104],{"type":17,"tag":41,"props":90,"children":91},{},[92],{"type":23,"value":93},"Use single words only for the label.",{"type":17,"tag":41,"props":95,"children":96},{},[97],{"type":23,"value":98},"Include a link if you need to.",{"type":17,"tag":41,"props":100,"children":101},{},[102],{"type":23,"value":103},"Keep the summary content and labels clear and concise.",{"type":17,"tag":41,"props":105,"children":106},{},[107],{"type":23,"value":108},"Align all summary content to the longest label.",{"type":17,"tag":80,"props":110,"children":112},{"id":111},"when-and-how-not-to-use",[113],{"type":23,"value":114},"When and how not to use",{"type":17,"tag":37,"props":116,"children":117},{},[118,123,128],{"type":17,"tag":41,"props":119,"children":120},{},[121],{"type":23,"value":122},"Don't use labels for unrelated summary content.",{"type":17,"tag":41,"props":124,"children":125},{},[126],{"type":23,"value":127},"Don't use it to surface information that is not important to users.",{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"Don't use with complex or long form content.",{"type":17,"tag":134,"props":135,"children":136},"hr",{},[],{"type":17,"tag":18,"props":138,"children":140},{"id":139},"theming",[141],{"type":23,"value":142},"Theming",{"type":17,"tag":26,"props":144,"children":145},{},[146],{"type":23,"value":147},"When a link is present, the detail list uses the link colour for interaction states.",{"type":17,"tag":149,"props":150,"children":151},"docs-theme-chooser",{},[152],{"type":17,"tag":75,"props":153,"children":154},{"id":77},[],{"type":17,"tag":26,"props":156,"children":157},{},[158,160,166,168,173],{"type":23,"value":159},"To create your own theme, see ",{"type":17,"tag":161,"props":162,"children":163},"a",{"href":8},[164],{"type":23,"value":165},"theming guidance for designers",{"type":23,"value":167}," or ",{"type":17,"tag":161,"props":169,"children":170},{"href":8},[171],{"type":23,"value":172},"theming guidance for developers",{"type":23,"value":174},".",{"title":8,"searchDepth":176,"depth":176,"links":177},2,[178,183],{"id":20,"depth":176,"text":24,"children":179},[180,182],{"id":82,"depth":181,"text":85},3,{"id":111,"depth":181,"text":114},{"id":139,"depth":176,"text":142},"markdown","content:design-system:5.components:detail-list.md","content","design-system/5.components/detail-list.md","md",{"/design-system/components/detail-list":190},[191,197],{"_path":192,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":193,"description":194,"layout":11,"label":12,"_type":184,"_id":195,"_source":186,"_file":196,"_extension":188},"/design-system/components/date-input","Date input","The Date input component helps users enter a date.","content:design-system:5.components:date-input.md","design-system/5.components/date-input.md",{"_path":198,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":199,"description":200,"layout":11,"label":12,"_type":184,"_id":201,"_source":186,"_file":202,"_extension":188},"/design-system/components/dropdown","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","content:design-system:5.components:dropdown.md","design-system/5.components/dropdown.md",{},[205,210,451],{"title":206,"_path":207,"icon":208,"layout":209},"Ripple Design System","/","carbon:home","home",{"title":211,"_path":212,"children":213},"Design System","/design-system",[214,230,246,275,309],{"title":215,"_path":216,"children":217},"About","/design-system/about",[218,221,224,227],{"title":219,"_path":220,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":222,"_path":223,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":225,"_path":226,"layout":11},"Support","/design-system/about/getting-support",{"title":228,"_path":229,"layout":11},"Contributing","/design-system/about/contributing",{"title":231,"_path":232,"children":233},"Design","/design-system/design",[234,237,240,243],{"title":235,"_path":236,"layout":11},"Getting started","/design-system/design/getting-started",{"title":238,"_path":239,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":241,"_path":242,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":244,"_path":245,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":247,"_path":248,"children":249},"Develop","/design-system/develop",[250,252,254,257],{"title":235,"_path":251,"layout":11},"/design-system/develop/getting-started",{"title":228,"_path":253,"layout":11},"/design-system/develop/contributing",{"title":255,"_path":256,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":258,"children":259,"layout":11},"/design-system/develop/usage",[260,263,266,269,272],{"title":261,"_path":262,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":264,"_path":265,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":267,"_path":268,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":270,"_path":271,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":273,"_path":274,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":276,"_path":277,"children":278},"Styles","/design-system/styles",[279,282,285,288,291,294,297,300,303,306],{"title":280,"_path":281,"layout":11},"Colour","/design-system/styles/colour",{"title":283,"_path":284,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":286,"_path":287,"layout":11},"Grid","/design-system/styles/grid",{"title":289,"_path":290,"layout":11},"Icons","/design-system/styles/icons",{"title":292,"_path":293,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":295,"_path":296,"layout":11},"Layout","/design-system/styles/layout",{"title":298,"_path":299,"layout":11},"Logo","/design-system/styles/logo",{"title":301,"_path":302,"layout":11},"Motion","/design-system/styles/motion",{"title":304,"_path":305,"layout":11},"Spacing","/design-system/styles/spacing",{"title":307,"_path":308,"layout":11},"Typography","/design-system/styles/typography",{"title":310,"_path":311,"children":312},"Components","/design-system/components",[313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,359,360,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448],{"title":314,"_path":315,"layout":11},"Accordion","/design-system/components/accordion",{"title":317,"_path":318,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":320,"_path":321,"layout":11},"Alert","/design-system/components/alert",{"title":323,"_path":324,"layout":11},"Block quote","/design-system/components/block-quote",{"title":326,"_path":327,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":329,"_path":330,"layout":11},"Button","/design-system/components/button",{"title":332,"_path":333,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":335,"_path":336,"layout":11},"Callout","/design-system/components/callout",{"title":338,"_path":339,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":341,"_path":342,"layout":11},"Card","/design-system/components/card",{"title":344,"_path":345,"layout":11},"Carousel","/design-system/components/carousel",{"title":347,"_path":348,"layout":11},"Category grid","/design-system/components/category-grid",{"title":350,"_path":351,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":353,"_path":354,"layout":11},"Chip","/design-system/components/chip",{"title":356,"_path":357,"layout":11},"Contact us","/design-system/components/contact-us",{"title":193,"_path":192,"layout":11},{"title":9,"_path":5,"layout":11},{"title":199,"_path":198,"layout":11},{"title":362,"_path":363,"layout":11},"File","/design-system/components/file",{"title":365,"_path":366,"layout":11},"Footer","/design-system/components/footer",{"title":368,"_path":369,"layout":11},"Form alert","/design-system/components/form-alert",{"title":371,"_path":372,"layout":11},"Form","/design-system/components/form",{"title":374,"_path":375,"layout":11},"Header","/design-system/components/header",{"title":377,"_path":378,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":380,"_path":381,"layout":11},"Input field","/design-system/components/input-field",{"title":383,"_path":384,"layout":11},"Key dates","/design-system/components/key-dates",{"title":386,"_path":387,"layout":11},"Media embed","/design-system/components/media-embed",{"title":389,"_path":390,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":392,"_path":393,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":395,"_path":396,"layout":11},"Media","/design-system/components/media",{"title":398,"_path":399,"layout":11},"Option button","/design-system/components/option-button",{"title":401,"_path":402,"layout":11},"Page action","/design-system/components/page-action",{"title":404,"_path":405,"layout":11},"Pagination","/design-system/components/pagination",{"title":407,"_path":408,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":410,"_path":411,"layout":11},"Profile","/design-system/components/profile",{"title":413,"_path":414,"layout":11},"Radio button","/design-system/components/radio-button",{"title":416,"_path":417,"layout":11},"Related links","/design-system/components/related-links",{"title":419,"_path":420,"layout":11},"Results listing","/design-system/components/results-listing",{"title":422,"_path":423,"layout":11},"Search bar","/design-system/components/search-bar",{"title":425,"_path":426,"layout":11},"Skip link","/design-system/components/skip-link",{"title":428,"_path":429,"layout":11},"Social share","/design-system/components/social-share",{"title":431,"_path":432,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":434,"_path":435,"layout":11},"Table","/design-system/components/table",{"title":437,"_path":438,"layout":11},"Tabs","/design-system/components/tabs",{"title":440,"_path":441,"layout":11},"Tag","/design-system/components/tag",{"title":443,"_path":444,"layout":11},"Text area","/design-system/components/text-area",{"title":446,"_path":447,"layout":11},"Timeline","/design-system/components/timeline",{"title":449,"_path":450,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":452,"_path":453,"children":454,"layout":11},"Ripple Framework","/framework",[455,456,474,496],{"title":452,"_path":453,"layout":11},{"title":457,"_path":458,"children":459},"Key Concepts","/framework/key-concepts",[460,462,465,468,471],{"title":267,"_path":461,"layout":11},"/framework/key-concepts/nuxt",{"title":463,"_path":464,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":466,"_path":467,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":469,"_path":470,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":472,"_path":473,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":475,"_path":476,"children":477},"Guides","/framework/guides",[478,481,484,487,490,493],{"title":479,"_path":480,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":482,"_path":483,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":485,"_path":486,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":488,"_path":489,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":491,"_path":492,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":494,"_path":495,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":497,"_path":498,"layout":11},"Core modules","/framework/core-modules",["Reactive",500],{"module-navigation":501},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/dropdown/index.html b/design-system/components/dropdown/index.html index 0b9d73c570..127ac4cdd5 100644 --- a/design-system/components/dropdown/index.html +++ b/design-system/components/dropdown/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Dropdown</h1><p class="rpl-type-p-large" data-v-3163c6df>The Dropdown component lets users see a list of available options and then select one or more options.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use this component to let users select one or more items from a dropdown list of available items.<!--]--></p><p><!--[-->It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable.<!--]--></p><p><!--[-->Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear.<!--]--></p><p><!--[-->Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead.<!--]--></p><p><!--[-->A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons.<!--]--></p><p><!--[-->A dropdown is often called a 'select'.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--single-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--single-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->You must use a form label with a dropdown.<!--]--></p><p><!--[-->You can use a dropdown with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><h4 id="single-select"><a href="#single-select"><!--[-->Single select<!--]--></a></h4><p><!--[-->A single select dropdown is used when users can select only a single option.<!--]--></p><h4 id="multi-select"><a href="#multi-select"><!--[-->Multi select<!--]--></a></h4><p><!--[-->If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.<!--]--></p><p><!--[-->Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a dropdown.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the dropdown<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 id="placeholder-text"><a href="#placeholder-text"><!--[-->Placeholder text<!--]--></a></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose.<!--]--></p><h4 id="selected-value"><a href="#selected-value"><!--[-->Selected value<!--]--></a></h4><p><!--[-->The selected value shows the option a user has selected.<!--]--></p><h4 id="text-overflow"><a href="#text-overflow"><!--[-->Text overflow<!--]--></a></h4><p><!--[-->When the field label and menu text are too long for the available horizontal space, they wrap to form another line.<!--]--></p><p><!--[-->The field text itself truncates at the end, but the text can be shown in full in the menu.<!--]--></p><h4 id="menu-height"><a href="#menu-height"><!--[-->Menu height<!--]--></a></h4><p><!--[-->The dropdown menu has a maximum height of 288px or 6 single text-line options.<!--]--></p><p><!--[-->We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use as a last resort component.<!--]--></li><li><!--[-->A label must be used with a dropdown.<!--]--></li><li><!--[-->Ensure dropdown item descriptions are short and concise.<!--]--></li><li><!--[-->Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never set the form to submit when a dropdown item is selected.<!--]--></li><li><!--[-->Don’t write long menu option descriptions.<!--]--></li><li><!--[-->Descriptions should not wrap over a single line.<!--]--></li><li><!--[-->Icons or decorative images should never be used in dropdowns.<!--]--></li><li><!--[-->Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes.<!--]--></li><li><!--[-->Do not use a dropdown without a label as it confuses users and is not accessible.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Dropdown has 2 main variants:<!--]--></p><ul><!--[--><li><!--[-->single select<!--]--></li><li><!--[-->multi select.<!--]--></li><!--]--></ul><p><!--[-->Both variants have default and reverse sub-variants.<!--]--></p><h3 id="single-select-1"><a href="#single-select-1"><!--[-->Single select<!--]--></a></h3><p><!--[-->A single select dropdown is used when users can select only a single option.<!--]--></p><h4 id="making-a-selection"><a href="#making-a-selection"><!--[-->Making a selection<!--]--></a></h4><ul><!--[--><li><!--[-->Placeholder text is shown by default in the field when the dropdown is closed.<!--]--></li><li><!--[-->Interacting with a closed field opens a menu of options.<!--]--></li><li><!--[-->The dropdown closes when an option is chosen.<!--]--></li><li><!--[-->The selection option replaces the placeholder text, but also remains in place if the menus is opened.<!--]--></li><li><!--[-->The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value.<!--]--></li><!--]--></ul><h4 id="default"><a href="#default"><!--[-->Default<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--single-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--single-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="multi-select-1"><a href="#multi-select-1"><!--[-->Multi select<!--]--></a></h3><p><!--[-->Users can choose multiple items in a list or to filter information.<!--]--></p><p><!--[-->If using a multi select dropdown, always tell the user how many menu options they can select.<!--]--></p><p><!--[-->Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.<!--]--></p><h4 id="making-a-selection-1"><a href="#making-a-selection-1"><!--[-->Making a selection<!--]--></a></h4><ul><!--[--><li><!--[-->Placeholder text is shown by default in the field when the dropdown is closed.<!--]--></li><li><!--[-->When the menu is opened, each option shows a checkbox input to the left of its text.<!--]--></li><li><!--[-->When options are being selected, the menu stays open.<!--]--></li><li><!--[-->The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected.<!--]--></li><li><!--[-->As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu.<!--]--></li><!--]--></ul><h4 id="default-1"><a href="#default-1"><!--[-->Default<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--multi-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--multi-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="reverse-1"><a href="#reverse-1"><!--[-->Reverse<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--reverse-variant&args=multiple:true&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--reverse-variant&args=multiple:true&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for a dropdown, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->If nothing is selected and the question has options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [options]’.<!--]--></li><li><!--[-->Example: ‘Select if you like summer, winter, autumn, and/or spring.'<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->If nothing is selected and the question does not have options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select <span>options</span>’.<!--]--></li><li><!--[-->Example: 'Select your favourite season'.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=add storybook&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/add storybook&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Dropdown uses colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--multi-select-many-items&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--multi-select-many-items&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/dropdown.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/dropdown/_payload.json">[{"state":1,"_errors":951,"serverRendered":954,"path":955,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":643,"$sdd-globals":657,"$sdd-navigation":658},{"/design-system/components/dropdown":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":638,"_id":639,"_source":640,"_file":641,"_extension":642},"/design-system/components/dropdown","components",false,"","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","page","Core",{"type":14,"children":15,"toc":622},"root",[16,25,31,36,41,46,51,56,61,68,73,78,98,105,110,116,121,126,132,137,142,160,165,171,176,181,187,192,198,203,208,214,219,224,230,253,259,292,296,302,307,320,325,330,334,340,368,374,377,383,387,392,397,402,407,412,439,444,448,453,457,463,468,473,478,487,492,505,513,517,538,542,545,551,556,569,574,581,603,606,612,617],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use this component to let users select one or more items from a dropdown list of available items.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead.",{"type":17,"tag":26,"props":47,"children":48},{},[49],{"type":23,"value":50},"A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"A dropdown is often called a 'select'.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"forms-dropdown--single-select-many-items",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"how-this-component-works",[66],{"type":23,"value":67},"How this component works",{"type":17,"tag":26,"props":69,"children":70},{},[71],{"type":23,"value":72},"You must use a form label with a dropdown.",{"type":17,"tag":26,"props":74,"children":75},{},[76],{"type":23,"value":77},"You can use a dropdown with:",{"type":17,"tag":79,"props":80,"children":81},"ul",{},[82,88,93],{"type":17,"tag":83,"props":84,"children":85},"li",{},[86],{"type":23,"value":87},"requirement label",{"type":17,"tag":83,"props":89,"children":90},{},[91],{"type":23,"value":92},"hint text",{"type":17,"tag":83,"props":94,"children":95},{},[96],{"type":23,"value":97},"placeholder text.",{"type":17,"tag":99,"props":100,"children":102},"h4",{"id":101},"single-select",[103],{"type":23,"value":104},"Single select",{"type":17,"tag":26,"props":106,"children":107},{},[108],{"type":23,"value":109},"A single select dropdown is used when users can select only a single option.",{"type":17,"tag":99,"props":111,"children":113},{"id":112},"multi-select",[114],{"type":23,"value":115},"Multi select",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.",{"type":17,"tag":26,"props":122,"children":123},{},[124],{"type":23,"value":125},"Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better.",{"type":17,"tag":99,"props":127,"children":129},{"id":128},"hint-text",[130],{"type":23,"value":131},"Hint text",{"type":17,"tag":26,"props":133,"children":134},{},[135],{"type":23,"value":136},"Hint text can be used to tell the user what, or how, to successfully complete a dropdown.",{"type":17,"tag":26,"props":138,"children":139},{},[140],{"type":23,"value":141},"For example, hint text can include:",{"type":17,"tag":79,"props":143,"children":144},{},[145,150,155],{"type":17,"tag":83,"props":146,"children":147},{},[148],{"type":23,"value":149},"an overall description of the dropdown",{"type":17,"tag":83,"props":151,"children":152},{},[153],{"type":23,"value":154},"hints for what kind of information needs to be input",{"type":17,"tag":83,"props":156,"children":157},{},[158],{"type":23,"value":159},"specific formatting examples or requirements.",{"type":17,"tag":26,"props":161,"children":162},{},[163],{"type":23,"value":164},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":99,"props":166,"children":168},{"id":167},"placeholder-text",[169],{"type":23,"value":170},"Placeholder text",{"type":17,"tag":26,"props":172,"children":173},{},[174],{"type":23,"value":175},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose.",{"type":17,"tag":99,"props":182,"children":184},{"id":183},"selected-value",[185],{"type":23,"value":186},"Selected value",{"type":17,"tag":26,"props":188,"children":189},{},[190],{"type":23,"value":191},"The selected value shows the option a user has selected.",{"type":17,"tag":99,"props":193,"children":195},{"id":194},"text-overflow",[196],{"type":23,"value":197},"Text overflow",{"type":17,"tag":26,"props":199,"children":200},{},[201],{"type":23,"value":202},"When the field label and menu text are too long for the available horizontal space, they wrap to form another line.",{"type":17,"tag":26,"props":204,"children":205},{},[206],{"type":23,"value":207},"The field text itself truncates at the end, but the text can be shown in full in the menu.",{"type":17,"tag":99,"props":209,"children":211},{"id":210},"menu-height",[212],{"type":23,"value":213},"Menu height",{"type":17,"tag":26,"props":215,"children":216},{},[217],{"type":23,"value":218},"The dropdown menu has a maximum height of 288px or 6 single text-line options.",{"type":17,"tag":26,"props":220,"children":221},{},[222],{"type":23,"value":223},"We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case.",{"type":17,"tag":62,"props":225,"children":227},{"id":226},"when-and-how-to-use",[228],{"type":23,"value":229},"When and how to use",{"type":17,"tag":79,"props":231,"children":232},{},[233,238,243,248],{"type":17,"tag":83,"props":234,"children":235},{},[236],{"type":23,"value":237},"Use as a last resort component.",{"type":17,"tag":83,"props":239,"children":240},{},[241],{"type":23,"value":242},"A label must be used with a dropdown.",{"type":17,"tag":83,"props":244,"children":245},{},[246],{"type":23,"value":247},"Ensure dropdown item descriptions are short and concise.",{"type":17,"tag":83,"props":249,"children":250},{},[251],{"type":23,"value":252},"Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used.",{"type":17,"tag":62,"props":254,"children":256},{"id":255},"when-and-how-not-to-use",[257],{"type":23,"value":258},"When and how not to use",{"type":17,"tag":79,"props":260,"children":261},{},[262,267,272,277,282,287],{"type":17,"tag":83,"props":263,"children":264},{},[265],{"type":23,"value":266},"Never set the form to submit when a dropdown item is selected.",{"type":17,"tag":83,"props":268,"children":269},{},[270],{"type":23,"value":271},"Don’t write long menu option descriptions.",{"type":17,"tag":83,"props":273,"children":274},{},[275],{"type":23,"value":276},"Descriptions should not wrap over a single line.",{"type":17,"tag":83,"props":278,"children":279},{},[280],{"type":23,"value":281},"Icons or decorative images should never be used in dropdowns.",{"type":17,"tag":83,"props":283,"children":284},{},[285],{"type":23,"value":286},"Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes.",{"type":17,"tag":83,"props":288,"children":289},{},[290],{"type":23,"value":291},"Do not use a dropdown without a label as it confuses users and is not accessible.",{"type":17,"tag":293,"props":294,"children":295},"hr",{},[],{"type":17,"tag":18,"props":297,"children":299},{"id":298},"variants",[300],{"type":23,"value":301},"Variants",{"type":17,"tag":26,"props":303,"children":304},{},[305],{"type":23,"value":306},"Dropdown has 2 main variants:",{"type":17,"tag":79,"props":308,"children":309},{},[310,315],{"type":17,"tag":83,"props":311,"children":312},{},[313],{"type":23,"value":314},"single select",{"type":17,"tag":83,"props":316,"children":317},{},[318],{"type":23,"value":319},"multi select.",{"type":17,"tag":26,"props":321,"children":322},{},[323],{"type":23,"value":324},"Both variants have default and reverse sub-variants.",{"type":17,"tag":62,"props":326,"children":328},{"id":327},"single-select-1",[329],{"type":23,"value":104},{"type":17,"tag":26,"props":331,"children":332},{},[333],{"type":23,"value":109},{"type":17,"tag":99,"props":335,"children":337},{"id":336},"making-a-selection",[338],{"type":23,"value":339},"Making a selection",{"type":17,"tag":79,"props":341,"children":342},{},[343,348,353,358,363],{"type":17,"tag":83,"props":344,"children":345},{},[346],{"type":23,"value":347},"Placeholder text is shown by default in the field when the dropdown is closed.",{"type":17,"tag":83,"props":349,"children":350},{},[351],{"type":23,"value":352},"Interacting with a closed field opens a menu of options.",{"type":17,"tag":83,"props":354,"children":355},{},[356],{"type":23,"value":357},"The dropdown closes when an option is chosen.",{"type":17,"tag":83,"props":359,"children":360},{},[361],{"type":23,"value":362},"The selection option replaces the placeholder text, but also remains in place if the menus is opened.",{"type":17,"tag":83,"props":364,"children":365},{},[366],{"type":23,"value":367},"The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value.",{"type":17,"tag":99,"props":369,"children":371},{"id":370},"default",[372],{"type":23,"value":373},"Default",{"type":17,"tag":57,"props":375,"children":376},{"id":59},[],{"type":17,"tag":99,"props":378,"children":380},{"id":379},"reverse",[381],{"type":23,"value":382},"Reverse",{"type":17,"tag":57,"props":384,"children":386},{"id":385},"forms-dropdown--reverse-variant",[],{"type":17,"tag":62,"props":388,"children":390},{"id":389},"multi-select-1",[391],{"type":23,"value":115},{"type":17,"tag":26,"props":393,"children":394},{},[395],{"type":23,"value":396},"Users can choose multiple items in a list or to filter information.",{"type":17,"tag":26,"props":398,"children":399},{},[400],{"type":23,"value":401},"If using a multi select dropdown, always tell the user how many menu options they can select.",{"type":17,"tag":26,"props":403,"children":404},{},[405],{"type":23,"value":406},"Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.",{"type":17,"tag":99,"props":408,"children":410},{"id":409},"making-a-selection-1",[411],{"type":23,"value":339},{"type":17,"tag":79,"props":413,"children":414},{},[415,419,424,429,434],{"type":17,"tag":83,"props":416,"children":417},{},[418],{"type":23,"value":347},{"type":17,"tag":83,"props":420,"children":421},{},[422],{"type":23,"value":423},"When the menu is opened, each option shows a checkbox input to the left of its text.",{"type":17,"tag":83,"props":425,"children":426},{},[427],{"type":23,"value":428},"When options are being selected, the menu stays open.",{"type":17,"tag":83,"props":430,"children":431},{},[432],{"type":23,"value":433},"The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected.",{"type":17,"tag":83,"props":435,"children":436},{},[437],{"type":23,"value":438},"As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu.",{"type":17,"tag":99,"props":440,"children":442},{"id":441},"default-1",[443],{"type":23,"value":373},{"type":17,"tag":57,"props":445,"children":447},{"id":446},"forms-dropdown--multi-select-many-items",[],{"type":17,"tag":99,"props":449,"children":451},{"id":450},"reverse-1",[452],{"type":23,"value":382},{"type":17,"tag":57,"props":454,"children":456},{"id":455},"forms-dropdown--reverse-variant&args=multiple:true",[],{"type":17,"tag":62,"props":458,"children":460},{"id":459},"error",[461],{"type":23,"value":462},"Error",{"type":17,"tag":26,"props":464,"children":465},{},[466],{"type":23,"value":467},"All form inputs share error state styling.",{"type":17,"tag":26,"props":469,"children":470},{},[471],{"type":23,"value":472},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":474,"children":475},{},[476],{"type":23,"value":477},"When creating an error message for a dropdown, use the wording below.",{"type":17,"tag":26,"props":479,"children":480},{},[481],{"type":17,"tag":482,"props":483,"children":484},"strong",{},[485],{"type":23,"value":486},"If nothing is selected and the question has options in it",{"type":17,"tag":26,"props":488,"children":489},{},[490],{"type":23,"value":491},"Structure this message to help the user to choose which options apply to them.",{"type":17,"tag":79,"props":493,"children":494},{},[495,500],{"type":17,"tag":83,"props":496,"children":497},{},[498],{"type":23,"value":499},"Error message: ‘Select if [options]’.",{"type":17,"tag":83,"props":501,"children":502},{},[503],{"type":23,"value":504},"Example: ‘Select if you like summer, winter, autumn, and/or spring.'",{"type":17,"tag":26,"props":506,"children":507},{},[508],{"type":17,"tag":482,"props":509,"children":510},{},[511],{"type":23,"value":512},"If nothing is selected and the question does not have options in it",{"type":17,"tag":26,"props":514,"children":515},{},[516],{"type":23,"value":491},{"type":17,"tag":79,"props":518,"children":519},{},[520,533],{"type":17,"tag":83,"props":521,"children":522},{},[523,525,531],{"type":23,"value":524},"Error message: ‘Select ",{"type":17,"tag":526,"props":527,"children":528},"span",{},[529],{"type":23,"value":530},"options",{"type":23,"value":532},"’.",{"type":17,"tag":83,"props":534,"children":535},{},[536],{"type":23,"value":537},"Example: 'Select your favourite season'.",{"type":17,"tag":57,"props":539,"children":541},{"id":540},"add storybook",[],{"type":17,"tag":293,"props":543,"children":544},{},[],{"type":17,"tag":18,"props":546,"children":548},{"id":547},"theming",[549],{"type":23,"value":550},"Theming",{"type":17,"tag":26,"props":552,"children":553},{},[554],{"type":23,"value":555},"Dropdown uses colour for:",{"type":17,"tag":79,"props":557,"children":558},{},[559,564],{"type":17,"tag":83,"props":560,"children":561},{},[562],{"type":23,"value":563},"interactive states",{"type":17,"tag":83,"props":565,"children":566},{},[567],{"type":23,"value":568},"icons.",{"type":17,"tag":26,"props":570,"children":571},{},[572],{"type":23,"value":573},"A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":575,"props":576,"children":577},"docs-theme-chooser",{},[578],{"type":17,"tag":57,"props":579,"children":580},{"id":446},[],{"type":17,"tag":26,"props":582,"children":583},{},[584,586,593,595,601],{"type":23,"value":585},"To create your own theme see ",{"type":17,"tag":587,"props":588,"children":590},"a",{"href":589},"/design-system/design/theming-guidance-for-designers",[591],{"type":23,"value":592},"theming guidance for designers",{"type":23,"value":594}," or ",{"type":17,"tag":587,"props":596,"children":598},{"href":597},"/design-system/develop/theming",[599],{"type":23,"value":600},"theming guidance for developers",{"type":23,"value":602},".",{"type":17,"tag":293,"props":604,"children":605},{},[],{"type":17,"tag":18,"props":607,"children":609},{"id":608},"rationale",[610],{"type":23,"value":611},"Rationale",{"type":17,"tag":26,"props":613,"children":614},{},[615],{"type":23,"value":616},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":618,"children":619},{},[620],{"type":23,"value":621},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":623,"depth":623,"links":624},2,[625,631,636,637],{"id":20,"depth":623,"text":24,"children":626},[627,629,630],{"id":64,"depth":628,"text":67},3,{"id":226,"depth":628,"text":229},{"id":255,"depth":628,"text":258},{"id":298,"depth":623,"text":301,"children":632},[633,634,635],{"id":327,"depth":628,"text":104},{"id":389,"depth":628,"text":115},{"id":459,"depth":628,"text":462},{"id":547,"depth":623,"text":550},{"id":608,"depth":623,"text":611},"markdown","content:design-system:5.components:dropdown.md","content","design-system/5.components/dropdown.md","md",{"/design-system/components/dropdown":644},[645,651],{"_path":646,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":647,"description":648,"layout":11,"label":12,"_type":638,"_id":649,"_source":640,"_file":650,"_extension":642},"/design-system/components/detail-list","Detail list","The Detail list component shows a list of key information to users.","content:design-system:5.components:detail-list.md","design-system/5.components/detail-list.md",{"_path":652,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":653,"description":654,"layout":11,"label":12,"_type":638,"_id":655,"_source":640,"_file":656,"_extension":642},"/design-system/components/file","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","content:design-system:5.components:file.md","design-system/5.components/file.md",{},[659,664,903],{"title":660,"_path":661,"icon":662,"layout":663},"Ripple Design System","/","carbon:home","home",{"title":665,"_path":666,"children":667},"Design System","/design-system",[668,684,699,727,761],{"title":669,"_path":670,"children":671},"About","/design-system/about",[672,675,678,681],{"title":673,"_path":674,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":676,"_path":677,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":679,"_path":680,"layout":11},"Support","/design-system/about/getting-support",{"title":682,"_path":683,"layout":11},"Contributing","/design-system/about/contributing",{"title":685,"_path":686,"children":687},"Design","/design-system/design",[688,691,694,697],{"title":689,"_path":690,"layout":11},"Getting started","/design-system/design/getting-started",{"title":692,"_path":693,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":695,"_path":696,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":698,"_path":589,"layout":11},"Theming guidance for designers",{"title":700,"_path":701,"children":702},"Develop","/design-system/develop",[703,705,707,709],{"title":689,"_path":704,"layout":11},"/design-system/develop/getting-started",{"title":682,"_path":706,"layout":11},"/design-system/develop/contributing",{"title":708,"_path":597,"layout":11},"Theme and brand application",{"title":24,"_path":710,"children":711,"layout":11},"/design-system/develop/usage",[712,715,718,721,724],{"title":713,"_path":714,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":716,"_path":717,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":719,"_path":720,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":722,"_path":723,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":725,"_path":726,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":728,"_path":729,"children":730},"Styles","/design-system/styles",[731,734,737,740,743,746,749,752,755,758],{"title":732,"_path":733,"layout":11},"Colour","/design-system/styles/colour",{"title":735,"_path":736,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":738,"_path":739,"layout":11},"Grid","/design-system/styles/grid",{"title":741,"_path":742,"layout":11},"Icons","/design-system/styles/icons",{"title":744,"_path":745,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":747,"_path":748,"layout":11},"Layout","/design-system/styles/layout",{"title":750,"_path":751,"layout":11},"Logo","/design-system/styles/logo",{"title":753,"_path":754,"layout":11},"Motion","/design-system/styles/motion",{"title":756,"_path":757,"layout":11},"Spacing","/design-system/styles/spacing",{"title":759,"_path":760,"layout":11},"Typography","/design-system/styles/typography",{"title":762,"_path":763,"children":764},"Components","/design-system/components",[765,768,771,774,777,780,783,786,789,792,795,798,801,804,807,810,813,814,815,816,819,822,825,828,831,834,837,840,843,846,849,852,855,858,861,864,867,870,873,876,879,882,885,888,891,894,897,900],{"title":766,"_path":767,"layout":11},"Accordion","/design-system/components/accordion",{"title":769,"_path":770,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":772,"_path":773,"layout":11},"Alert","/design-system/components/alert",{"title":775,"_path":776,"layout":11},"Block quote","/design-system/components/block-quote",{"title":778,"_path":779,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":781,"_path":782,"layout":11},"Button","/design-system/components/button",{"title":784,"_path":785,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":787,"_path":788,"layout":11},"Callout","/design-system/components/callout",{"title":790,"_path":791,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":793,"_path":794,"layout":11},"Card","/design-system/components/card",{"title":796,"_path":797,"layout":11},"Carousel","/design-system/components/carousel",{"title":799,"_path":800,"layout":11},"Category grid","/design-system/components/category-grid",{"title":802,"_path":803,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":805,"_path":806,"layout":11},"Chip","/design-system/components/chip",{"title":808,"_path":809,"layout":11},"Contact us","/design-system/components/contact-us",{"title":811,"_path":812,"layout":11},"Date input","/design-system/components/date-input",{"title":647,"_path":646,"layout":11},{"title":9,"_path":5,"layout":11},{"title":653,"_path":652,"layout":11},{"title":817,"_path":818,"layout":11},"Footer","/design-system/components/footer",{"title":820,"_path":821,"layout":11},"Form alert","/design-system/components/form-alert",{"title":823,"_path":824,"layout":11},"Form","/design-system/components/form",{"title":826,"_path":827,"layout":11},"Header","/design-system/components/header",{"title":829,"_path":830,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":832,"_path":833,"layout":11},"Input field","/design-system/components/input-field",{"title":835,"_path":836,"layout":11},"Key dates","/design-system/components/key-dates",{"title":838,"_path":839,"layout":11},"Media embed","/design-system/components/media-embed",{"title":841,"_path":842,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":844,"_path":845,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":847,"_path":848,"layout":11},"Media","/design-system/components/media",{"title":850,"_path":851,"layout":11},"Option button","/design-system/components/option-button",{"title":853,"_path":854,"layout":11},"Page action","/design-system/components/page-action",{"title":856,"_path":857,"layout":11},"Pagination","/design-system/components/pagination",{"title":859,"_path":860,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":862,"_path":863,"layout":11},"Profile","/design-system/components/profile",{"title":865,"_path":866,"layout":11},"Radio button","/design-system/components/radio-button",{"title":868,"_path":869,"layout":11},"Related links","/design-system/components/related-links",{"title":871,"_path":872,"layout":11},"Results listing","/design-system/components/results-listing",{"title":874,"_path":875,"layout":11},"Search bar","/design-system/components/search-bar",{"title":877,"_path":878,"layout":11},"Skip link","/design-system/components/skip-link",{"title":880,"_path":881,"layout":11},"Social share","/design-system/components/social-share",{"title":883,"_path":884,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":886,"_path":887,"layout":11},"Table","/design-system/components/table",{"title":889,"_path":890,"layout":11},"Tabs","/design-system/components/tabs",{"title":892,"_path":893,"layout":11},"Tag","/design-system/components/tag",{"title":895,"_path":896,"layout":11},"Text area","/design-system/components/text-area",{"title":898,"_path":899,"layout":11},"Timeline","/design-system/components/timeline",{"title":901,"_path":902,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":904,"_path":905,"children":906,"layout":11},"Ripple Framework","/framework",[907,908,926,948],{"title":904,"_path":905,"layout":11},{"title":909,"_path":910,"children":911},"Key Concepts","/framework/key-concepts",[912,914,917,920,923],{"title":719,"_path":913,"layout":11},"/framework/key-concepts/nuxt",{"title":915,"_path":916,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":918,"_path":919,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":921,"_path":922,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":924,"_path":925,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":927,"_path":928,"children":929},"Guides","/framework/guides",[930,933,936,939,942,945],{"title":931,"_path":932,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":934,"_path":935,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":937,"_path":938,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":940,"_path":941,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":943,"_path":944,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":946,"_path":947,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":949,"_path":950,"layout":11},"Core modules","/framework/core-modules",["Reactive",952],{"module-navigation":953},null,true,"/design-system/components/dropdown/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Dropdown</h1><p class="rpl-type-p-large" data-v-3163c6df>The Dropdown component lets users see a list of available options and then select one or more options.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use this component to let users select one or more items from a dropdown list of available items.<!--]--></p><p><!--[-->It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable.<!--]--></p><p><!--[-->Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear.<!--]--></p><p><!--[-->Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead.<!--]--></p><p><!--[-->A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons.<!--]--></p><p><!--[-->A dropdown is often called a 'select'.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--single-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--single-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->You must use a form label with a dropdown.<!--]--></p><p><!--[-->You can use a dropdown with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><h4 id="single-select"><a href="#single-select"><!--[-->Single select<!--]--></a></h4><p><!--[-->A single select dropdown is used when users can select only a single option.<!--]--></p><h4 id="multi-select"><a href="#multi-select"><!--[-->Multi select<!--]--></a></h4><p><!--[-->If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.<!--]--></p><p><!--[-->Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a dropdown.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the dropdown<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 id="placeholder-text"><a href="#placeholder-text"><!--[-->Placeholder text<!--]--></a></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose.<!--]--></p><h4 id="selected-value"><a href="#selected-value"><!--[-->Selected value<!--]--></a></h4><p><!--[-->The selected value shows the option a user has selected.<!--]--></p><h4 id="text-overflow"><a href="#text-overflow"><!--[-->Text overflow<!--]--></a></h4><p><!--[-->When the field label and menu text are too long for the available horizontal space, they wrap to form another line.<!--]--></p><p><!--[-->The field text itself truncates at the end, but the text can be shown in full in the menu.<!--]--></p><h4 id="menu-height"><a href="#menu-height"><!--[-->Menu height<!--]--></a></h4><p><!--[-->The dropdown menu has a maximum height of 288px or 6 single text-line options.<!--]--></p><p><!--[-->We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use as a last resort component.<!--]--></li><li><!--[-->A label must be used with a dropdown.<!--]--></li><li><!--[-->Ensure dropdown item descriptions are short and concise.<!--]--></li><li><!--[-->Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never set the form to submit when a dropdown item is selected.<!--]--></li><li><!--[-->Don’t write long menu option descriptions.<!--]--></li><li><!--[-->Descriptions should not wrap over a single line.<!--]--></li><li><!--[-->Icons or decorative images should never be used in dropdowns.<!--]--></li><li><!--[-->Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes.<!--]--></li><li><!--[-->Do not use a dropdown without a label as it confuses users and is not accessible.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Dropdown has 2 main variants:<!--]--></p><ul><!--[--><li><!--[-->single select<!--]--></li><li><!--[-->multi select.<!--]--></li><!--]--></ul><p><!--[-->Both variants have default and reverse sub-variants.<!--]--></p><h3 id="single-select-1"><a href="#single-select-1"><!--[-->Single select<!--]--></a></h3><p><!--[-->A single select dropdown is used when users can select only a single option.<!--]--></p><h4 id="making-a-selection"><a href="#making-a-selection"><!--[-->Making a selection<!--]--></a></h4><ul><!--[--><li><!--[-->Placeholder text is shown by default in the field when the dropdown is closed.<!--]--></li><li><!--[-->Interacting with a closed field opens a menu of options.<!--]--></li><li><!--[-->The dropdown closes when an option is chosen.<!--]--></li><li><!--[-->The selection option replaces the placeholder text, but also remains in place if the menus is opened.<!--]--></li><li><!--[-->The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value.<!--]--></li><!--]--></ul><h4 id="default"><a href="#default"><!--[-->Default<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--single-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--single-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="multi-select-1"><a href="#multi-select-1"><!--[-->Multi select<!--]--></a></h3><p><!--[-->Users can choose multiple items in a list or to filter information.<!--]--></p><p><!--[-->If using a multi select dropdown, always tell the user how many menu options they can select.<!--]--></p><p><!--[-->Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.<!--]--></p><h4 id="making-a-selection-1"><a href="#making-a-selection-1"><!--[-->Making a selection<!--]--></a></h4><ul><!--[--><li><!--[-->Placeholder text is shown by default in the field when the dropdown is closed.<!--]--></li><li><!--[-->When the menu is opened, each option shows a checkbox input to the left of its text.<!--]--></li><li><!--[-->When options are being selected, the menu stays open.<!--]--></li><li><!--[-->The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected.<!--]--></li><li><!--[-->As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu.<!--]--></li><!--]--></ul><h4 id="default-1"><a href="#default-1"><!--[-->Default<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--multi-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--multi-select-many-items&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="reverse-1"><a href="#reverse-1"><!--[-->Reverse<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--reverse-variant&args=multiple:true&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--reverse-variant&args=multiple:true&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for a dropdown, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->If nothing is selected and the question has options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [options]’.<!--]--></li><li><!--[-->Example: ‘Select if you like summer, winter, autumn, and/or spring.'<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->If nothing is selected and the question does not have options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select <span>options</span>’.<!--]--></li><li><!--[-->Example: 'Select your favourite season'.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=add storybook&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/add storybook&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Dropdown uses colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-dropdown--multi-select-many-items&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--multi-select-many-items&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/dropdown.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/dropdown/_payload.json">[{"state":1,"_errors":951,"serverRendered":954,"path":955,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":643,"$sdd-globals":657,"$sdd-navigation":658},{"/design-system/components/dropdown":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":638,"_id":639,"_source":640,"_file":641,"_extension":642},"/design-system/components/dropdown","components",false,"","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","page","Core",{"type":14,"children":15,"toc":622},"root",[16,25,31,36,41,46,51,56,61,68,73,78,98,105,110,116,121,126,132,137,142,160,165,171,176,181,187,192,198,203,208,214,219,224,230,253,259,292,296,302,307,320,325,330,334,340,368,374,377,383,387,392,397,402,407,412,439,444,448,453,457,463,468,473,478,487,492,505,513,517,538,542,545,551,556,569,574,581,603,606,612,617],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use this component to let users select one or more items from a dropdown list of available items.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead.",{"type":17,"tag":26,"props":47,"children":48},{},[49],{"type":23,"value":50},"A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"A dropdown is often called a 'select'.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"forms-dropdown--single-select-many-items",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"how-this-component-works",[66],{"type":23,"value":67},"How this component works",{"type":17,"tag":26,"props":69,"children":70},{},[71],{"type":23,"value":72},"You must use a form label with a dropdown.",{"type":17,"tag":26,"props":74,"children":75},{},[76],{"type":23,"value":77},"You can use a dropdown with:",{"type":17,"tag":79,"props":80,"children":81},"ul",{},[82,88,93],{"type":17,"tag":83,"props":84,"children":85},"li",{},[86],{"type":23,"value":87},"requirement label",{"type":17,"tag":83,"props":89,"children":90},{},[91],{"type":23,"value":92},"hint text",{"type":17,"tag":83,"props":94,"children":95},{},[96],{"type":23,"value":97},"placeholder text.",{"type":17,"tag":99,"props":100,"children":102},"h4",{"id":101},"single-select",[103],{"type":23,"value":104},"Single select",{"type":17,"tag":26,"props":106,"children":107},{},[108],{"type":23,"value":109},"A single select dropdown is used when users can select only a single option.",{"type":17,"tag":99,"props":111,"children":113},{"id":112},"multi-select",[114],{"type":23,"value":115},"Multi select",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.",{"type":17,"tag":26,"props":122,"children":123},{},[124],{"type":23,"value":125},"Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better.",{"type":17,"tag":99,"props":127,"children":129},{"id":128},"hint-text",[130],{"type":23,"value":131},"Hint text",{"type":17,"tag":26,"props":133,"children":134},{},[135],{"type":23,"value":136},"Hint text can be used to tell the user what, or how, to successfully complete a dropdown.",{"type":17,"tag":26,"props":138,"children":139},{},[140],{"type":23,"value":141},"For example, hint text can include:",{"type":17,"tag":79,"props":143,"children":144},{},[145,150,155],{"type":17,"tag":83,"props":146,"children":147},{},[148],{"type":23,"value":149},"an overall description of the dropdown",{"type":17,"tag":83,"props":151,"children":152},{},[153],{"type":23,"value":154},"hints for what kind of information needs to be input",{"type":17,"tag":83,"props":156,"children":157},{},[158],{"type":23,"value":159},"specific formatting examples or requirements.",{"type":17,"tag":26,"props":161,"children":162},{},[163],{"type":23,"value":164},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":99,"props":166,"children":168},{"id":167},"placeholder-text",[169],{"type":23,"value":170},"Placeholder text",{"type":17,"tag":26,"props":172,"children":173},{},[174],{"type":23,"value":175},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose.",{"type":17,"tag":99,"props":182,"children":184},{"id":183},"selected-value",[185],{"type":23,"value":186},"Selected value",{"type":17,"tag":26,"props":188,"children":189},{},[190],{"type":23,"value":191},"The selected value shows the option a user has selected.",{"type":17,"tag":99,"props":193,"children":195},{"id":194},"text-overflow",[196],{"type":23,"value":197},"Text overflow",{"type":17,"tag":26,"props":199,"children":200},{},[201],{"type":23,"value":202},"When the field label and menu text are too long for the available horizontal space, they wrap to form another line.",{"type":17,"tag":26,"props":204,"children":205},{},[206],{"type":23,"value":207},"The field text itself truncates at the end, but the text can be shown in full in the menu.",{"type":17,"tag":99,"props":209,"children":211},{"id":210},"menu-height",[212],{"type":23,"value":213},"Menu height",{"type":17,"tag":26,"props":215,"children":216},{},[217],{"type":23,"value":218},"The dropdown menu has a maximum height of 288px or 6 single text-line options.",{"type":17,"tag":26,"props":220,"children":221},{},[222],{"type":23,"value":223},"We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case.",{"type":17,"tag":62,"props":225,"children":227},{"id":226},"when-and-how-to-use",[228],{"type":23,"value":229},"When and how to use",{"type":17,"tag":79,"props":231,"children":232},{},[233,238,243,248],{"type":17,"tag":83,"props":234,"children":235},{},[236],{"type":23,"value":237},"Use as a last resort component.",{"type":17,"tag":83,"props":239,"children":240},{},[241],{"type":23,"value":242},"A label must be used with a dropdown.",{"type":17,"tag":83,"props":244,"children":245},{},[246],{"type":23,"value":247},"Ensure dropdown item descriptions are short and concise.",{"type":17,"tag":83,"props":249,"children":250},{},[251],{"type":23,"value":252},"Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used.",{"type":17,"tag":62,"props":254,"children":256},{"id":255},"when-and-how-not-to-use",[257],{"type":23,"value":258},"When and how not to use",{"type":17,"tag":79,"props":260,"children":261},{},[262,267,272,277,282,287],{"type":17,"tag":83,"props":263,"children":264},{},[265],{"type":23,"value":266},"Never set the form to submit when a dropdown item is selected.",{"type":17,"tag":83,"props":268,"children":269},{},[270],{"type":23,"value":271},"Don’t write long menu option descriptions.",{"type":17,"tag":83,"props":273,"children":274},{},[275],{"type":23,"value":276},"Descriptions should not wrap over a single line.",{"type":17,"tag":83,"props":278,"children":279},{},[280],{"type":23,"value":281},"Icons or decorative images should never be used in dropdowns.",{"type":17,"tag":83,"props":283,"children":284},{},[285],{"type":23,"value":286},"Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes.",{"type":17,"tag":83,"props":288,"children":289},{},[290],{"type":23,"value":291},"Do not use a dropdown without a label as it confuses users and is not accessible.",{"type":17,"tag":293,"props":294,"children":295},"hr",{},[],{"type":17,"tag":18,"props":297,"children":299},{"id":298},"variants",[300],{"type":23,"value":301},"Variants",{"type":17,"tag":26,"props":303,"children":304},{},[305],{"type":23,"value":306},"Dropdown has 2 main variants:",{"type":17,"tag":79,"props":308,"children":309},{},[310,315],{"type":17,"tag":83,"props":311,"children":312},{},[313],{"type":23,"value":314},"single select",{"type":17,"tag":83,"props":316,"children":317},{},[318],{"type":23,"value":319},"multi select.",{"type":17,"tag":26,"props":321,"children":322},{},[323],{"type":23,"value":324},"Both variants have default and reverse sub-variants.",{"type":17,"tag":62,"props":326,"children":328},{"id":327},"single-select-1",[329],{"type":23,"value":104},{"type":17,"tag":26,"props":331,"children":332},{},[333],{"type":23,"value":109},{"type":17,"tag":99,"props":335,"children":337},{"id":336},"making-a-selection",[338],{"type":23,"value":339},"Making a selection",{"type":17,"tag":79,"props":341,"children":342},{},[343,348,353,358,363],{"type":17,"tag":83,"props":344,"children":345},{},[346],{"type":23,"value":347},"Placeholder text is shown by default in the field when the dropdown is closed.",{"type":17,"tag":83,"props":349,"children":350},{},[351],{"type":23,"value":352},"Interacting with a closed field opens a menu of options.",{"type":17,"tag":83,"props":354,"children":355},{},[356],{"type":23,"value":357},"The dropdown closes when an option is chosen.",{"type":17,"tag":83,"props":359,"children":360},{},[361],{"type":23,"value":362},"The selection option replaces the placeholder text, but also remains in place if the menus is opened.",{"type":17,"tag":83,"props":364,"children":365},{},[366],{"type":23,"value":367},"The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value.",{"type":17,"tag":99,"props":369,"children":371},{"id":370},"default",[372],{"type":23,"value":373},"Default",{"type":17,"tag":57,"props":375,"children":376},{"id":59},[],{"type":17,"tag":99,"props":378,"children":380},{"id":379},"reverse",[381],{"type":23,"value":382},"Reverse",{"type":17,"tag":57,"props":384,"children":386},{"id":385},"forms-dropdown--reverse-variant",[],{"type":17,"tag":62,"props":388,"children":390},{"id":389},"multi-select-1",[391],{"type":23,"value":115},{"type":17,"tag":26,"props":393,"children":394},{},[395],{"type":23,"value":396},"Users can choose multiple items in a list or to filter information.",{"type":17,"tag":26,"props":398,"children":399},{},[400],{"type":23,"value":401},"If using a multi select dropdown, always tell the user how many menu options they can select.",{"type":17,"tag":26,"props":403,"children":404},{},[405],{"type":23,"value":406},"Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.",{"type":17,"tag":99,"props":408,"children":410},{"id":409},"making-a-selection-1",[411],{"type":23,"value":339},{"type":17,"tag":79,"props":413,"children":414},{},[415,419,424,429,434],{"type":17,"tag":83,"props":416,"children":417},{},[418],{"type":23,"value":347},{"type":17,"tag":83,"props":420,"children":421},{},[422],{"type":23,"value":423},"When the menu is opened, each option shows a checkbox input to the left of its text.",{"type":17,"tag":83,"props":425,"children":426},{},[427],{"type":23,"value":428},"When options are being selected, the menu stays open.",{"type":17,"tag":83,"props":430,"children":431},{},[432],{"type":23,"value":433},"The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected.",{"type":17,"tag":83,"props":435,"children":436},{},[437],{"type":23,"value":438},"As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu.",{"type":17,"tag":99,"props":440,"children":442},{"id":441},"default-1",[443],{"type":23,"value":373},{"type":17,"tag":57,"props":445,"children":447},{"id":446},"forms-dropdown--multi-select-many-items",[],{"type":17,"tag":99,"props":449,"children":451},{"id":450},"reverse-1",[452],{"type":23,"value":382},{"type":17,"tag":57,"props":454,"children":456},{"id":455},"forms-dropdown--reverse-variant&args=multiple:true",[],{"type":17,"tag":62,"props":458,"children":460},{"id":459},"error",[461],{"type":23,"value":462},"Error",{"type":17,"tag":26,"props":464,"children":465},{},[466],{"type":23,"value":467},"All form inputs share error state styling.",{"type":17,"tag":26,"props":469,"children":470},{},[471],{"type":23,"value":472},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":474,"children":475},{},[476],{"type":23,"value":477},"When creating an error message for a dropdown, use the wording below.",{"type":17,"tag":26,"props":479,"children":480},{},[481],{"type":17,"tag":482,"props":483,"children":484},"strong",{},[485],{"type":23,"value":486},"If nothing is selected and the question has options in it",{"type":17,"tag":26,"props":488,"children":489},{},[490],{"type":23,"value":491},"Structure this message to help the user to choose which options apply to them.",{"type":17,"tag":79,"props":493,"children":494},{},[495,500],{"type":17,"tag":83,"props":496,"children":497},{},[498],{"type":23,"value":499},"Error message: ‘Select if [options]’.",{"type":17,"tag":83,"props":501,"children":502},{},[503],{"type":23,"value":504},"Example: ‘Select if you like summer, winter, autumn, and/or spring.'",{"type":17,"tag":26,"props":506,"children":507},{},[508],{"type":17,"tag":482,"props":509,"children":510},{},[511],{"type":23,"value":512},"If nothing is selected and the question does not have options in it",{"type":17,"tag":26,"props":514,"children":515},{},[516],{"type":23,"value":491},{"type":17,"tag":79,"props":518,"children":519},{},[520,533],{"type":17,"tag":83,"props":521,"children":522},{},[523,525,531],{"type":23,"value":524},"Error message: ‘Select ",{"type":17,"tag":526,"props":527,"children":528},"span",{},[529],{"type":23,"value":530},"options",{"type":23,"value":532},"’.",{"type":17,"tag":83,"props":534,"children":535},{},[536],{"type":23,"value":537},"Example: 'Select your favourite season'.",{"type":17,"tag":57,"props":539,"children":541},{"id":540},"add storybook",[],{"type":17,"tag":293,"props":543,"children":544},{},[],{"type":17,"tag":18,"props":546,"children":548},{"id":547},"theming",[549],{"type":23,"value":550},"Theming",{"type":17,"tag":26,"props":552,"children":553},{},[554],{"type":23,"value":555},"Dropdown uses colour for:",{"type":17,"tag":79,"props":557,"children":558},{},[559,564],{"type":17,"tag":83,"props":560,"children":561},{},[562],{"type":23,"value":563},"interactive states",{"type":17,"tag":83,"props":565,"children":566},{},[567],{"type":23,"value":568},"icons.",{"type":17,"tag":26,"props":570,"children":571},{},[572],{"type":23,"value":573},"A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":575,"props":576,"children":577},"docs-theme-chooser",{},[578],{"type":17,"tag":57,"props":579,"children":580},{"id":446},[],{"type":17,"tag":26,"props":582,"children":583},{},[584,586,593,595,601],{"type":23,"value":585},"To create your own theme see ",{"type":17,"tag":587,"props":588,"children":590},"a",{"href":589},"/design-system/design/theming-guidance-for-designers",[591],{"type":23,"value":592},"theming guidance for designers",{"type":23,"value":594}," or ",{"type":17,"tag":587,"props":596,"children":598},{"href":597},"/design-system/develop/theming",[599],{"type":23,"value":600},"theming guidance for developers",{"type":23,"value":602},".",{"type":17,"tag":293,"props":604,"children":605},{},[],{"type":17,"tag":18,"props":607,"children":609},{"id":608},"rationale",[610],{"type":23,"value":611},"Rationale",{"type":17,"tag":26,"props":613,"children":614},{},[615],{"type":23,"value":616},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":618,"children":619},{},[620],{"type":23,"value":621},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":623,"depth":623,"links":624},2,[625,631,636,637],{"id":20,"depth":623,"text":24,"children":626},[627,629,630],{"id":64,"depth":628,"text":67},3,{"id":226,"depth":628,"text":229},{"id":255,"depth":628,"text":258},{"id":298,"depth":623,"text":301,"children":632},[633,634,635],{"id":327,"depth":628,"text":104},{"id":389,"depth":628,"text":115},{"id":459,"depth":628,"text":462},{"id":547,"depth":623,"text":550},{"id":608,"depth":623,"text":611},"markdown","content:design-system:5.components:dropdown.md","content","design-system/5.components/dropdown.md","md",{"/design-system/components/dropdown":644},[645,651],{"_path":646,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":647,"description":648,"layout":11,"label":12,"_type":638,"_id":649,"_source":640,"_file":650,"_extension":642},"/design-system/components/detail-list","Detail list","The Detail list component shows a list of key information to users.","content:design-system:5.components:detail-list.md","design-system/5.components/detail-list.md",{"_path":652,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":653,"description":654,"layout":11,"label":12,"_type":638,"_id":655,"_source":640,"_file":656,"_extension":642},"/design-system/components/file","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","content:design-system:5.components:file.md","design-system/5.components/file.md",{},[659,664,903],{"title":660,"_path":661,"icon":662,"layout":663},"Ripple Design System","/","carbon:home","home",{"title":665,"_path":666,"children":667},"Design System","/design-system",[668,684,699,727,761],{"title":669,"_path":670,"children":671},"About","/design-system/about",[672,675,678,681],{"title":673,"_path":674,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":676,"_path":677,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":679,"_path":680,"layout":11},"Support","/design-system/about/getting-support",{"title":682,"_path":683,"layout":11},"Contributing","/design-system/about/contributing",{"title":685,"_path":686,"children":687},"Design","/design-system/design",[688,691,694,697],{"title":689,"_path":690,"layout":11},"Getting started","/design-system/design/getting-started",{"title":692,"_path":693,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":695,"_path":696,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":698,"_path":589,"layout":11},"Theming guidance for designers",{"title":700,"_path":701,"children":702},"Develop","/design-system/develop",[703,705,707,709],{"title":689,"_path":704,"layout":11},"/design-system/develop/getting-started",{"title":682,"_path":706,"layout":11},"/design-system/develop/contributing",{"title":708,"_path":597,"layout":11},"Theme and brand application",{"title":24,"_path":710,"children":711,"layout":11},"/design-system/develop/usage",[712,715,718,721,724],{"title":713,"_path":714,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":716,"_path":717,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":719,"_path":720,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":722,"_path":723,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":725,"_path":726,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":728,"_path":729,"children":730},"Styles","/design-system/styles",[731,734,737,740,743,746,749,752,755,758],{"title":732,"_path":733,"layout":11},"Colour","/design-system/styles/colour",{"title":735,"_path":736,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":738,"_path":739,"layout":11},"Grid","/design-system/styles/grid",{"title":741,"_path":742,"layout":11},"Icons","/design-system/styles/icons",{"title":744,"_path":745,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":747,"_path":748,"layout":11},"Layout","/design-system/styles/layout",{"title":750,"_path":751,"layout":11},"Logo","/design-system/styles/logo",{"title":753,"_path":754,"layout":11},"Motion","/design-system/styles/motion",{"title":756,"_path":757,"layout":11},"Spacing","/design-system/styles/spacing",{"title":759,"_path":760,"layout":11},"Typography","/design-system/styles/typography",{"title":762,"_path":763,"children":764},"Components","/design-system/components",[765,768,771,774,777,780,783,786,789,792,795,798,801,804,807,810,813,814,815,816,819,822,825,828,831,834,837,840,843,846,849,852,855,858,861,864,867,870,873,876,879,882,885,888,891,894,897,900],{"title":766,"_path":767,"layout":11},"Accordion","/design-system/components/accordion",{"title":769,"_path":770,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":772,"_path":773,"layout":11},"Alert","/design-system/components/alert",{"title":775,"_path":776,"layout":11},"Block quote","/design-system/components/block-quote",{"title":778,"_path":779,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":781,"_path":782,"layout":11},"Button","/design-system/components/button",{"title":784,"_path":785,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":787,"_path":788,"layout":11},"Callout","/design-system/components/callout",{"title":790,"_path":791,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":793,"_path":794,"layout":11},"Card","/design-system/components/card",{"title":796,"_path":797,"layout":11},"Carousel","/design-system/components/carousel",{"title":799,"_path":800,"layout":11},"Category grid","/design-system/components/category-grid",{"title":802,"_path":803,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":805,"_path":806,"layout":11},"Chip","/design-system/components/chip",{"title":808,"_path":809,"layout":11},"Contact us","/design-system/components/contact-us",{"title":811,"_path":812,"layout":11},"Date input","/design-system/components/date-input",{"title":647,"_path":646,"layout":11},{"title":9,"_path":5,"layout":11},{"title":653,"_path":652,"layout":11},{"title":817,"_path":818,"layout":11},"Footer","/design-system/components/footer",{"title":820,"_path":821,"layout":11},"Form alert","/design-system/components/form-alert",{"title":823,"_path":824,"layout":11},"Form","/design-system/components/form",{"title":826,"_path":827,"layout":11},"Header","/design-system/components/header",{"title":829,"_path":830,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":832,"_path":833,"layout":11},"Input field","/design-system/components/input-field",{"title":835,"_path":836,"layout":11},"Key dates","/design-system/components/key-dates",{"title":838,"_path":839,"layout":11},"Media embed","/design-system/components/media-embed",{"title":841,"_path":842,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":844,"_path":845,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":847,"_path":848,"layout":11},"Media","/design-system/components/media",{"title":850,"_path":851,"layout":11},"Option button","/design-system/components/option-button",{"title":853,"_path":854,"layout":11},"Page action","/design-system/components/page-action",{"title":856,"_path":857,"layout":11},"Pagination","/design-system/components/pagination",{"title":859,"_path":860,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":862,"_path":863,"layout":11},"Profile","/design-system/components/profile",{"title":865,"_path":866,"layout":11},"Radio button","/design-system/components/radio-button",{"title":868,"_path":869,"layout":11},"Related links","/design-system/components/related-links",{"title":871,"_path":872,"layout":11},"Results listing","/design-system/components/results-listing",{"title":874,"_path":875,"layout":11},"Search bar","/design-system/components/search-bar",{"title":877,"_path":878,"layout":11},"Skip link","/design-system/components/skip-link",{"title":880,"_path":881,"layout":11},"Social share","/design-system/components/social-share",{"title":883,"_path":884,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":886,"_path":887,"layout":11},"Table","/design-system/components/table",{"title":889,"_path":890,"layout":11},"Tabs","/design-system/components/tabs",{"title":892,"_path":893,"layout":11},"Tag","/design-system/components/tag",{"title":895,"_path":896,"layout":11},"Text area","/design-system/components/text-area",{"title":898,"_path":899,"layout":11},"Timeline","/design-system/components/timeline",{"title":901,"_path":902,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":904,"_path":905,"children":906,"layout":11},"Ripple Framework","/framework",[907,908,926,948],{"title":904,"_path":905,"layout":11},{"title":909,"_path":910,"children":911},"Key Concepts","/framework/key-concepts",[912,914,917,920,923],{"title":719,"_path":913,"layout":11},"/framework/key-concepts/nuxt",{"title":915,"_path":916,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":918,"_path":919,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":921,"_path":922,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":924,"_path":925,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":927,"_path":928,"children":929},"Guides","/framework/guides",[930,933,936,939,942,945],{"title":931,"_path":932,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":934,"_path":935,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":937,"_path":938,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":940,"_path":941,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":943,"_path":944,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":946,"_path":947,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":949,"_path":950,"layout":11},"Core modules","/framework/core-modules",["Reactive",952],{"module-navigation":953},null,true,"/design-system/components/dropdown/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/file/index.html b/design-system/components/file/index.html index 94d2711d99..b6d92002ef 100644 --- a/design-system/components/file/index.html +++ b/design-system/components/file/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>File</h1><p class="rpl-type-p-large" data-v-3163c6df>The File component shows a link, with additional metadata, and lets a user download a file attachment.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information.<!--]--></p><p><!--[-->File is made up of:<!--]--></p><ul><!--[--><li><!--[-->the file name<!--]--></li><li><!--[-->metadata including file type, size and updated date<!--]--></li><li><!--[-->a document description.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-file--with-caption&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-file--with-caption&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use on any page type.<!--]--></li><li><!--[-->Include in page content areas only.<!--]--></li><li><!--[-->Add an optional description.<!--]--></li><li><!--[-->Add optional updated data if it’s relevant to users.<!--]--></li><li><!--[-->Always include metadata.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use with a non-descriptive file name.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->File uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating to users that they may have an action to complete<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--file&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--file&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/file.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/file/_payload.json">[{"state":1,"_errors":494,"serverRendered":497,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":184,"$sdd-globals":198,"$sdd-navigation":199},{"/design-system/components/file":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":179,"_id":180,"_source":181,"_file":182,"_extension":183},"/design-system/components/file","components",false,"","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","page","Core",{"type":14,"children":15,"toc":170},"root",[16,25,31,36,56,61,68,96,102,110,114,120,125,138,146],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"File is made up of:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"the file name",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"metadata including file type, size and updated date",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"a document description.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-containers-file--with-caption",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81,86,91],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Use on any page type.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Include in page content areas only.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Add an optional description.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Add optional updated data if it’s relevant to users.",{"type":17,"tag":41,"props":92,"children":93},{},[94],{"type":23,"value":95},"Always include metadata.",{"type":17,"tag":62,"props":97,"children":99},{"id":98},"when-and-how-not-to-use",[100],{"type":23,"value":101},"When and how not to use",{"type":17,"tag":37,"props":103,"children":104},{},[105],{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don’t use with a non-descriptive file name.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"theming",[118],{"type":23,"value":119},"Theming",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"File uses colour for:",{"type":17,"tag":37,"props":126,"children":127},{},[128,133],{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"indicating to users that they may have an action to complete",{"type":17,"tag":41,"props":134,"children":135},{},[136],{"type":23,"value":137},"interactive states.",{"type":17,"tag":139,"props":140,"children":141},"docs-theme-chooser",{},[142],{"type":17,"tag":57,"props":143,"children":145},{"id":144},"core-containers-content--file",[],{"type":17,"tag":26,"props":147,"children":148},{},[149,151,160,162,168],{"type":23,"value":150},"To create your own theme, see ",{"type":17,"tag":152,"props":153,"children":157},"a",{"href":154,"rel":155},"https://www.vic.gov.au",[156],"nofollow",[158],{"type":23,"value":159},"theming guidance for designers",{"type":23,"value":161}," or ",{"type":17,"tag":152,"props":163,"children":165},{"href":154,"rel":164},[156],[166],{"type":23,"value":167},"theming guidance for developers",{"type":23,"value":169},".",{"title":8,"searchDepth":171,"depth":171,"links":172},2,[173,178],{"id":20,"depth":171,"text":24,"children":174},[175,177],{"id":64,"depth":176,"text":67},3,{"id":98,"depth":176,"text":101},{"id":116,"depth":171,"text":119},"markdown","content:design-system:5.components:file.md","content","design-system/5.components/file.md","md",{"/design-system/components/file":185},[186,192],{"_path":187,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":188,"description":189,"layout":11,"label":12,"_type":179,"_id":190,"_source":181,"_file":191,"_extension":183},"/design-system/components/dropdown","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","content:design-system:5.components:dropdown.md","design-system/5.components/dropdown.md",{"_path":193,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":194,"description":195,"layout":11,"label":12,"_type":179,"_id":196,"_source":181,"_file":197,"_extension":183},"/design-system/components/footer","Footer","The Footer component helps help users find information at the bottom of a page.","content:design-system:5.components:footer.md","design-system/5.components/footer.md",{},[200,205,446],{"title":201,"_path":202,"icon":203,"layout":204},"Ripple Design System","/","carbon:home","home",{"title":206,"_path":207,"children":208},"Design System","/design-system",[209,225,241,270,304],{"title":210,"_path":211,"children":212},"About","/design-system/about",[213,216,219,222],{"title":214,"_path":215,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":217,"_path":218,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":220,"_path":221,"layout":11},"Support","/design-system/about/getting-support",{"title":223,"_path":224,"layout":11},"Contributing","/design-system/about/contributing",{"title":226,"_path":227,"children":228},"Design","/design-system/design",[229,232,235,238],{"title":230,"_path":231,"layout":11},"Getting started","/design-system/design/getting-started",{"title":233,"_path":234,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":236,"_path":237,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":239,"_path":240,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":242,"_path":243,"children":244},"Develop","/design-system/develop",[245,247,249,252],{"title":230,"_path":246,"layout":11},"/design-system/develop/getting-started",{"title":223,"_path":248,"layout":11},"/design-system/develop/contributing",{"title":250,"_path":251,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":253,"children":254,"layout":11},"/design-system/develop/usage",[255,258,261,264,267],{"title":256,"_path":257,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":259,"_path":260,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":262,"_path":263,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":265,"_path":266,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":268,"_path":269,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":271,"_path":272,"children":273},"Styles","/design-system/styles",[274,277,280,283,286,289,292,295,298,301],{"title":275,"_path":276,"layout":11},"Colour","/design-system/styles/colour",{"title":278,"_path":279,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":281,"_path":282,"layout":11},"Grid","/design-system/styles/grid",{"title":284,"_path":285,"layout":11},"Icons","/design-system/styles/icons",{"title":287,"_path":288,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":290,"_path":291,"layout":11},"Layout","/design-system/styles/layout",{"title":293,"_path":294,"layout":11},"Logo","/design-system/styles/logo",{"title":296,"_path":297,"layout":11},"Motion","/design-system/styles/motion",{"title":299,"_path":300,"layout":11},"Spacing","/design-system/styles/spacing",{"title":302,"_path":303,"layout":11},"Typography","/design-system/styles/typography",{"title":305,"_path":306,"children":307},"Components","/design-system/components",[308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,360,361,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443],{"title":309,"_path":310,"layout":11},"Accordion","/design-system/components/accordion",{"title":312,"_path":313,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":315,"_path":316,"layout":11},"Alert","/design-system/components/alert",{"title":318,"_path":319,"layout":11},"Block quote","/design-system/components/block-quote",{"title":321,"_path":322,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":324,"_path":325,"layout":11},"Button","/design-system/components/button",{"title":327,"_path":328,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":330,"_path":331,"layout":11},"Callout","/design-system/components/callout",{"title":333,"_path":334,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":336,"_path":337,"layout":11},"Card","/design-system/components/card",{"title":339,"_path":340,"layout":11},"Carousel","/design-system/components/carousel",{"title":342,"_path":343,"layout":11},"Category grid","/design-system/components/category-grid",{"title":345,"_path":346,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":348,"_path":349,"layout":11},"Chip","/design-system/components/chip",{"title":351,"_path":352,"layout":11},"Contact us","/design-system/components/contact-us",{"title":354,"_path":355,"layout":11},"Date input","/design-system/components/date-input",{"title":357,"_path":358,"layout":11},"Detail list","/design-system/components/detail-list",{"title":188,"_path":187,"layout":11},{"title":9,"_path":5,"layout":11},{"title":194,"_path":193,"layout":11},{"title":363,"_path":364,"layout":11},"Form alert","/design-system/components/form-alert",{"title":366,"_path":367,"layout":11},"Form","/design-system/components/form",{"title":369,"_path":370,"layout":11},"Header","/design-system/components/header",{"title":372,"_path":373,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":375,"_path":376,"layout":11},"Input field","/design-system/components/input-field",{"title":378,"_path":379,"layout":11},"Key dates","/design-system/components/key-dates",{"title":381,"_path":382,"layout":11},"Media embed","/design-system/components/media-embed",{"title":384,"_path":385,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":387,"_path":388,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":390,"_path":391,"layout":11},"Media","/design-system/components/media",{"title":393,"_path":394,"layout":11},"Option button","/design-system/components/option-button",{"title":396,"_path":397,"layout":11},"Page action","/design-system/components/page-action",{"title":399,"_path":400,"layout":11},"Pagination","/design-system/components/pagination",{"title":402,"_path":403,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":405,"_path":406,"layout":11},"Profile","/design-system/components/profile",{"title":408,"_path":409,"layout":11},"Radio button","/design-system/components/radio-button",{"title":411,"_path":412,"layout":11},"Related links","/design-system/components/related-links",{"title":414,"_path":415,"layout":11},"Results listing","/design-system/components/results-listing",{"title":417,"_path":418,"layout":11},"Search bar","/design-system/components/search-bar",{"title":420,"_path":421,"layout":11},"Skip link","/design-system/components/skip-link",{"title":423,"_path":424,"layout":11},"Social share","/design-system/components/social-share",{"title":426,"_path":427,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":429,"_path":430,"layout":11},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":11},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":11},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":11},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":11},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":447,"_path":448,"children":449,"layout":11},"Ripple Framework","/framework",[450,451,469,491],{"title":447,"_path":448,"layout":11},{"title":452,"_path":453,"children":454},"Key Concepts","/framework/key-concepts",[455,457,460,463,466],{"title":262,"_path":456,"layout":11},"/framework/key-concepts/nuxt",{"title":458,"_path":459,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":461,"_path":462,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":464,"_path":465,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":467,"_path":468,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":470,"_path":471,"children":472},"Guides","/framework/guides",[473,476,479,482,485,488],{"title":474,"_path":475,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":477,"_path":478,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":480,"_path":481,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":483,"_path":484,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":486,"_path":487,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":489,"_path":490,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":492,"_path":493,"layout":11},"Core modules","/framework/core-modules",["Reactive",495],{"module-navigation":496},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>File</h1><p class="rpl-type-p-large" data-v-3163c6df>The File component shows a link, with additional metadata, and lets a user download a file attachment.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information.<!--]--></p><p><!--[-->File is made up of:<!--]--></p><ul><!--[--><li><!--[-->the file name<!--]--></li><li><!--[-->metadata including file type, size and updated date<!--]--></li><li><!--[-->a document description.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-file--with-caption&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-file--with-caption&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use on any page type.<!--]--></li><li><!--[-->Include in page content areas only.<!--]--></li><li><!--[-->Add an optional description.<!--]--></li><li><!--[-->Add optional updated data if it’s relevant to users.<!--]--></li><li><!--[-->Always include metadata.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use with a non-descriptive file name.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->File uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating to users that they may have an action to complete<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--file&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--file&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/file.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/file/_payload.json">[{"state":1,"_errors":494,"serverRendered":497,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":184,"$sdd-globals":198,"$sdd-navigation":199},{"/design-system/components/file":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":179,"_id":180,"_source":181,"_file":182,"_extension":183},"/design-system/components/file","components",false,"","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","page","Core",{"type":14,"children":15,"toc":170},"root",[16,25,31,36,56,61,68,96,102,110,114,120,125,138,146],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"File is made up of:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"the file name",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"metadata including file type, size and updated date",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"a document description.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-containers-file--with-caption",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81,86,91],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Use on any page type.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Include in page content areas only.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Add an optional description.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Add optional updated data if it’s relevant to users.",{"type":17,"tag":41,"props":92,"children":93},{},[94],{"type":23,"value":95},"Always include metadata.",{"type":17,"tag":62,"props":97,"children":99},{"id":98},"when-and-how-not-to-use",[100],{"type":23,"value":101},"When and how not to use",{"type":17,"tag":37,"props":103,"children":104},{},[105],{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don’t use with a non-descriptive file name.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"theming",[118],{"type":23,"value":119},"Theming",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"File uses colour for:",{"type":17,"tag":37,"props":126,"children":127},{},[128,133],{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"indicating to users that they may have an action to complete",{"type":17,"tag":41,"props":134,"children":135},{},[136],{"type":23,"value":137},"interactive states.",{"type":17,"tag":139,"props":140,"children":141},"docs-theme-chooser",{},[142],{"type":17,"tag":57,"props":143,"children":145},{"id":144},"core-containers-content--file",[],{"type":17,"tag":26,"props":147,"children":148},{},[149,151,160,162,168],{"type":23,"value":150},"To create your own theme, see ",{"type":17,"tag":152,"props":153,"children":157},"a",{"href":154,"rel":155},"https://www.vic.gov.au",[156],"nofollow",[158],{"type":23,"value":159},"theming guidance for designers",{"type":23,"value":161}," or ",{"type":17,"tag":152,"props":163,"children":165},{"href":154,"rel":164},[156],[166],{"type":23,"value":167},"theming guidance for developers",{"type":23,"value":169},".",{"title":8,"searchDepth":171,"depth":171,"links":172},2,[173,178],{"id":20,"depth":171,"text":24,"children":174},[175,177],{"id":64,"depth":176,"text":67},3,{"id":98,"depth":176,"text":101},{"id":116,"depth":171,"text":119},"markdown","content:design-system:5.components:file.md","content","design-system/5.components/file.md","md",{"/design-system/components/file":185},[186,192],{"_path":187,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":188,"description":189,"layout":11,"label":12,"_type":179,"_id":190,"_source":181,"_file":191,"_extension":183},"/design-system/components/dropdown","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","content:design-system:5.components:dropdown.md","design-system/5.components/dropdown.md",{"_path":193,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":194,"description":195,"layout":11,"label":12,"_type":179,"_id":196,"_source":181,"_file":197,"_extension":183},"/design-system/components/footer","Footer","The Footer component helps help users find information at the bottom of a page.","content:design-system:5.components:footer.md","design-system/5.components/footer.md",{},[200,205,446],{"title":201,"_path":202,"icon":203,"layout":204},"Ripple Design System","/","carbon:home","home",{"title":206,"_path":207,"children":208},"Design System","/design-system",[209,225,241,270,304],{"title":210,"_path":211,"children":212},"About","/design-system/about",[213,216,219,222],{"title":214,"_path":215,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":217,"_path":218,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":220,"_path":221,"layout":11},"Support","/design-system/about/getting-support",{"title":223,"_path":224,"layout":11},"Contributing","/design-system/about/contributing",{"title":226,"_path":227,"children":228},"Design","/design-system/design",[229,232,235,238],{"title":230,"_path":231,"layout":11},"Getting started","/design-system/design/getting-started",{"title":233,"_path":234,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":236,"_path":237,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":239,"_path":240,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":242,"_path":243,"children":244},"Develop","/design-system/develop",[245,247,249,252],{"title":230,"_path":246,"layout":11},"/design-system/develop/getting-started",{"title":223,"_path":248,"layout":11},"/design-system/develop/contributing",{"title":250,"_path":251,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":253,"children":254,"layout":11},"/design-system/develop/usage",[255,258,261,264,267],{"title":256,"_path":257,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":259,"_path":260,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":262,"_path":263,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":265,"_path":266,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":268,"_path":269,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":271,"_path":272,"children":273},"Styles","/design-system/styles",[274,277,280,283,286,289,292,295,298,301],{"title":275,"_path":276,"layout":11},"Colour","/design-system/styles/colour",{"title":278,"_path":279,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":281,"_path":282,"layout":11},"Grid","/design-system/styles/grid",{"title":284,"_path":285,"layout":11},"Icons","/design-system/styles/icons",{"title":287,"_path":288,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":290,"_path":291,"layout":11},"Layout","/design-system/styles/layout",{"title":293,"_path":294,"layout":11},"Logo","/design-system/styles/logo",{"title":296,"_path":297,"layout":11},"Motion","/design-system/styles/motion",{"title":299,"_path":300,"layout":11},"Spacing","/design-system/styles/spacing",{"title":302,"_path":303,"layout":11},"Typography","/design-system/styles/typography",{"title":305,"_path":306,"children":307},"Components","/design-system/components",[308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,360,361,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443],{"title":309,"_path":310,"layout":11},"Accordion","/design-system/components/accordion",{"title":312,"_path":313,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":315,"_path":316,"layout":11},"Alert","/design-system/components/alert",{"title":318,"_path":319,"layout":11},"Block quote","/design-system/components/block-quote",{"title":321,"_path":322,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":324,"_path":325,"layout":11},"Button","/design-system/components/button",{"title":327,"_path":328,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":330,"_path":331,"layout":11},"Callout","/design-system/components/callout",{"title":333,"_path":334,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":336,"_path":337,"layout":11},"Card","/design-system/components/card",{"title":339,"_path":340,"layout":11},"Carousel","/design-system/components/carousel",{"title":342,"_path":343,"layout":11},"Category grid","/design-system/components/category-grid",{"title":345,"_path":346,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":348,"_path":349,"layout":11},"Chip","/design-system/components/chip",{"title":351,"_path":352,"layout":11},"Contact us","/design-system/components/contact-us",{"title":354,"_path":355,"layout":11},"Date input","/design-system/components/date-input",{"title":357,"_path":358,"layout":11},"Detail list","/design-system/components/detail-list",{"title":188,"_path":187,"layout":11},{"title":9,"_path":5,"layout":11},{"title":194,"_path":193,"layout":11},{"title":363,"_path":364,"layout":11},"Form alert","/design-system/components/form-alert",{"title":366,"_path":367,"layout":11},"Form","/design-system/components/form",{"title":369,"_path":370,"layout":11},"Header","/design-system/components/header",{"title":372,"_path":373,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":375,"_path":376,"layout":11},"Input field","/design-system/components/input-field",{"title":378,"_path":379,"layout":11},"Key dates","/design-system/components/key-dates",{"title":381,"_path":382,"layout":11},"Media embed","/design-system/components/media-embed",{"title":384,"_path":385,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":387,"_path":388,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":390,"_path":391,"layout":11},"Media","/design-system/components/media",{"title":393,"_path":394,"layout":11},"Option button","/design-system/components/option-button",{"title":396,"_path":397,"layout":11},"Page action","/design-system/components/page-action",{"title":399,"_path":400,"layout":11},"Pagination","/design-system/components/pagination",{"title":402,"_path":403,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":405,"_path":406,"layout":11},"Profile","/design-system/components/profile",{"title":408,"_path":409,"layout":11},"Radio button","/design-system/components/radio-button",{"title":411,"_path":412,"layout":11},"Related links","/design-system/components/related-links",{"title":414,"_path":415,"layout":11},"Results listing","/design-system/components/results-listing",{"title":417,"_path":418,"layout":11},"Search bar","/design-system/components/search-bar",{"title":420,"_path":421,"layout":11},"Skip link","/design-system/components/skip-link",{"title":423,"_path":424,"layout":11},"Social share","/design-system/components/social-share",{"title":426,"_path":427,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":429,"_path":430,"layout":11},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":11},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":11},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":11},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":11},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":447,"_path":448,"children":449,"layout":11},"Ripple Framework","/framework",[450,451,469,491],{"title":447,"_path":448,"layout":11},{"title":452,"_path":453,"children":454},"Key Concepts","/framework/key-concepts",[455,457,460,463,466],{"title":262,"_path":456,"layout":11},"/framework/key-concepts/nuxt",{"title":458,"_path":459,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":461,"_path":462,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":464,"_path":465,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":467,"_path":468,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":470,"_path":471,"children":472},"Guides","/framework/guides",[473,476,479,482,485,488],{"title":474,"_path":475,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":477,"_path":478,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":480,"_path":481,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":483,"_path":484,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":486,"_path":487,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":489,"_path":490,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":492,"_path":493,"layout":11},"Core modules","/framework/core-modules",["Reactive",495],{"module-navigation":496},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/footer/index.html b/design-system/components/footer/index.html index 196a36838c..a114db0e5a 100644 --- a/design-system/components/footer/index.html +++ b/design-system/components/footer/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Footer</h1><p class="rpl-type-p-large" data-v-3163c6df>The Footer component helps help users find information at the bottom of a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:<!--]--></p><ul><!--[--><li><!--[-->copyright<!--]--></li><li><!--[-->contact information<!--]--></li><li><!--[-->links to other pages within the website<!--]--></li><li><!--[-->social media links.<!--]--></li><!--]--></ul><p><!--[-->The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->The footer is made up of:<!--]--></p><ul><!--[--><li><!--[-->optional section links, which help avoid dead ends by giving users a way to continue their journey through:<ul><!--[--><li><!--[-->additional links (internal and external)<!--]--></li><li><!--[-->bypassing main navigation<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->optional social links, which can be used to link to social media accounts<!--]--></li><li><!--[-->core site links, which must always be used and include the privacy statement, contact information and terms of use<!--]--></li><li><!--[-->a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)<!--]--></li><li><!--[-->an Acknowledgement of Traditional Owners message (an acknowledgement component).<!--]--></li><!--]--></ul><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use with an optional supporting logo relevant to the site content.<!--]--></li><li><!--[-->Use a consistently-themed footer across all pages of your site.<!--]--></li><li><!--[-->Use the optional neutral theme.<!--]--></li><li><!--[-->Use with an optional image credit for the header image.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t alter the required links in the core section of the footer.<!--]--></li><li><!--[-->Don’t change the text in the acknowledgement component.<!--]--></li><li><!--[-->Don’t use with links that are not relevant to your organisation.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->You can theme the footer in 3 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette<!--]--></li><li><!--[-->custom colour palette (see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a>).<!--]--></li><!--]--></ul><h3 id="site-colour-palette"><a href="#site-colour-palette"><!--[-->Site colour palette<!--]--></a></h3><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><h3 id="neutral-colour-palette"><a href="#neutral-colour-palette"><!--[-->Neutral colour palette<!--]--></a></h3><p><!--[-->Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-footer--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="custom-colour-palette"><a href="#custom-colour-palette"><!--[-->Custom colour palette<!--]--></a></h3><p><!--[-->The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer.<!--]--></p><p><!--[-->This is only recommended as a last resort.<!--]--></p><p><!--[-->See <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->component specific theming guidance for designers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&args=&viewMode=story&globals=theme:docsTheme3;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&args=&viewMode=story&globals=theme:docsTheme3;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/footer.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/footer/_payload.json">[{"state":1,"_errors":619,"serverRendered":622,"path":623,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":309,"$sdd-globals":323,"$sdd-navigation":324},{"/design-system/components/footer":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":304,"_id":305,"_source":306,"_file":307,"_extension":308},"/design-system/components/footer","components",false,"","Footer","The Footer component helps help users find information at the bottom of a page.","page","Core",{"type":14,"children":15,"toc":290},"root",[16,25,31,56,61,66,73,78,119,125,148,154,172,176,182,187,213,219,226,232,237,241,247,252,257,269,273],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41,46,51],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"copyright",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"contact information",{"type":17,"tag":36,"props":47,"children":48},{},[49],{"type":23,"value":50},"links to other pages within the website",{"type":17,"tag":36,"props":52,"children":53},{},[54],{"type":23,"value":55},"social media links.",{"type":17,"tag":26,"props":57,"children":58},{},[59],{"type":23,"value":60},"The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site.",{"type":17,"tag":62,"props":63,"children":65},"docs-example",{"id":64},"core-navigation-footer--default-story",[],{"type":17,"tag":67,"props":68,"children":70},"h3",{"id":69},"how-this-component-works",[71],{"type":23,"value":72},"How this component works",{"type":17,"tag":26,"props":74,"children":75},{},[76],{"type":23,"value":77},"The footer is made up of:",{"type":17,"tag":32,"props":79,"children":80},{},[81,99,104,109,114],{"type":17,"tag":36,"props":82,"children":83},{},[84,86],{"type":23,"value":85},"optional section links, which help avoid dead ends by giving users a way to continue their journey through:",{"type":17,"tag":32,"props":87,"children":88},{},[89,94],{"type":17,"tag":36,"props":90,"children":91},{},[92],{"type":23,"value":93},"additional links (internal and external)",{"type":17,"tag":36,"props":95,"children":96},{},[97],{"type":23,"value":98},"bypassing main navigation",{"type":17,"tag":36,"props":100,"children":101},{},[102],{"type":23,"value":103},"optional social links, which can be used to link to social media accounts",{"type":17,"tag":36,"props":105,"children":106},{},[107],{"type":23,"value":108},"core site links, which must always be used and include the privacy statement, contact information and terms of use",{"type":17,"tag":36,"props":110,"children":111},{},[112],{"type":23,"value":113},"a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)",{"type":17,"tag":36,"props":115,"children":116},{},[117],{"type":23,"value":118},"an Acknowledgement of Traditional Owners message (an acknowledgement component).",{"type":17,"tag":67,"props":120,"children":122},{"id":121},"when-and-how-to-use",[123],{"type":23,"value":124},"When and how to use",{"type":17,"tag":32,"props":126,"children":127},{},[128,133,138,143],{"type":17,"tag":36,"props":129,"children":130},{},[131],{"type":23,"value":132},"Use with an optional supporting logo relevant to the site content.",{"type":17,"tag":36,"props":134,"children":135},{},[136],{"type":23,"value":137},"Use a consistently-themed footer across all pages of your site.",{"type":17,"tag":36,"props":139,"children":140},{},[141],{"type":23,"value":142},"Use the optional neutral theme.",{"type":17,"tag":36,"props":144,"children":145},{},[146],{"type":23,"value":147},"Use with an optional image credit for the header image.",{"type":17,"tag":67,"props":149,"children":151},{"id":150},"when-and-how-not-to-use",[152],{"type":23,"value":153},"When and how not to use",{"type":17,"tag":32,"props":155,"children":156},{},[157,162,167],{"type":17,"tag":36,"props":158,"children":159},{},[160],{"type":23,"value":161},"Don’t alter the required links in the core section of the footer.",{"type":17,"tag":36,"props":163,"children":164},{},[165],{"type":23,"value":166},"Don’t change the text in the acknowledgement component.",{"type":17,"tag":36,"props":168,"children":169},{},[170],{"type":23,"value":171},"Don’t use with links that are not relevant to your organisation.",{"type":17,"tag":173,"props":174,"children":175},"hr",{},[],{"type":17,"tag":18,"props":177,"children":179},{"id":178},"theming",[180],{"type":23,"value":181},"Theming",{"type":17,"tag":26,"props":183,"children":184},{},[185],{"type":23,"value":186},"You can theme the footer in 3 ways:",{"type":17,"tag":32,"props":188,"children":189},{},[190,195,200],{"type":17,"tag":36,"props":191,"children":192},{},[193],{"type":23,"value":194},"site colour palette",{"type":17,"tag":36,"props":196,"children":197},{},[198],{"type":23,"value":199},"neutral colour palette",{"type":17,"tag":36,"props":201,"children":202},{},[203,205,211],{"type":23,"value":204},"custom colour palette (see ",{"type":17,"tag":206,"props":207,"children":208},"a",{"href":8},[209],{"type":23,"value":210},"theming guidance for designers",{"type":23,"value":212},").",{"type":17,"tag":67,"props":214,"children":216},{"id":215},"site-colour-palette",[217],{"type":23,"value":218},"Site colour palette",{"type":17,"tag":220,"props":221,"children":222},"docs-theme-chooser",{},[223],{"type":17,"tag":62,"props":224,"children":225},{"id":64},[],{"type":17,"tag":67,"props":227,"children":229},{"id":228},"neutral-colour-palette",[230],{"type":23,"value":231},"Neutral colour palette",{"type":17,"tag":26,"props":233,"children":234},{},[235],{"type":23,"value":236},"Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours.",{"type":17,"tag":62,"props":238,"children":240},{"id":239},"core-navigation-footer--neutral",[],{"type":17,"tag":67,"props":242,"children":244},{"id":243},"custom-colour-palette",[245],{"type":23,"value":246},"Custom colour palette",{"type":17,"tag":26,"props":248,"children":249},{},[250],{"type":23,"value":251},"The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer.",{"type":17,"tag":26,"props":253,"children":254},{},[255],{"type":23,"value":256},"This is only recommended as a last resort.",{"type":17,"tag":26,"props":258,"children":259},{},[260,262,267],{"type":23,"value":261},"See ",{"type":17,"tag":206,"props":263,"children":264},{"href":8},[265],{"type":23,"value":266},"component specific theming guidance for designers",{"type":23,"value":268},".",{"type":17,"tag":62,"props":270,"children":272},{"id":64,"theme":271},"docsTheme3",[],{"type":17,"tag":26,"props":274,"children":275},{},[276,278,282,284,289],{"type":23,"value":277},"To create your own theme, see ",{"type":17,"tag":206,"props":279,"children":280},{"href":8},[281],{"type":23,"value":210},{"type":23,"value":283}," or ",{"type":17,"tag":206,"props":285,"children":286},{"href":8},[287],{"type":23,"value":288},"theming guidance for developers",{"type":23,"value":268},{"title":8,"searchDepth":291,"depth":291,"links":292},2,[293,299],{"id":20,"depth":291,"text":24,"children":294},[295,297,298],{"id":69,"depth":296,"text":72},3,{"id":121,"depth":296,"text":124},{"id":150,"depth":296,"text":153},{"id":178,"depth":291,"text":181,"children":300},[301,302,303],{"id":215,"depth":296,"text":218},{"id":228,"depth":296,"text":231},{"id":243,"depth":296,"text":246},"markdown","content:design-system:5.components:footer.md","content","design-system/5.components/footer.md","md",{"/design-system/components/footer":310},[311,317],{"_path":312,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":313,"description":314,"layout":11,"label":12,"_type":304,"_id":315,"_source":306,"_file":316,"_extension":308},"/design-system/components/file","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","content:design-system:5.components:file.md","design-system/5.components/file.md",{"_path":318,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":319,"description":320,"layout":11,"label":12,"_type":304,"_id":321,"_source":306,"_file":322,"_extension":308},"/design-system/components/form-alert","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","content:design-system:5.components:form-alert.md","design-system/5.components/form-alert.md",{},[325,330,571],{"title":326,"_path":327,"icon":328,"layout":329},"Ripple Design System","/","carbon:home","home",{"title":331,"_path":332,"children":333},"Design System","/design-system",[334,350,366,395,429],{"title":335,"_path":336,"children":337},"About","/design-system/about",[338,341,344,347],{"title":339,"_path":340,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":342,"_path":343,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":345,"_path":346,"layout":11},"Support","/design-system/about/getting-support",{"title":348,"_path":349,"layout":11},"Contributing","/design-system/about/contributing",{"title":351,"_path":352,"children":353},"Design","/design-system/design",[354,357,360,363],{"title":355,"_path":356,"layout":11},"Getting started","/design-system/design/getting-started",{"title":358,"_path":359,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":361,"_path":362,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":364,"_path":365,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":367,"_path":368,"children":369},"Develop","/design-system/develop",[370,372,374,377],{"title":355,"_path":371,"layout":11},"/design-system/develop/getting-started",{"title":348,"_path":373,"layout":11},"/design-system/develop/contributing",{"title":375,"_path":376,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":378,"children":379,"layout":11},"/design-system/develop/usage",[380,383,386,389,392],{"title":381,"_path":382,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":384,"_path":385,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":387,"_path":388,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":390,"_path":391,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":393,"_path":394,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":396,"_path":397,"children":398},"Styles","/design-system/styles",[399,402,405,408,411,414,417,420,423,426],{"title":400,"_path":401,"layout":11},"Colour","/design-system/styles/colour",{"title":403,"_path":404,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":406,"_path":407,"layout":11},"Grid","/design-system/styles/grid",{"title":409,"_path":410,"layout":11},"Icons","/design-system/styles/icons",{"title":412,"_path":413,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":415,"_path":416,"layout":11},"Layout","/design-system/styles/layout",{"title":418,"_path":419,"layout":11},"Logo","/design-system/styles/logo",{"title":421,"_path":422,"layout":11},"Motion","/design-system/styles/motion",{"title":424,"_path":425,"layout":11},"Spacing","/design-system/styles/spacing",{"title":427,"_path":428,"layout":11},"Typography","/design-system/styles/typography",{"title":430,"_path":431,"children":432},"Components","/design-system/components",[433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,488,489,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568],{"title":434,"_path":435,"layout":11},"Accordion","/design-system/components/accordion",{"title":437,"_path":438,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":440,"_path":441,"layout":11},"Alert","/design-system/components/alert",{"title":443,"_path":444,"layout":11},"Block quote","/design-system/components/block-quote",{"title":446,"_path":447,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":449,"_path":450,"layout":11},"Button","/design-system/components/button",{"title":452,"_path":453,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":455,"_path":456,"layout":11},"Callout","/design-system/components/callout",{"title":458,"_path":459,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":461,"_path":462,"layout":11},"Card","/design-system/components/card",{"title":464,"_path":465,"layout":11},"Carousel","/design-system/components/carousel",{"title":467,"_path":468,"layout":11},"Category grid","/design-system/components/category-grid",{"title":470,"_path":471,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":473,"_path":474,"layout":11},"Chip","/design-system/components/chip",{"title":476,"_path":477,"layout":11},"Contact us","/design-system/components/contact-us",{"title":479,"_path":480,"layout":11},"Date input","/design-system/components/date-input",{"title":482,"_path":483,"layout":11},"Detail list","/design-system/components/detail-list",{"title":485,"_path":486,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":313,"_path":312,"layout":11},{"title":9,"_path":5,"layout":11},{"title":319,"_path":318,"layout":11},{"title":491,"_path":492,"layout":11},"Form","/design-system/components/form",{"title":494,"_path":495,"layout":11},"Header","/design-system/components/header",{"title":497,"_path":498,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":500,"_path":501,"layout":11},"Input field","/design-system/components/input-field",{"title":503,"_path":504,"layout":11},"Key dates","/design-system/components/key-dates",{"title":506,"_path":507,"layout":11},"Media embed","/design-system/components/media-embed",{"title":509,"_path":510,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":512,"_path":513,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":515,"_path":516,"layout":11},"Media","/design-system/components/media",{"title":518,"_path":519,"layout":11},"Option button","/design-system/components/option-button",{"title":521,"_path":522,"layout":11},"Page action","/design-system/components/page-action",{"title":524,"_path":525,"layout":11},"Pagination","/design-system/components/pagination",{"title":527,"_path":528,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":530,"_path":531,"layout":11},"Profile","/design-system/components/profile",{"title":533,"_path":534,"layout":11},"Radio button","/design-system/components/radio-button",{"title":536,"_path":537,"layout":11},"Related links","/design-system/components/related-links",{"title":539,"_path":540,"layout":11},"Results listing","/design-system/components/results-listing",{"title":542,"_path":543,"layout":11},"Search bar","/design-system/components/search-bar",{"title":545,"_path":546,"layout":11},"Skip link","/design-system/components/skip-link",{"title":548,"_path":549,"layout":11},"Social share","/design-system/components/social-share",{"title":551,"_path":552,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":554,"_path":555,"layout":11},"Table","/design-system/components/table",{"title":557,"_path":558,"layout":11},"Tabs","/design-system/components/tabs",{"title":560,"_path":561,"layout":11},"Tag","/design-system/components/tag",{"title":563,"_path":564,"layout":11},"Text area","/design-system/components/text-area",{"title":566,"_path":567,"layout":11},"Timeline","/design-system/components/timeline",{"title":569,"_path":570,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":572,"_path":573,"children":574,"layout":11},"Ripple Framework","/framework",[575,576,594,616],{"title":572,"_path":573,"layout":11},{"title":577,"_path":578,"children":579},"Key Concepts","/framework/key-concepts",[580,582,585,588,591],{"title":387,"_path":581,"layout":11},"/framework/key-concepts/nuxt",{"title":583,"_path":584,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":586,"_path":587,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":589,"_path":590,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":592,"_path":593,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":595,"_path":596,"children":597},"Guides","/framework/guides",[598,601,604,607,610,613],{"title":599,"_path":600,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":602,"_path":603,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":605,"_path":606,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":608,"_path":609,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":611,"_path":612,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":614,"_path":615,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":617,"_path":618,"layout":11},"Core modules","/framework/core-modules",["Reactive",620],{"module-navigation":621},null,true,"/design-system/components/footer/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Footer</h1><p class="rpl-type-p-large" data-v-3163c6df>The Footer component helps help users find information at the bottom of a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:<!--]--></p><ul><!--[--><li><!--[-->copyright<!--]--></li><li><!--[-->contact information<!--]--></li><li><!--[-->links to other pages within the website<!--]--></li><li><!--[-->social media links.<!--]--></li><!--]--></ul><p><!--[-->The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->The footer is made up of:<!--]--></p><ul><!--[--><li><!--[-->optional section links, which help avoid dead ends by giving users a way to continue their journey through:<ul><!--[--><li><!--[-->additional links (internal and external)<!--]--></li><li><!--[-->bypassing main navigation<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->optional social links, which can be used to link to social media accounts<!--]--></li><li><!--[-->core site links, which must always be used and include the privacy statement, contact information and terms of use<!--]--></li><li><!--[-->a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)<!--]--></li><li><!--[-->an Acknowledgement of Traditional Owners message (an acknowledgement component).<!--]--></li><!--]--></ul><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use with an optional supporting logo relevant to the site content.<!--]--></li><li><!--[-->Use a consistently-themed footer across all pages of your site.<!--]--></li><li><!--[-->Use the optional neutral theme.<!--]--></li><li><!--[-->Use with an optional image credit for the header image.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t alter the required links in the core section of the footer.<!--]--></li><li><!--[-->Don’t change the text in the acknowledgement component.<!--]--></li><li><!--[-->Don’t use with links that are not relevant to your organisation.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->You can theme the footer in 3 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette<!--]--></li><li><!--[-->custom colour palette (see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a>).<!--]--></li><!--]--></ul><h3 id="site-colour-palette"><a href="#site-colour-palette"><!--[-->Site colour palette<!--]--></a></h3><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><h3 id="neutral-colour-palette"><a href="#neutral-colour-palette"><!--[-->Neutral colour palette<!--]--></a></h3><p><!--[-->Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-footer--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="custom-colour-palette"><a href="#custom-colour-palette"><!--[-->Custom colour palette<!--]--></a></h3><p><!--[-->The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer.<!--]--></p><p><!--[-->This is only recommended as a last resort.<!--]--></p><p><!--[-->See <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->component specific theming guidance for designers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&args=&viewMode=story&globals=theme:docsTheme3;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&args=&viewMode=story&globals=theme:docsTheme3;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/footer.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/footer/_payload.json">[{"state":1,"_errors":619,"serverRendered":622,"path":623,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":309,"$sdd-globals":323,"$sdd-navigation":324},{"/design-system/components/footer":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":304,"_id":305,"_source":306,"_file":307,"_extension":308},"/design-system/components/footer","components",false,"","Footer","The Footer component helps help users find information at the bottom of a page.","page","Core",{"type":14,"children":15,"toc":290},"root",[16,25,31,56,61,66,73,78,119,125,148,154,172,176,182,187,213,219,226,232,237,241,247,252,257,269,273],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41,46,51],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"copyright",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"contact information",{"type":17,"tag":36,"props":47,"children":48},{},[49],{"type":23,"value":50},"links to other pages within the website",{"type":17,"tag":36,"props":52,"children":53},{},[54],{"type":23,"value":55},"social media links.",{"type":17,"tag":26,"props":57,"children":58},{},[59],{"type":23,"value":60},"The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site.",{"type":17,"tag":62,"props":63,"children":65},"docs-example",{"id":64},"core-navigation-footer--default-story",[],{"type":17,"tag":67,"props":68,"children":70},"h3",{"id":69},"how-this-component-works",[71],{"type":23,"value":72},"How this component works",{"type":17,"tag":26,"props":74,"children":75},{},[76],{"type":23,"value":77},"The footer is made up of:",{"type":17,"tag":32,"props":79,"children":80},{},[81,99,104,109,114],{"type":17,"tag":36,"props":82,"children":83},{},[84,86],{"type":23,"value":85},"optional section links, which help avoid dead ends by giving users a way to continue their journey through:",{"type":17,"tag":32,"props":87,"children":88},{},[89,94],{"type":17,"tag":36,"props":90,"children":91},{},[92],{"type":23,"value":93},"additional links (internal and external)",{"type":17,"tag":36,"props":95,"children":96},{},[97],{"type":23,"value":98},"bypassing main navigation",{"type":17,"tag":36,"props":100,"children":101},{},[102],{"type":23,"value":103},"optional social links, which can be used to link to social media accounts",{"type":17,"tag":36,"props":105,"children":106},{},[107],{"type":23,"value":108},"core site links, which must always be used and include the privacy statement, contact information and terms of use",{"type":17,"tag":36,"props":110,"children":111},{},[112],{"type":23,"value":113},"a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)",{"type":17,"tag":36,"props":115,"children":116},{},[117],{"type":23,"value":118},"an Acknowledgement of Traditional Owners message (an acknowledgement component).",{"type":17,"tag":67,"props":120,"children":122},{"id":121},"when-and-how-to-use",[123],{"type":23,"value":124},"When and how to use",{"type":17,"tag":32,"props":126,"children":127},{},[128,133,138,143],{"type":17,"tag":36,"props":129,"children":130},{},[131],{"type":23,"value":132},"Use with an optional supporting logo relevant to the site content.",{"type":17,"tag":36,"props":134,"children":135},{},[136],{"type":23,"value":137},"Use a consistently-themed footer across all pages of your site.",{"type":17,"tag":36,"props":139,"children":140},{},[141],{"type":23,"value":142},"Use the optional neutral theme.",{"type":17,"tag":36,"props":144,"children":145},{},[146],{"type":23,"value":147},"Use with an optional image credit for the header image.",{"type":17,"tag":67,"props":149,"children":151},{"id":150},"when-and-how-not-to-use",[152],{"type":23,"value":153},"When and how not to use",{"type":17,"tag":32,"props":155,"children":156},{},[157,162,167],{"type":17,"tag":36,"props":158,"children":159},{},[160],{"type":23,"value":161},"Don’t alter the required links in the core section of the footer.",{"type":17,"tag":36,"props":163,"children":164},{},[165],{"type":23,"value":166},"Don’t change the text in the acknowledgement component.",{"type":17,"tag":36,"props":168,"children":169},{},[170],{"type":23,"value":171},"Don’t use with links that are not relevant to your organisation.",{"type":17,"tag":173,"props":174,"children":175},"hr",{},[],{"type":17,"tag":18,"props":177,"children":179},{"id":178},"theming",[180],{"type":23,"value":181},"Theming",{"type":17,"tag":26,"props":183,"children":184},{},[185],{"type":23,"value":186},"You can theme the footer in 3 ways:",{"type":17,"tag":32,"props":188,"children":189},{},[190,195,200],{"type":17,"tag":36,"props":191,"children":192},{},[193],{"type":23,"value":194},"site colour palette",{"type":17,"tag":36,"props":196,"children":197},{},[198],{"type":23,"value":199},"neutral colour palette",{"type":17,"tag":36,"props":201,"children":202},{},[203,205,211],{"type":23,"value":204},"custom colour palette (see ",{"type":17,"tag":206,"props":207,"children":208},"a",{"href":8},[209],{"type":23,"value":210},"theming guidance for designers",{"type":23,"value":212},").",{"type":17,"tag":67,"props":214,"children":216},{"id":215},"site-colour-palette",[217],{"type":23,"value":218},"Site colour palette",{"type":17,"tag":220,"props":221,"children":222},"docs-theme-chooser",{},[223],{"type":17,"tag":62,"props":224,"children":225},{"id":64},[],{"type":17,"tag":67,"props":227,"children":229},{"id":228},"neutral-colour-palette",[230],{"type":23,"value":231},"Neutral colour palette",{"type":17,"tag":26,"props":233,"children":234},{},[235],{"type":23,"value":236},"Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours.",{"type":17,"tag":62,"props":238,"children":240},{"id":239},"core-navigation-footer--neutral",[],{"type":17,"tag":67,"props":242,"children":244},{"id":243},"custom-colour-palette",[245],{"type":23,"value":246},"Custom colour palette",{"type":17,"tag":26,"props":248,"children":249},{},[250],{"type":23,"value":251},"The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer.",{"type":17,"tag":26,"props":253,"children":254},{},[255],{"type":23,"value":256},"This is only recommended as a last resort.",{"type":17,"tag":26,"props":258,"children":259},{},[260,262,267],{"type":23,"value":261},"See ",{"type":17,"tag":206,"props":263,"children":264},{"href":8},[265],{"type":23,"value":266},"component specific theming guidance for designers",{"type":23,"value":268},".",{"type":17,"tag":62,"props":270,"children":272},{"id":64,"theme":271},"docsTheme3",[],{"type":17,"tag":26,"props":274,"children":275},{},[276,278,282,284,289],{"type":23,"value":277},"To create your own theme, see ",{"type":17,"tag":206,"props":279,"children":280},{"href":8},[281],{"type":23,"value":210},{"type":23,"value":283}," or ",{"type":17,"tag":206,"props":285,"children":286},{"href":8},[287],{"type":23,"value":288},"theming guidance for developers",{"type":23,"value":268},{"title":8,"searchDepth":291,"depth":291,"links":292},2,[293,299],{"id":20,"depth":291,"text":24,"children":294},[295,297,298],{"id":69,"depth":296,"text":72},3,{"id":121,"depth":296,"text":124},{"id":150,"depth":296,"text":153},{"id":178,"depth":291,"text":181,"children":300},[301,302,303],{"id":215,"depth":296,"text":218},{"id":228,"depth":296,"text":231},{"id":243,"depth":296,"text":246},"markdown","content:design-system:5.components:footer.md","content","design-system/5.components/footer.md","md",{"/design-system/components/footer":310},[311,317],{"_path":312,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":313,"description":314,"layout":11,"label":12,"_type":304,"_id":315,"_source":306,"_file":316,"_extension":308},"/design-system/components/file","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","content:design-system:5.components:file.md","design-system/5.components/file.md",{"_path":318,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":319,"description":320,"layout":11,"label":12,"_type":304,"_id":321,"_source":306,"_file":322,"_extension":308},"/design-system/components/form-alert","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","content:design-system:5.components:form-alert.md","design-system/5.components/form-alert.md",{},[325,330,571],{"title":326,"_path":327,"icon":328,"layout":329},"Ripple Design System","/","carbon:home","home",{"title":331,"_path":332,"children":333},"Design System","/design-system",[334,350,366,395,429],{"title":335,"_path":336,"children":337},"About","/design-system/about",[338,341,344,347],{"title":339,"_path":340,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":342,"_path":343,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":345,"_path":346,"layout":11},"Support","/design-system/about/getting-support",{"title":348,"_path":349,"layout":11},"Contributing","/design-system/about/contributing",{"title":351,"_path":352,"children":353},"Design","/design-system/design",[354,357,360,363],{"title":355,"_path":356,"layout":11},"Getting started","/design-system/design/getting-started",{"title":358,"_path":359,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":361,"_path":362,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":364,"_path":365,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":367,"_path":368,"children":369},"Develop","/design-system/develop",[370,372,374,377],{"title":355,"_path":371,"layout":11},"/design-system/develop/getting-started",{"title":348,"_path":373,"layout":11},"/design-system/develop/contributing",{"title":375,"_path":376,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":378,"children":379,"layout":11},"/design-system/develop/usage",[380,383,386,389,392],{"title":381,"_path":382,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":384,"_path":385,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":387,"_path":388,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":390,"_path":391,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":393,"_path":394,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":396,"_path":397,"children":398},"Styles","/design-system/styles",[399,402,405,408,411,414,417,420,423,426],{"title":400,"_path":401,"layout":11},"Colour","/design-system/styles/colour",{"title":403,"_path":404,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":406,"_path":407,"layout":11},"Grid","/design-system/styles/grid",{"title":409,"_path":410,"layout":11},"Icons","/design-system/styles/icons",{"title":412,"_path":413,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":415,"_path":416,"layout":11},"Layout","/design-system/styles/layout",{"title":418,"_path":419,"layout":11},"Logo","/design-system/styles/logo",{"title":421,"_path":422,"layout":11},"Motion","/design-system/styles/motion",{"title":424,"_path":425,"layout":11},"Spacing","/design-system/styles/spacing",{"title":427,"_path":428,"layout":11},"Typography","/design-system/styles/typography",{"title":430,"_path":431,"children":432},"Components","/design-system/components",[433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,488,489,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568],{"title":434,"_path":435,"layout":11},"Accordion","/design-system/components/accordion",{"title":437,"_path":438,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":440,"_path":441,"layout":11},"Alert","/design-system/components/alert",{"title":443,"_path":444,"layout":11},"Block quote","/design-system/components/block-quote",{"title":446,"_path":447,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":449,"_path":450,"layout":11},"Button","/design-system/components/button",{"title":452,"_path":453,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":455,"_path":456,"layout":11},"Callout","/design-system/components/callout",{"title":458,"_path":459,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":461,"_path":462,"layout":11},"Card","/design-system/components/card",{"title":464,"_path":465,"layout":11},"Carousel","/design-system/components/carousel",{"title":467,"_path":468,"layout":11},"Category grid","/design-system/components/category-grid",{"title":470,"_path":471,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":473,"_path":474,"layout":11},"Chip","/design-system/components/chip",{"title":476,"_path":477,"layout":11},"Contact us","/design-system/components/contact-us",{"title":479,"_path":480,"layout":11},"Date input","/design-system/components/date-input",{"title":482,"_path":483,"layout":11},"Detail list","/design-system/components/detail-list",{"title":485,"_path":486,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":313,"_path":312,"layout":11},{"title":9,"_path":5,"layout":11},{"title":319,"_path":318,"layout":11},{"title":491,"_path":492,"layout":11},"Form","/design-system/components/form",{"title":494,"_path":495,"layout":11},"Header","/design-system/components/header",{"title":497,"_path":498,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":500,"_path":501,"layout":11},"Input field","/design-system/components/input-field",{"title":503,"_path":504,"layout":11},"Key dates","/design-system/components/key-dates",{"title":506,"_path":507,"layout":11},"Media embed","/design-system/components/media-embed",{"title":509,"_path":510,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":512,"_path":513,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":515,"_path":516,"layout":11},"Media","/design-system/components/media",{"title":518,"_path":519,"layout":11},"Option button","/design-system/components/option-button",{"title":521,"_path":522,"layout":11},"Page action","/design-system/components/page-action",{"title":524,"_path":525,"layout":11},"Pagination","/design-system/components/pagination",{"title":527,"_path":528,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":530,"_path":531,"layout":11},"Profile","/design-system/components/profile",{"title":533,"_path":534,"layout":11},"Radio button","/design-system/components/radio-button",{"title":536,"_path":537,"layout":11},"Related links","/design-system/components/related-links",{"title":539,"_path":540,"layout":11},"Results listing","/design-system/components/results-listing",{"title":542,"_path":543,"layout":11},"Search bar","/design-system/components/search-bar",{"title":545,"_path":546,"layout":11},"Skip link","/design-system/components/skip-link",{"title":548,"_path":549,"layout":11},"Social share","/design-system/components/social-share",{"title":551,"_path":552,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":554,"_path":555,"layout":11},"Table","/design-system/components/table",{"title":557,"_path":558,"layout":11},"Tabs","/design-system/components/tabs",{"title":560,"_path":561,"layout":11},"Tag","/design-system/components/tag",{"title":563,"_path":564,"layout":11},"Text area","/design-system/components/text-area",{"title":566,"_path":567,"layout":11},"Timeline","/design-system/components/timeline",{"title":569,"_path":570,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":572,"_path":573,"children":574,"layout":11},"Ripple Framework","/framework",[575,576,594,616],{"title":572,"_path":573,"layout":11},{"title":577,"_path":578,"children":579},"Key Concepts","/framework/key-concepts",[580,582,585,588,591],{"title":387,"_path":581,"layout":11},"/framework/key-concepts/nuxt",{"title":583,"_path":584,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":586,"_path":587,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":589,"_path":590,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":592,"_path":593,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":595,"_path":596,"children":597},"Guides","/framework/guides",[598,601,604,607,610,613],{"title":599,"_path":600,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":602,"_path":603,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":605,"_path":606,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":608,"_path":609,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":611,"_path":612,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":614,"_path":615,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":617,"_path":618,"layout":11},"Core modules","/framework/core-modules",["Reactive",620],{"module-navigation":621},null,true,"/design-system/components/footer/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/form-alert/index.html b/design-system/components/form-alert/index.html index 4461ac6b02..7b0bf0a138 100644 --- a/design-system/components/form-alert/index.html +++ b/design-system/components/form-alert/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Form alert</h1><p class="rpl-type-p-large" data-v-3163c6df>The Form alert component shows the user the outcome of a form submission or validation.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission.<!--]--></p><p><!--[-->The form alert appears at the top of the form and the user is automatically scrolled to it on submission.<!--]--></p><p><!--[-->There are 2 types of alerts:<!--]--></p><ul><!--[--><li><!--[-->success<!--]--></li><li><!--[-->error.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form-alert--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Show the validation outcome of a form submission.<!--]--></li><li><!--[-->If successful, use with relevant success message.<!--]--></li><li><!--[-->Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors).<!--]--></li><li><!--[-->Include a custom error summary if required.<!--]--></li><li><!--[-->Make your error messages clear and concise.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Do not use the form alert without providing a summary of errors (if a submission is invalid).<!--]--></li><li><!--[-->Do not restyle with other colours or icons.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Form alert has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->success<!--]--></li><li><!--[-->error.<!--]--></li><!--]--></ul><h3 id="success"><a href="#success"><!--[-->Success<!--]--></a></h3><p><!--[-->Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view.<!--]--></p><p><!--[-->To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form-alert--success&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--success&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->If one or more form validation errors occur, they must always be presented using:<!--]--></p><ul><!--[--><li><!--[-->the error summary alert<!--]--></li><li><!--[-->individual error messages next to each form field with an error (inline).<!--]--></li><!--]--></ul><p><!--[-->Make your error messages clear and concise.<!--]--></p><p><!--[-->Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form.<!--]--></p><p><!--[-->Inline error messages show a user where the errors happened.<!--]--></p><p><!--[-->On submission of the form, you must:<!--]--></p><ul><!--[--><li><!--[-->move the keyboard focus to the error summary<!--]--></li><li><!--[-->include the heading ‘There is a problem’ in the error summary<!--]--></li><li><!--[-->link to all answers with validation errors<!--]--></li><li><!--[-->write error messages for the summary alert exactly the same way they are worded for inline error messages.<!--]--></li><!--]--></ul><p><!--[-->As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page <title> so screen readers read it out as soon as possible.<!--]--></p><h4 id="linking-from-the-error-summary-to-each-answer"><a href="#linking-from-the-error-summary-to-each-answer"><!--[-->Linking from the error summary to each answer<!--]--></a></h4><p><!--[-->Each error must be linked in the error summary to the form field (answer) causing it.<!--]--></p><p><!--[-->For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form-alert--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="error-messages"><a href="#error-messages"><!--[-->Error messages<!--]--></a></h4><p><!--[-->Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/components/input-field/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->input field<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/text-area/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->text area<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/date-input/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->date input<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/checkbox/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->checkbox<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/radio-button/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->radio button<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/dropdown/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->dropdown<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/form-alert.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/form-alert/_payload.json">[{"state":1,"_errors":649,"serverRendered":652,"path":653,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":339,"$sdd-globals":353,"$sdd-navigation":354},{"/design-system/components/form-alert":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":334,"_id":335,"_source":336,"_file":337,"_extension":338},"/design-system/components/form-alert","components",false,"","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","page","Core",{"type":14,"children":15,"toc":322},"root",[16,25,31,36,41,56,61,68,96,102,115,119,125,130,141,146,151,156,160,166,171,184,188,193,198,203,226,231,238,243,248,251,257,262],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"The form alert appears at the top of the form and the user is automatically scrolled to it on submission.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"There are 2 types of alerts:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"success",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"error.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"forms-form-alert--error",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":42,"props":69,"children":70},{},[71,76,81,86,91],{"type":17,"tag":46,"props":72,"children":73},{},[74],{"type":23,"value":75},"Show the validation outcome of a form submission.",{"type":17,"tag":46,"props":77,"children":78},{},[79],{"type":23,"value":80},"If successful, use with relevant success message.",{"type":17,"tag":46,"props":82,"children":83},{},[84],{"type":23,"value":85},"Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors).",{"type":17,"tag":46,"props":87,"children":88},{},[89],{"type":23,"value":90},"Include a custom error summary if required.",{"type":17,"tag":46,"props":92,"children":93},{},[94],{"type":23,"value":95},"Make your error messages clear and concise.",{"type":17,"tag":62,"props":97,"children":99},{"id":98},"when-and-how-not-to-use",[100],{"type":23,"value":101},"When and how not to use",{"type":17,"tag":42,"props":103,"children":104},{},[105,110],{"type":17,"tag":46,"props":106,"children":107},{},[108],{"type":23,"value":109},"Do not use the form alert without providing a summary of errors (if a submission is invalid).",{"type":17,"tag":46,"props":111,"children":112},{},[113],{"type":23,"value":114},"Do not restyle with other colours or icons.",{"type":17,"tag":116,"props":117,"children":118},"hr",{},[],{"type":17,"tag":18,"props":120,"children":122},{"id":121},"variants",[123],{"type":23,"value":124},"Variants",{"type":17,"tag":26,"props":126,"children":127},{},[128],{"type":23,"value":129},"Form alert has 2 variants:",{"type":17,"tag":42,"props":131,"children":132},{},[133,137],{"type":17,"tag":46,"props":134,"children":135},{},[136],{"type":23,"value":50},{"type":17,"tag":46,"props":138,"children":139},{},[140],{"type":23,"value":55},{"type":17,"tag":62,"props":142,"children":143},{"id":50},[144],{"type":23,"value":145},"Success",{"type":17,"tag":26,"props":147,"children":148},{},[149],{"type":23,"value":150},"Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view.",{"type":17,"tag":26,"props":152,"children":153},{},[154],{"type":23,"value":155},"To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert.",{"type":17,"tag":57,"props":157,"children":159},{"id":158},"forms-form-alert--success",[],{"type":17,"tag":62,"props":161,"children":163},{"id":162},"error",[164],{"type":23,"value":165},"Error",{"type":17,"tag":26,"props":167,"children":168},{},[169],{"type":23,"value":170},"If one or more form validation errors occur, they must always be presented using:",{"type":17,"tag":42,"props":172,"children":173},{},[174,179],{"type":17,"tag":46,"props":175,"children":176},{},[177],{"type":23,"value":178},"the error summary alert",{"type":17,"tag":46,"props":180,"children":181},{},[182],{"type":23,"value":183},"individual error messages next to each form field with an error (inline).",{"type":17,"tag":26,"props":185,"children":186},{},[187],{"type":23,"value":95},{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form.",{"type":17,"tag":26,"props":194,"children":195},{},[196],{"type":23,"value":197},"Inline error messages show a user where the errors happened.",{"type":17,"tag":26,"props":199,"children":200},{},[201],{"type":23,"value":202},"On submission of the form, you must:",{"type":17,"tag":42,"props":204,"children":205},{},[206,211,216,221],{"type":17,"tag":46,"props":207,"children":208},{},[209],{"type":23,"value":210},"move the keyboard focus to the error summary",{"type":17,"tag":46,"props":212,"children":213},{},[214],{"type":23,"value":215},"include the heading ‘There is a problem’ in the error summary",{"type":17,"tag":46,"props":217,"children":218},{},[219],{"type":23,"value":220},"link to all answers with validation errors",{"type":17,"tag":46,"props":222,"children":223},{},[224],{"type":23,"value":225},"write error messages for the summary alert exactly the same way they are worded for inline error messages.",{"type":17,"tag":26,"props":227,"children":228},{},[229],{"type":23,"value":230},"As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page \u003Ctitle> so screen readers read it out as soon as possible.",{"type":17,"tag":232,"props":233,"children":235},"h4",{"id":234},"linking-from-the-error-summary-to-each-answer",[236],{"type":23,"value":237},"Linking from the error summary to each answer",{"type":17,"tag":26,"props":239,"children":240},{},[241],{"type":23,"value":242},"Each error must be linked in the error summary to the form field (answer) causing it.",{"type":17,"tag":26,"props":244,"children":245},{},[246],{"type":23,"value":247},"For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead.",{"type":17,"tag":57,"props":249,"children":250},{"id":59},[],{"type":17,"tag":232,"props":252,"children":254},{"id":253},"error-messages",[255],{"type":23,"value":256},"Error messages",{"type":17,"tag":26,"props":258,"children":259},{},[260],{"type":23,"value":261},"Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:",{"type":17,"tag":42,"props":263,"children":264},{},[265,275,284,293,302,311],{"type":17,"tag":46,"props":266,"children":267},{},[268],{"type":17,"tag":269,"props":270,"children":272},"a",{"href":271},"/design-system/components/input-field/",[273],{"type":23,"value":274},"input field",{"type":17,"tag":46,"props":276,"children":277},{},[278],{"type":17,"tag":269,"props":279,"children":281},{"href":280},"/design-system/components/text-area/",[282],{"type":23,"value":283},"text area",{"type":17,"tag":46,"props":285,"children":286},{},[287],{"type":17,"tag":269,"props":288,"children":290},{"href":289},"/design-system/components/date-input/",[291],{"type":23,"value":292},"date input",{"type":17,"tag":46,"props":294,"children":295},{},[296],{"type":17,"tag":269,"props":297,"children":299},{"href":298},"/design-system/components/checkbox/",[300],{"type":23,"value":301},"checkbox",{"type":17,"tag":46,"props":303,"children":304},{},[305],{"type":17,"tag":269,"props":306,"children":308},{"href":307},"/design-system/components/radio-button/",[309],{"type":23,"value":310},"radio button",{"type":17,"tag":46,"props":312,"children":313},{},[314,320],{"type":17,"tag":269,"props":315,"children":317},{"href":316},"/design-system/components/dropdown/",[318],{"type":23,"value":319},"dropdown",{"type":23,"value":321},".",{"title":8,"searchDepth":323,"depth":323,"links":324},2,[325,330],{"id":20,"depth":323,"text":24,"children":326},[327,329],{"id":64,"depth":328,"text":67},3,{"id":98,"depth":328,"text":101},{"id":121,"depth":323,"text":124,"children":331},[332,333],{"id":50,"depth":328,"text":145},{"id":162,"depth":328,"text":165},"markdown","content:design-system:5.components:form-alert.md","content","design-system/5.components/form-alert.md","md",{"/design-system/components/form-alert":340},[341,347],{"_path":342,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":343,"description":344,"layout":11,"label":12,"_type":334,"_id":345,"_source":336,"_file":346,"_extension":338},"/design-system/components/footer","Footer","The Footer component helps help users find information at the bottom of a page.","content:design-system:5.components:footer.md","design-system/5.components/footer.md",{"_path":348,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":349,"description":350,"layout":11,"label":12,"_type":334,"_id":351,"_source":336,"_file":352,"_extension":338},"/design-system/components/form","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","content:design-system:5.components:form.md","design-system/5.components/form.md",{},[355,360,601],{"title":356,"_path":357,"icon":358,"layout":359},"Ripple Design System","/","carbon:home","home",{"title":361,"_path":362,"children":363},"Design System","/design-system",[364,380,396,425,459],{"title":365,"_path":366,"children":367},"About","/design-system/about",[368,371,374,377],{"title":369,"_path":370,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":372,"_path":373,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":375,"_path":376,"layout":11},"Support","/design-system/about/getting-support",{"title":378,"_path":379,"layout":11},"Contributing","/design-system/about/contributing",{"title":381,"_path":382,"children":383},"Design","/design-system/design",[384,387,390,393],{"title":385,"_path":386,"layout":11},"Getting started","/design-system/design/getting-started",{"title":388,"_path":389,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":391,"_path":392,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":394,"_path":395,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":397,"_path":398,"children":399},"Develop","/design-system/develop",[400,402,404,407],{"title":385,"_path":401,"layout":11},"/design-system/develop/getting-started",{"title":378,"_path":403,"layout":11},"/design-system/develop/contributing",{"title":405,"_path":406,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":408,"children":409,"layout":11},"/design-system/develop/usage",[410,413,416,419,422],{"title":411,"_path":412,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":414,"_path":415,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":417,"_path":418,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":420,"_path":421,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":423,"_path":424,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":426,"_path":427,"children":428},"Styles","/design-system/styles",[429,432,435,438,441,444,447,450,453,456],{"title":430,"_path":431,"layout":11},"Colour","/design-system/styles/colour",{"title":433,"_path":434,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":436,"_path":437,"layout":11},"Grid","/design-system/styles/grid",{"title":439,"_path":440,"layout":11},"Icons","/design-system/styles/icons",{"title":442,"_path":443,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":445,"_path":446,"layout":11},"Layout","/design-system/styles/layout",{"title":448,"_path":449,"layout":11},"Logo","/design-system/styles/logo",{"title":451,"_path":452,"layout":11},"Motion","/design-system/styles/motion",{"title":454,"_path":455,"layout":11},"Spacing","/design-system/styles/spacing",{"title":457,"_path":458,"layout":11},"Typography","/design-system/styles/typography",{"title":460,"_path":461,"children":462},"Components","/design-system/components",[463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,521,522,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574,577,580,583,586,589,592,595,598],{"title":464,"_path":465,"layout":11},"Accordion","/design-system/components/accordion",{"title":467,"_path":468,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":470,"_path":471,"layout":11},"Alert","/design-system/components/alert",{"title":473,"_path":474,"layout":11},"Block quote","/design-system/components/block-quote",{"title":476,"_path":477,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":479,"_path":480,"layout":11},"Button","/design-system/components/button",{"title":482,"_path":483,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":485,"_path":486,"layout":11},"Callout","/design-system/components/callout",{"title":488,"_path":489,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":491,"_path":492,"layout":11},"Card","/design-system/components/card",{"title":494,"_path":495,"layout":11},"Carousel","/design-system/components/carousel",{"title":497,"_path":498,"layout":11},"Category grid","/design-system/components/category-grid",{"title":500,"_path":501,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":503,"_path":504,"layout":11},"Chip","/design-system/components/chip",{"title":506,"_path":507,"layout":11},"Contact us","/design-system/components/contact-us",{"title":509,"_path":510,"layout":11},"Date input","/design-system/components/date-input",{"title":512,"_path":513,"layout":11},"Detail list","/design-system/components/detail-list",{"title":515,"_path":516,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":518,"_path":519,"layout":11},"File","/design-system/components/file",{"title":343,"_path":342,"layout":11},{"title":9,"_path":5,"layout":11},{"title":349,"_path":348,"layout":11},{"title":524,"_path":525,"layout":11},"Header","/design-system/components/header",{"title":527,"_path":528,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":530,"_path":531,"layout":11},"Input field","/design-system/components/input-field",{"title":533,"_path":534,"layout":11},"Key dates","/design-system/components/key-dates",{"title":536,"_path":537,"layout":11},"Media embed","/design-system/components/media-embed",{"title":539,"_path":540,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":542,"_path":543,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":545,"_path":546,"layout":11},"Media","/design-system/components/media",{"title":548,"_path":549,"layout":11},"Option button","/design-system/components/option-button",{"title":551,"_path":552,"layout":11},"Page action","/design-system/components/page-action",{"title":554,"_path":555,"layout":11},"Pagination","/design-system/components/pagination",{"title":557,"_path":558,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":560,"_path":561,"layout":11},"Profile","/design-system/components/profile",{"title":563,"_path":564,"layout":11},"Radio button","/design-system/components/radio-button",{"title":566,"_path":567,"layout":11},"Related links","/design-system/components/related-links",{"title":569,"_path":570,"layout":11},"Results listing","/design-system/components/results-listing",{"title":572,"_path":573,"layout":11},"Search bar","/design-system/components/search-bar",{"title":575,"_path":576,"layout":11},"Skip link","/design-system/components/skip-link",{"title":578,"_path":579,"layout":11},"Social share","/design-system/components/social-share",{"title":581,"_path":582,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":584,"_path":585,"layout":11},"Table","/design-system/components/table",{"title":587,"_path":588,"layout":11},"Tabs","/design-system/components/tabs",{"title":590,"_path":591,"layout":11},"Tag","/design-system/components/tag",{"title":593,"_path":594,"layout":11},"Text area","/design-system/components/text-area",{"title":596,"_path":597,"layout":11},"Timeline","/design-system/components/timeline",{"title":599,"_path":600,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":602,"_path":603,"children":604,"layout":11},"Ripple Framework","/framework",[605,606,624,646],{"title":602,"_path":603,"layout":11},{"title":607,"_path":608,"children":609},"Key Concepts","/framework/key-concepts",[610,612,615,618,621],{"title":417,"_path":611,"layout":11},"/framework/key-concepts/nuxt",{"title":613,"_path":614,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":616,"_path":617,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":619,"_path":620,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":622,"_path":623,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":625,"_path":626,"children":627},"Guides","/framework/guides",[628,631,634,637,640,643],{"title":629,"_path":630,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":632,"_path":633,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":635,"_path":636,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":638,"_path":639,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":641,"_path":642,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":644,"_path":645,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":647,"_path":648,"layout":11},"Core modules","/framework/core-modules",["Reactive",650],{"module-navigation":651},null,true,"/design-system/components/form-alert/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Form alert</h1><p class="rpl-type-p-large" data-v-3163c6df>The Form alert component shows the user the outcome of a form submission or validation.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission.<!--]--></p><p><!--[-->The form alert appears at the top of the form and the user is automatically scrolled to it on submission.<!--]--></p><p><!--[-->There are 2 types of alerts:<!--]--></p><ul><!--[--><li><!--[-->success<!--]--></li><li><!--[-->error.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form-alert--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Show the validation outcome of a form submission.<!--]--></li><li><!--[-->If successful, use with relevant success message.<!--]--></li><li><!--[-->Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors).<!--]--></li><li><!--[-->Include a custom error summary if required.<!--]--></li><li><!--[-->Make your error messages clear and concise.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Do not use the form alert without providing a summary of errors (if a submission is invalid).<!--]--></li><li><!--[-->Do not restyle with other colours or icons.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Form alert has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->success<!--]--></li><li><!--[-->error.<!--]--></li><!--]--></ul><h3 id="success"><a href="#success"><!--[-->Success<!--]--></a></h3><p><!--[-->Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view.<!--]--></p><p><!--[-->To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form-alert--success&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--success&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->If one or more form validation errors occur, they must always be presented using:<!--]--></p><ul><!--[--><li><!--[-->the error summary alert<!--]--></li><li><!--[-->individual error messages next to each form field with an error (inline).<!--]--></li><!--]--></ul><p><!--[-->Make your error messages clear and concise.<!--]--></p><p><!--[-->Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form.<!--]--></p><p><!--[-->Inline error messages show a user where the errors happened.<!--]--></p><p><!--[-->On submission of the form, you must:<!--]--></p><ul><!--[--><li><!--[-->move the keyboard focus to the error summary<!--]--></li><li><!--[-->include the heading ‘There is a problem’ in the error summary<!--]--></li><li><!--[-->link to all answers with validation errors<!--]--></li><li><!--[-->write error messages for the summary alert exactly the same way they are worded for inline error messages.<!--]--></li><!--]--></ul><p><!--[-->As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page <title> so screen readers read it out as soon as possible.<!--]--></p><h4 id="linking-from-the-error-summary-to-each-answer"><a href="#linking-from-the-error-summary-to-each-answer"><!--[-->Linking from the error summary to each answer<!--]--></a></h4><p><!--[-->Each error must be linked in the error summary to the form field (answer) causing it.<!--]--></p><p><!--[-->For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form-alert--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="error-messages"><a href="#error-messages"><!--[-->Error messages<!--]--></a></h4><p><!--[-->Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/components/input-field/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->input field<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/text-area/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->text area<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/date-input/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->date input<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/checkbox/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->checkbox<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/radio-button/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->radio button<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/dropdown/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->dropdown<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/form-alert.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/form-alert/_payload.json">[{"state":1,"_errors":649,"serverRendered":652,"path":653,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":339,"$sdd-globals":353,"$sdd-navigation":354},{"/design-system/components/form-alert":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":334,"_id":335,"_source":336,"_file":337,"_extension":338},"/design-system/components/form-alert","components",false,"","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","page","Core",{"type":14,"children":15,"toc":322},"root",[16,25,31,36,41,56,61,68,96,102,115,119,125,130,141,146,151,156,160,166,171,184,188,193,198,203,226,231,238,243,248,251,257,262],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"The form alert appears at the top of the form and the user is automatically scrolled to it on submission.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"There are 2 types of alerts:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"success",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"error.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"forms-form-alert--error",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":42,"props":69,"children":70},{},[71,76,81,86,91],{"type":17,"tag":46,"props":72,"children":73},{},[74],{"type":23,"value":75},"Show the validation outcome of a form submission.",{"type":17,"tag":46,"props":77,"children":78},{},[79],{"type":23,"value":80},"If successful, use with relevant success message.",{"type":17,"tag":46,"props":82,"children":83},{},[84],{"type":23,"value":85},"Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors).",{"type":17,"tag":46,"props":87,"children":88},{},[89],{"type":23,"value":90},"Include a custom error summary if required.",{"type":17,"tag":46,"props":92,"children":93},{},[94],{"type":23,"value":95},"Make your error messages clear and concise.",{"type":17,"tag":62,"props":97,"children":99},{"id":98},"when-and-how-not-to-use",[100],{"type":23,"value":101},"When and how not to use",{"type":17,"tag":42,"props":103,"children":104},{},[105,110],{"type":17,"tag":46,"props":106,"children":107},{},[108],{"type":23,"value":109},"Do not use the form alert without providing a summary of errors (if a submission is invalid).",{"type":17,"tag":46,"props":111,"children":112},{},[113],{"type":23,"value":114},"Do not restyle with other colours or icons.",{"type":17,"tag":116,"props":117,"children":118},"hr",{},[],{"type":17,"tag":18,"props":120,"children":122},{"id":121},"variants",[123],{"type":23,"value":124},"Variants",{"type":17,"tag":26,"props":126,"children":127},{},[128],{"type":23,"value":129},"Form alert has 2 variants:",{"type":17,"tag":42,"props":131,"children":132},{},[133,137],{"type":17,"tag":46,"props":134,"children":135},{},[136],{"type":23,"value":50},{"type":17,"tag":46,"props":138,"children":139},{},[140],{"type":23,"value":55},{"type":17,"tag":62,"props":142,"children":143},{"id":50},[144],{"type":23,"value":145},"Success",{"type":17,"tag":26,"props":147,"children":148},{},[149],{"type":23,"value":150},"Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view.",{"type":17,"tag":26,"props":152,"children":153},{},[154],{"type":23,"value":155},"To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert.",{"type":17,"tag":57,"props":157,"children":159},{"id":158},"forms-form-alert--success",[],{"type":17,"tag":62,"props":161,"children":163},{"id":162},"error",[164],{"type":23,"value":165},"Error",{"type":17,"tag":26,"props":167,"children":168},{},[169],{"type":23,"value":170},"If one or more form validation errors occur, they must always be presented using:",{"type":17,"tag":42,"props":172,"children":173},{},[174,179],{"type":17,"tag":46,"props":175,"children":176},{},[177],{"type":23,"value":178},"the error summary alert",{"type":17,"tag":46,"props":180,"children":181},{},[182],{"type":23,"value":183},"individual error messages next to each form field with an error (inline).",{"type":17,"tag":26,"props":185,"children":186},{},[187],{"type":23,"value":95},{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form.",{"type":17,"tag":26,"props":194,"children":195},{},[196],{"type":23,"value":197},"Inline error messages show a user where the errors happened.",{"type":17,"tag":26,"props":199,"children":200},{},[201],{"type":23,"value":202},"On submission of the form, you must:",{"type":17,"tag":42,"props":204,"children":205},{},[206,211,216,221],{"type":17,"tag":46,"props":207,"children":208},{},[209],{"type":23,"value":210},"move the keyboard focus to the error summary",{"type":17,"tag":46,"props":212,"children":213},{},[214],{"type":23,"value":215},"include the heading ‘There is a problem’ in the error summary",{"type":17,"tag":46,"props":217,"children":218},{},[219],{"type":23,"value":220},"link to all answers with validation errors",{"type":17,"tag":46,"props":222,"children":223},{},[224],{"type":23,"value":225},"write error messages for the summary alert exactly the same way they are worded for inline error messages.",{"type":17,"tag":26,"props":227,"children":228},{},[229],{"type":23,"value":230},"As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page \u003Ctitle> so screen readers read it out as soon as possible.",{"type":17,"tag":232,"props":233,"children":235},"h4",{"id":234},"linking-from-the-error-summary-to-each-answer",[236],{"type":23,"value":237},"Linking from the error summary to each answer",{"type":17,"tag":26,"props":239,"children":240},{},[241],{"type":23,"value":242},"Each error must be linked in the error summary to the form field (answer) causing it.",{"type":17,"tag":26,"props":244,"children":245},{},[246],{"type":23,"value":247},"For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead.",{"type":17,"tag":57,"props":249,"children":250},{"id":59},[],{"type":17,"tag":232,"props":252,"children":254},{"id":253},"error-messages",[255],{"type":23,"value":256},"Error messages",{"type":17,"tag":26,"props":258,"children":259},{},[260],{"type":23,"value":261},"Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:",{"type":17,"tag":42,"props":263,"children":264},{},[265,275,284,293,302,311],{"type":17,"tag":46,"props":266,"children":267},{},[268],{"type":17,"tag":269,"props":270,"children":272},"a",{"href":271},"/design-system/components/input-field/",[273],{"type":23,"value":274},"input field",{"type":17,"tag":46,"props":276,"children":277},{},[278],{"type":17,"tag":269,"props":279,"children":281},{"href":280},"/design-system/components/text-area/",[282],{"type":23,"value":283},"text area",{"type":17,"tag":46,"props":285,"children":286},{},[287],{"type":17,"tag":269,"props":288,"children":290},{"href":289},"/design-system/components/date-input/",[291],{"type":23,"value":292},"date input",{"type":17,"tag":46,"props":294,"children":295},{},[296],{"type":17,"tag":269,"props":297,"children":299},{"href":298},"/design-system/components/checkbox/",[300],{"type":23,"value":301},"checkbox",{"type":17,"tag":46,"props":303,"children":304},{},[305],{"type":17,"tag":269,"props":306,"children":308},{"href":307},"/design-system/components/radio-button/",[309],{"type":23,"value":310},"radio button",{"type":17,"tag":46,"props":312,"children":313},{},[314,320],{"type":17,"tag":269,"props":315,"children":317},{"href":316},"/design-system/components/dropdown/",[318],{"type":23,"value":319},"dropdown",{"type":23,"value":321},".",{"title":8,"searchDepth":323,"depth":323,"links":324},2,[325,330],{"id":20,"depth":323,"text":24,"children":326},[327,329],{"id":64,"depth":328,"text":67},3,{"id":98,"depth":328,"text":101},{"id":121,"depth":323,"text":124,"children":331},[332,333],{"id":50,"depth":328,"text":145},{"id":162,"depth":328,"text":165},"markdown","content:design-system:5.components:form-alert.md","content","design-system/5.components/form-alert.md","md",{"/design-system/components/form-alert":340},[341,347],{"_path":342,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":343,"description":344,"layout":11,"label":12,"_type":334,"_id":345,"_source":336,"_file":346,"_extension":338},"/design-system/components/footer","Footer","The Footer component helps help users find information at the bottom of a page.","content:design-system:5.components:footer.md","design-system/5.components/footer.md",{"_path":348,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":349,"description":350,"layout":11,"label":12,"_type":334,"_id":351,"_source":336,"_file":352,"_extension":338},"/design-system/components/form","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","content:design-system:5.components:form.md","design-system/5.components/form.md",{},[355,360,601],{"title":356,"_path":357,"icon":358,"layout":359},"Ripple Design System","/","carbon:home","home",{"title":361,"_path":362,"children":363},"Design System","/design-system",[364,380,396,425,459],{"title":365,"_path":366,"children":367},"About","/design-system/about",[368,371,374,377],{"title":369,"_path":370,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":372,"_path":373,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":375,"_path":376,"layout":11},"Support","/design-system/about/getting-support",{"title":378,"_path":379,"layout":11},"Contributing","/design-system/about/contributing",{"title":381,"_path":382,"children":383},"Design","/design-system/design",[384,387,390,393],{"title":385,"_path":386,"layout":11},"Getting started","/design-system/design/getting-started",{"title":388,"_path":389,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":391,"_path":392,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":394,"_path":395,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":397,"_path":398,"children":399},"Develop","/design-system/develop",[400,402,404,407],{"title":385,"_path":401,"layout":11},"/design-system/develop/getting-started",{"title":378,"_path":403,"layout":11},"/design-system/develop/contributing",{"title":405,"_path":406,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":408,"children":409,"layout":11},"/design-system/develop/usage",[410,413,416,419,422],{"title":411,"_path":412,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":414,"_path":415,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":417,"_path":418,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":420,"_path":421,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":423,"_path":424,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":426,"_path":427,"children":428},"Styles","/design-system/styles",[429,432,435,438,441,444,447,450,453,456],{"title":430,"_path":431,"layout":11},"Colour","/design-system/styles/colour",{"title":433,"_path":434,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":436,"_path":437,"layout":11},"Grid","/design-system/styles/grid",{"title":439,"_path":440,"layout":11},"Icons","/design-system/styles/icons",{"title":442,"_path":443,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":445,"_path":446,"layout":11},"Layout","/design-system/styles/layout",{"title":448,"_path":449,"layout":11},"Logo","/design-system/styles/logo",{"title":451,"_path":452,"layout":11},"Motion","/design-system/styles/motion",{"title":454,"_path":455,"layout":11},"Spacing","/design-system/styles/spacing",{"title":457,"_path":458,"layout":11},"Typography","/design-system/styles/typography",{"title":460,"_path":461,"children":462},"Components","/design-system/components",[463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,521,522,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574,577,580,583,586,589,592,595,598],{"title":464,"_path":465,"layout":11},"Accordion","/design-system/components/accordion",{"title":467,"_path":468,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":470,"_path":471,"layout":11},"Alert","/design-system/components/alert",{"title":473,"_path":474,"layout":11},"Block quote","/design-system/components/block-quote",{"title":476,"_path":477,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":479,"_path":480,"layout":11},"Button","/design-system/components/button",{"title":482,"_path":483,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":485,"_path":486,"layout":11},"Callout","/design-system/components/callout",{"title":488,"_path":489,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":491,"_path":492,"layout":11},"Card","/design-system/components/card",{"title":494,"_path":495,"layout":11},"Carousel","/design-system/components/carousel",{"title":497,"_path":498,"layout":11},"Category grid","/design-system/components/category-grid",{"title":500,"_path":501,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":503,"_path":504,"layout":11},"Chip","/design-system/components/chip",{"title":506,"_path":507,"layout":11},"Contact us","/design-system/components/contact-us",{"title":509,"_path":510,"layout":11},"Date input","/design-system/components/date-input",{"title":512,"_path":513,"layout":11},"Detail list","/design-system/components/detail-list",{"title":515,"_path":516,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":518,"_path":519,"layout":11},"File","/design-system/components/file",{"title":343,"_path":342,"layout":11},{"title":9,"_path":5,"layout":11},{"title":349,"_path":348,"layout":11},{"title":524,"_path":525,"layout":11},"Header","/design-system/components/header",{"title":527,"_path":528,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":530,"_path":531,"layout":11},"Input field","/design-system/components/input-field",{"title":533,"_path":534,"layout":11},"Key dates","/design-system/components/key-dates",{"title":536,"_path":537,"layout":11},"Media embed","/design-system/components/media-embed",{"title":539,"_path":540,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":542,"_path":543,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":545,"_path":546,"layout":11},"Media","/design-system/components/media",{"title":548,"_path":549,"layout":11},"Option button","/design-system/components/option-button",{"title":551,"_path":552,"layout":11},"Page action","/design-system/components/page-action",{"title":554,"_path":555,"layout":11},"Pagination","/design-system/components/pagination",{"title":557,"_path":558,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":560,"_path":561,"layout":11},"Profile","/design-system/components/profile",{"title":563,"_path":564,"layout":11},"Radio button","/design-system/components/radio-button",{"title":566,"_path":567,"layout":11},"Related links","/design-system/components/related-links",{"title":569,"_path":570,"layout":11},"Results listing","/design-system/components/results-listing",{"title":572,"_path":573,"layout":11},"Search bar","/design-system/components/search-bar",{"title":575,"_path":576,"layout":11},"Skip link","/design-system/components/skip-link",{"title":578,"_path":579,"layout":11},"Social share","/design-system/components/social-share",{"title":581,"_path":582,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":584,"_path":585,"layout":11},"Table","/design-system/components/table",{"title":587,"_path":588,"layout":11},"Tabs","/design-system/components/tabs",{"title":590,"_path":591,"layout":11},"Tag","/design-system/components/tag",{"title":593,"_path":594,"layout":11},"Text area","/design-system/components/text-area",{"title":596,"_path":597,"layout":11},"Timeline","/design-system/components/timeline",{"title":599,"_path":600,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":602,"_path":603,"children":604,"layout":11},"Ripple Framework","/framework",[605,606,624,646],{"title":602,"_path":603,"layout":11},{"title":607,"_path":608,"children":609},"Key Concepts","/framework/key-concepts",[610,612,615,618,621],{"title":417,"_path":611,"layout":11},"/framework/key-concepts/nuxt",{"title":613,"_path":614,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":616,"_path":617,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":619,"_path":620,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":622,"_path":623,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":625,"_path":626,"children":627},"Guides","/framework/guides",[628,631,634,637,640,643],{"title":629,"_path":630,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":632,"_path":633,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":635,"_path":636,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":638,"_path":639,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":641,"_path":642,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":644,"_path":645,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":647,"_path":648,"layout":11},"Core modules","/framework/core-modules",["Reactive",650],{"module-navigation":651},null,true,"/design-system/components/form-alert/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/form/index.html b/design-system/components/form/index.html index 3f941c68e5..400eea7a53 100644 --- a/design-system/components/form/index.html +++ b/design-system/components/form/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Form</h1><p class="rpl-type-p-large" data-v-3163c6df>The Form component guides users to give information and consists of a group of related inputs or controls.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls.<!--]--></p><p><!--[-->Common form components include the:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/components/input-field/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->input field component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/text-area/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->text area component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/date-input/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->date input component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/radio-button/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->radio button component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/checkbox/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->checkbox component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/dropdown/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->dropdown component<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><!--]--></ul><p><!--[-->An input field) is for short (single-line) text entry. A text area is for longer text.<!--]--></p><p><!--[-->Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections.<!--]--></p><p><!--[-->Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences.<!--]--></p><p><!--[-->The user can submit a form when all fields are valid (see <a href="/design-system/components/form-alert/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->form alert<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><h4 id="layout"><a href="#layout"><!--[-->Layout<!--]--></a></h4><p><!--[-->Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used.<!--]--></p><p><!--[-->Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give.<!--]--></p><h4 id="labels"><a href="#labels"><!--[-->Labels<!--]--></a></h4><p><!--[-->Each input must have a label.<!--]--></p><p><!--[-->Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels.<!--]--></p><p><!--[-->Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form.<!--]--></p><p><!--[-->Placeholder text should not be used as a label.<!--]--></p><h4 id="requirement-optional-vs-mandatory"><a href="#requirement-optional-vs-mandatory"><!--[-->Requirement - optional vs. mandatory<!--]--></a></h4><p><!--[-->Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information.<!--]--></p><p><!--[-->Most fields on a simple form will be required.<!--]--></p><p><!--[-->Where possible, don’t include a large number of optional fields.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete an input or text field.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the input field<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 id="placeholder-text"><a href="#placeholder-text"><!--[-->Placeholder text<!--]--></a></h4><p><!--[--><a href="/design-system/components/form/#accessibility" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->See accessibility<!--]--><!--]--><!----><!--]--></a> (below).<!--]--></p><h4 id="error-messages"><a href="#error-messages"><!--[-->Error messages<!--]--></a></h4><p><!--[-->All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages.<!--]--></p><h4 id="buttons"><a href="#buttons"><!--[-->Buttons<!--]--></a></h4><p><!--[-->Button labels should say what the button will do when a user interacts with it.<!--]--></p><p><!--[-->Ensure the main action button tells the user when the form is being submitted (see <a href="/design-system/components/button/#loading-spinner" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->button loading spinner<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><p><!--[-->To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button.<!--]--></p><h4 id="validation"><a href="#validation"><!--[-->Validation<!--]--></a></h4><p><!--[-->Form alert is used to tell the user the outcome of the form validation.<!--]--></p><p><!--[-->If the form has been submitted successfully, the success alert will replace the form.<!--]--></p><p><!--[-->If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions.<!--]--></p><h4 id="accessibility"><a href="#accessibility"><!--[-->Accessibility<!--]--></a></h4><p><!--[-->All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)<!--]--></p><p><!--[-->On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input.<!--]--></p><p><!--[-->Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome.<!--]--></p><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><p><!--[-->Use autocomplete to reduce typing for users.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Keep to one column.<!--]--></li><li><!--[-->Use top-align labels.<!--]--></li><li><!--[-->Always mark form fields as ‘required’ or ‘optional’.<!--]--></li><li><!--[-->Make calls to action descriptive - state the intent of the action.<!--]--></li><li><!--[-->Write short, clear headings and form input labels.<!--]--></li><li><!--[-->Use hint text (instead of labels) to explain any specifications.<!--]--></li><li><!--[-->Use field length input constraints - for fields with a defined character count like phone numbers and postcodes.<!--]--></li><li><!--[-->Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t create a form without a submit button.<!--]--></li><li><!--[-->Don't use an input or control without a form label.<!--]--></li><li><!--[-->Avoid using all caps.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Forms use colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/form.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/form/_payload.json">[{"state":1,"_errors":834,"serverRendered":837,"path":838,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":527,"$sdd-globals":541,"$sdd-navigation":542},{"/design-system/components/form":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":522,"_id":523,"_source":524,"_file":525,"_extension":526},"/design-system/components/form","components",false,"","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","page","Core",{"type":14,"children":15,"toc":511},"root",[16,25,31,36,98,103,108,113,126,131,138,145,150,155,161,166,171,176,181,187,192,197,202,208,213,218,236,241,247,258,264,269,274,280,285,297,302,308,313,318,323,329,334,339,344,349,354,359,365,408,414,432,436,442,447,460,465,472,492,495,501,506],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Common form components include the:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,51,60,69,78,87],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":17,"tag":45,"props":46,"children":48},"a",{"href":47},"/design-system/components/input-field/",[49],{"type":23,"value":50},"input field component",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":17,"tag":45,"props":55,"children":57},{"href":56},"/design-system/components/text-area/",[58],{"type":23,"value":59},"text area component",{"type":17,"tag":41,"props":61,"children":62},{},[63],{"type":17,"tag":45,"props":64,"children":66},{"href":65},"/design-system/components/date-input/",[67],{"type":23,"value":68},"date input component",{"type":17,"tag":41,"props":70,"children":71},{},[72],{"type":17,"tag":45,"props":73,"children":75},{"href":74},"/design-system/components/radio-button/",[76],{"type":23,"value":77},"radio button component",{"type":17,"tag":41,"props":79,"children":80},{},[81],{"type":17,"tag":45,"props":82,"children":84},{"href":83},"/design-system/components/checkbox/",[85],{"type":23,"value":86},"checkbox component",{"type":17,"tag":41,"props":88,"children":89},{},[90,96],{"type":17,"tag":45,"props":91,"children":93},{"href":92},"/design-system/components/dropdown/",[94],{"type":23,"value":95},"dropdown component",{"type":23,"value":97},".",{"type":17,"tag":26,"props":99,"children":100},{},[101],{"type":23,"value":102},"An input field) is for short (single-line) text entry. A text area is for longer text.",{"type":17,"tag":26,"props":104,"children":105},{},[106],{"type":23,"value":107},"Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections.",{"type":17,"tag":26,"props":109,"children":110},{},[111],{"type":23,"value":112},"Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences.",{"type":17,"tag":26,"props":114,"children":115},{},[116,118,124],{"type":23,"value":117},"The user can submit a form when all fields are valid (see ",{"type":17,"tag":45,"props":119,"children":121},{"href":120},"/design-system/components/form-alert/",[122],{"type":23,"value":123},"form alert",{"type":23,"value":125},").",{"type":17,"tag":127,"props":128,"children":130},"docs-example",{"id":129},"forms-form--default-story",[],{"type":17,"tag":132,"props":133,"children":135},"h3",{"id":134},"how-this-component-works",[136],{"type":23,"value":137},"How this component works",{"type":17,"tag":139,"props":140,"children":142},"h4",{"id":141},"layout",[143],{"type":23,"value":144},"Layout",{"type":17,"tag":26,"props":146,"children":147},{},[148],{"type":23,"value":149},"Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used.",{"type":17,"tag":26,"props":151,"children":152},{},[153],{"type":23,"value":154},"Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give.",{"type":17,"tag":139,"props":156,"children":158},{"id":157},"labels",[159],{"type":23,"value":160},"Labels",{"type":17,"tag":26,"props":162,"children":163},{},[164],{"type":23,"value":165},"Each input must have a label.",{"type":17,"tag":26,"props":167,"children":168},{},[169],{"type":23,"value":170},"Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels.",{"type":17,"tag":26,"props":172,"children":173},{},[174],{"type":23,"value":175},"Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form.",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"Placeholder text should not be used as a label.",{"type":17,"tag":139,"props":182,"children":184},{"id":183},"requirement-optional-vs-mandatory",[185],{"type":23,"value":186},"Requirement - optional vs. mandatory",{"type":17,"tag":26,"props":188,"children":189},{},[190],{"type":23,"value":191},"Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information.",{"type":17,"tag":26,"props":193,"children":194},{},[195],{"type":23,"value":196},"Most fields on a simple form will be required.",{"type":17,"tag":26,"props":198,"children":199},{},[200],{"type":23,"value":201},"Where possible, don’t include a large number of optional fields.",{"type":17,"tag":139,"props":203,"children":205},{"id":204},"hint-text",[206],{"type":23,"value":207},"Hint text",{"type":17,"tag":26,"props":209,"children":210},{},[211],{"type":23,"value":212},"Hint text can be used to tell the user what, or how, to successfully complete an input or text field.",{"type":17,"tag":26,"props":214,"children":215},{},[216],{"type":23,"value":217},"For example, hint text can include:",{"type":17,"tag":37,"props":219,"children":220},{},[221,226,231],{"type":17,"tag":41,"props":222,"children":223},{},[224],{"type":23,"value":225},"an overall description of the input field",{"type":17,"tag":41,"props":227,"children":228},{},[229],{"type":23,"value":230},"hints for what kind of information needs to be input",{"type":17,"tag":41,"props":232,"children":233},{},[234],{"type":23,"value":235},"specific formatting examples or requirements.",{"type":17,"tag":26,"props":237,"children":238},{},[239],{"type":23,"value":240},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":139,"props":242,"children":244},{"id":243},"placeholder-text",[245],{"type":23,"value":246},"Placeholder text",{"type":17,"tag":26,"props":248,"children":249},{},[250,256],{"type":17,"tag":45,"props":251,"children":253},{"href":252},"/design-system/components/form/#accessibility",[254],{"type":23,"value":255},"See accessibility",{"type":23,"value":257}," (below).",{"type":17,"tag":139,"props":259,"children":261},{"id":260},"error-messages",[262],{"type":23,"value":263},"Error messages",{"type":17,"tag":26,"props":265,"children":266},{},[267],{"type":23,"value":268},"All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page.",{"type":17,"tag":26,"props":270,"children":271},{},[272],{"type":23,"value":273},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages.",{"type":17,"tag":139,"props":275,"children":277},{"id":276},"buttons",[278],{"type":23,"value":279},"Buttons",{"type":17,"tag":26,"props":281,"children":282},{},[283],{"type":23,"value":284},"Button labels should say what the button will do when a user interacts with it.",{"type":17,"tag":26,"props":286,"children":287},{},[288,290,296],{"type":23,"value":289},"Ensure the main action button tells the user when the form is being submitted (see ",{"type":17,"tag":45,"props":291,"children":293},{"href":292},"/design-system/components/button/#loading-spinner",[294],{"type":23,"value":295},"button loading spinner",{"type":23,"value":125},{"type":17,"tag":26,"props":298,"children":299},{},[300],{"type":23,"value":301},"To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button.",{"type":17,"tag":139,"props":303,"children":305},{"id":304},"validation",[306],{"type":23,"value":307},"Validation",{"type":17,"tag":26,"props":309,"children":310},{},[311],{"type":23,"value":312},"Form alert is used to tell the user the outcome of the form validation.",{"type":17,"tag":26,"props":314,"children":315},{},[316],{"type":23,"value":317},"If the form has been submitted successfully, the success alert will replace the form.",{"type":17,"tag":26,"props":319,"children":320},{},[321],{"type":23,"value":322},"If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions.",{"type":17,"tag":139,"props":324,"children":326},{"id":325},"accessibility",[327],{"type":23,"value":328},"Accessibility",{"type":17,"tag":26,"props":330,"children":331},{},[332],{"type":23,"value":333},"All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)",{"type":17,"tag":26,"props":335,"children":336},{},[337],{"type":23,"value":338},"On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input.",{"type":17,"tag":26,"props":340,"children":341},{},[342],{"type":23,"value":343},"Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome.",{"type":17,"tag":26,"props":345,"children":346},{},[347],{"type":23,"value":348},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":350,"children":351},{},[352],{"type":23,"value":353},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":17,"tag":26,"props":355,"children":356},{},[357],{"type":23,"value":358},"Use autocomplete to reduce typing for users.",{"type":17,"tag":132,"props":360,"children":362},{"id":361},"when-and-how-to-use",[363],{"type":23,"value":364},"When and how to use",{"type":17,"tag":37,"props":366,"children":367},{},[368,373,378,383,388,393,398,403],{"type":17,"tag":41,"props":369,"children":370},{},[371],{"type":23,"value":372},"Keep to one column.",{"type":17,"tag":41,"props":374,"children":375},{},[376],{"type":23,"value":377},"Use top-align labels.",{"type":17,"tag":41,"props":379,"children":380},{},[381],{"type":23,"value":382},"Always mark form fields as ‘required’ or ‘optional’.",{"type":17,"tag":41,"props":384,"children":385},{},[386],{"type":23,"value":387},"Make calls to action descriptive - state the intent of the action.",{"type":17,"tag":41,"props":389,"children":390},{},[391],{"type":23,"value":392},"Write short, clear headings and form input labels.",{"type":17,"tag":41,"props":394,"children":395},{},[396],{"type":23,"value":397},"Use hint text (instead of labels) to explain any specifications.",{"type":17,"tag":41,"props":399,"children":400},{},[401],{"type":23,"value":402},"Use field length input constraints - for fields with a defined character count like phone numbers and postcodes.",{"type":17,"tag":41,"props":404,"children":405},{},[406],{"type":23,"value":407},"Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them.",{"type":17,"tag":132,"props":409,"children":411},{"id":410},"when-and-how-not-to-use",[412],{"type":23,"value":413},"When and how not to use",{"type":17,"tag":37,"props":415,"children":416},{},[417,422,427],{"type":17,"tag":41,"props":418,"children":419},{},[420],{"type":23,"value":421},"Don’t create a form without a submit button.",{"type":17,"tag":41,"props":423,"children":424},{},[425],{"type":23,"value":426},"Don't use an input or control without a form label.",{"type":17,"tag":41,"props":428,"children":429},{},[430],{"type":23,"value":431},"Avoid using all caps.",{"type":17,"tag":433,"props":434,"children":435},"hr",{},[],{"type":17,"tag":18,"props":437,"children":439},{"id":438},"theming",[440],{"type":23,"value":441},"Theming",{"type":17,"tag":26,"props":443,"children":444},{},[445],{"type":23,"value":446},"Forms use colour for:",{"type":17,"tag":37,"props":448,"children":449},{},[450,455],{"type":17,"tag":41,"props":451,"children":452},{},[453],{"type":23,"value":454},"interactive states",{"type":17,"tag":41,"props":456,"children":457},{},[458],{"type":23,"value":459},"icons.",{"type":17,"tag":26,"props":461,"children":462},{},[463],{"type":23,"value":464},"A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":466,"props":467,"children":468},"docs-theme-chooser",{},[469],{"type":17,"tag":127,"props":470,"children":471},{"id":129},[],{"type":17,"tag":26,"props":473,"children":474},{},[475,477,483,485,491],{"type":23,"value":476},"To create your own theme see ",{"type":17,"tag":45,"props":478,"children":480},{"href":479},"/design-system/design/theming-guidance-for-designers",[481],{"type":23,"value":482},"theming guidance for designers",{"type":23,"value":484}," or ",{"type":17,"tag":45,"props":486,"children":488},{"href":487},"/design-system/develop/theming",[489],{"type":23,"value":490},"theming guidance for developers",{"type":23,"value":97},{"type":17,"tag":433,"props":493,"children":494},{},[],{"type":17,"tag":18,"props":496,"children":498},{"id":497},"rationale",[499],{"type":23,"value":500},"Rationale",{"type":17,"tag":26,"props":502,"children":503},{},[504],{"type":23,"value":505},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":507,"children":508},{},[509],{"type":23,"value":510},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":512,"depth":512,"links":513},2,[514,520,521],{"id":20,"depth":512,"text":24,"children":515},[516,518,519],{"id":134,"depth":517,"text":137},3,{"id":361,"depth":517,"text":364},{"id":410,"depth":517,"text":413},{"id":438,"depth":512,"text":441},{"id":497,"depth":512,"text":500},"markdown","content:design-system:5.components:form.md","content","design-system/5.components/form.md","md",{"/design-system/components/form":528},[529,535],{"_path":530,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":531,"description":532,"layout":11,"label":12,"_type":522,"_id":533,"_source":524,"_file":534,"_extension":526},"/design-system/components/form-alert","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","content:design-system:5.components:form-alert.md","design-system/5.components/form-alert.md",{"_path":536,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":537,"description":538,"layout":11,"label":12,"_type":522,"_id":539,"_source":524,"_file":540,"_extension":526},"/design-system/components/header","Header","The Header component introduces the purpose and content of a page.","content:design-system:5.components:header.md","design-system/5.components/header.md",{},[543,548,786],{"title":544,"_path":545,"icon":546,"layout":547},"Ripple Design System","/","carbon:home","home",{"title":549,"_path":550,"children":551},"Design System","/design-system",[552,568,583,611,644],{"title":553,"_path":554,"children":555},"About","/design-system/about",[556,559,562,565],{"title":557,"_path":558,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":560,"_path":561,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":563,"_path":564,"layout":11},"Support","/design-system/about/getting-support",{"title":566,"_path":567,"layout":11},"Contributing","/design-system/about/contributing",{"title":569,"_path":570,"children":571},"Design","/design-system/design",[572,575,578,581],{"title":573,"_path":574,"layout":11},"Getting started","/design-system/design/getting-started",{"title":576,"_path":577,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":579,"_path":580,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":582,"_path":479,"layout":11},"Theming guidance for designers",{"title":584,"_path":585,"children":586},"Develop","/design-system/develop",[587,589,591,593],{"title":573,"_path":588,"layout":11},"/design-system/develop/getting-started",{"title":566,"_path":590,"layout":11},"/design-system/develop/contributing",{"title":592,"_path":487,"layout":11},"Theme and brand application",{"title":24,"_path":594,"children":595,"layout":11},"/design-system/develop/usage",[596,599,602,605,608],{"title":597,"_path":598,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":600,"_path":601,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":603,"_path":604,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":606,"_path":607,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":609,"_path":610,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":612,"_path":613,"children":614},"Styles","/design-system/styles",[615,618,621,624,627,630,632,635,638,641],{"title":616,"_path":617,"layout":11},"Colour","/design-system/styles/colour",{"title":619,"_path":620,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":622,"_path":623,"layout":11},"Grid","/design-system/styles/grid",{"title":625,"_path":626,"layout":11},"Icons","/design-system/styles/icons",{"title":628,"_path":629,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":144,"_path":631,"layout":11},"/design-system/styles/layout",{"title":633,"_path":634,"layout":11},"Logo","/design-system/styles/logo",{"title":636,"_path":637,"layout":11},"Motion","/design-system/styles/motion",{"title":639,"_path":640,"layout":11},"Spacing","/design-system/styles/spacing",{"title":642,"_path":643,"layout":11},"Typography","/design-system/styles/typography",{"title":645,"_path":646,"children":647},"Components","/design-system/components",[648,651,654,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,709,710,711,714,717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783],{"title":649,"_path":650,"layout":11},"Accordion","/design-system/components/accordion",{"title":652,"_path":653,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":655,"_path":656,"layout":11},"Alert","/design-system/components/alert",{"title":658,"_path":659,"layout":11},"Block quote","/design-system/components/block-quote",{"title":661,"_path":662,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":664,"_path":665,"layout":11},"Button","/design-system/components/button",{"title":667,"_path":668,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":670,"_path":671,"layout":11},"Callout","/design-system/components/callout",{"title":673,"_path":674,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":676,"_path":677,"layout":11},"Card","/design-system/components/card",{"title":679,"_path":680,"layout":11},"Carousel","/design-system/components/carousel",{"title":682,"_path":683,"layout":11},"Category grid","/design-system/components/category-grid",{"title":685,"_path":686,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":688,"_path":689,"layout":11},"Chip","/design-system/components/chip",{"title":691,"_path":692,"layout":11},"Contact us","/design-system/components/contact-us",{"title":694,"_path":695,"layout":11},"Date input","/design-system/components/date-input",{"title":697,"_path":698,"layout":11},"Detail list","/design-system/components/detail-list",{"title":700,"_path":701,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":703,"_path":704,"layout":11},"File","/design-system/components/file",{"title":706,"_path":707,"layout":11},"Footer","/design-system/components/footer",{"title":531,"_path":530,"layout":11},{"title":9,"_path":5,"layout":11},{"title":537,"_path":536,"layout":11},{"title":712,"_path":713,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":715,"_path":716,"layout":11},"Input field","/design-system/components/input-field",{"title":718,"_path":719,"layout":11},"Key dates","/design-system/components/key-dates",{"title":721,"_path":722,"layout":11},"Media embed","/design-system/components/media-embed",{"title":724,"_path":725,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":727,"_path":728,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":730,"_path":731,"layout":11},"Media","/design-system/components/media",{"title":733,"_path":734,"layout":11},"Option button","/design-system/components/option-button",{"title":736,"_path":737,"layout":11},"Page action","/design-system/components/page-action",{"title":739,"_path":740,"layout":11},"Pagination","/design-system/components/pagination",{"title":742,"_path":743,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":745,"_path":746,"layout":11},"Profile","/design-system/components/profile",{"title":748,"_path":749,"layout":11},"Radio button","/design-system/components/radio-button",{"title":751,"_path":752,"layout":11},"Related links","/design-system/components/related-links",{"title":754,"_path":755,"layout":11},"Results listing","/design-system/components/results-listing",{"title":757,"_path":758,"layout":11},"Search bar","/design-system/components/search-bar",{"title":760,"_path":761,"layout":11},"Skip link","/design-system/components/skip-link",{"title":763,"_path":764,"layout":11},"Social share","/design-system/components/social-share",{"title":766,"_path":767,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":769,"_path":770,"layout":11},"Table","/design-system/components/table",{"title":772,"_path":773,"layout":11},"Tabs","/design-system/components/tabs",{"title":775,"_path":776,"layout":11},"Tag","/design-system/components/tag",{"title":778,"_path":779,"layout":11},"Text area","/design-system/components/text-area",{"title":781,"_path":782,"layout":11},"Timeline","/design-system/components/timeline",{"title":784,"_path":785,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":787,"_path":788,"children":789,"layout":11},"Ripple Framework","/framework",[790,791,809,831],{"title":787,"_path":788,"layout":11},{"title":792,"_path":793,"children":794},"Key Concepts","/framework/key-concepts",[795,797,800,803,806],{"title":603,"_path":796,"layout":11},"/framework/key-concepts/nuxt",{"title":798,"_path":799,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":801,"_path":802,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":804,"_path":805,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":807,"_path":808,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":810,"_path":811,"children":812},"Guides","/framework/guides",[813,816,819,822,825,828],{"title":814,"_path":815,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":817,"_path":818,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":820,"_path":821,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":823,"_path":824,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":826,"_path":827,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":829,"_path":830,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":832,"_path":833,"layout":11},"Core modules","/framework/core-modules",["Reactive",835],{"module-navigation":836},null,true,"/design-system/components/form/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Form</h1><p class="rpl-type-p-large" data-v-3163c6df>The Form component guides users to give information and consists of a group of related inputs or controls.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls.<!--]--></p><p><!--[-->Common form components include the:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/components/input-field/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->input field component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/text-area/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->text area component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/date-input/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->date input component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/radio-button/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->radio button component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/checkbox/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->checkbox component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/dropdown/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->dropdown component<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><!--]--></ul><p><!--[-->An input field) is for short (single-line) text entry. A text area is for longer text.<!--]--></p><p><!--[-->Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections.<!--]--></p><p><!--[-->Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences.<!--]--></p><p><!--[-->The user can submit a form when all fields are valid (see <a href="/design-system/components/form-alert/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->form alert<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><h4 id="layout"><a href="#layout"><!--[-->Layout<!--]--></a></h4><p><!--[-->Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used.<!--]--></p><p><!--[-->Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give.<!--]--></p><h4 id="labels"><a href="#labels"><!--[-->Labels<!--]--></a></h4><p><!--[-->Each input must have a label.<!--]--></p><p><!--[-->Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels.<!--]--></p><p><!--[-->Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form.<!--]--></p><p><!--[-->Placeholder text should not be used as a label.<!--]--></p><h4 id="requirement-optional-vs-mandatory"><a href="#requirement-optional-vs-mandatory"><!--[-->Requirement - optional vs. mandatory<!--]--></a></h4><p><!--[-->Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information.<!--]--></p><p><!--[-->Most fields on a simple form will be required.<!--]--></p><p><!--[-->Where possible, don’t include a large number of optional fields.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete an input or text field.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the input field<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 id="placeholder-text"><a href="#placeholder-text"><!--[-->Placeholder text<!--]--></a></h4><p><!--[--><a href="/design-system/components/form/#accessibility" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->See accessibility<!--]--><!--]--><!----><!--]--></a> (below).<!--]--></p><h4 id="error-messages"><a href="#error-messages"><!--[-->Error messages<!--]--></a></h4><p><!--[-->All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages.<!--]--></p><h4 id="buttons"><a href="#buttons"><!--[-->Buttons<!--]--></a></h4><p><!--[-->Button labels should say what the button will do when a user interacts with it.<!--]--></p><p><!--[-->Ensure the main action button tells the user when the form is being submitted (see <a href="/design-system/components/button/#loading-spinner" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->button loading spinner<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><p><!--[-->To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button.<!--]--></p><h4 id="validation"><a href="#validation"><!--[-->Validation<!--]--></a></h4><p><!--[-->Form alert is used to tell the user the outcome of the form validation.<!--]--></p><p><!--[-->If the form has been submitted successfully, the success alert will replace the form.<!--]--></p><p><!--[-->If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions.<!--]--></p><h4 id="accessibility"><a href="#accessibility"><!--[-->Accessibility<!--]--></a></h4><p><!--[-->All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)<!--]--></p><p><!--[-->On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input.<!--]--></p><p><!--[-->Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome.<!--]--></p><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><p><!--[-->Use autocomplete to reduce typing for users.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Keep to one column.<!--]--></li><li><!--[-->Use top-align labels.<!--]--></li><li><!--[-->Always mark form fields as ‘required’ or ‘optional’.<!--]--></li><li><!--[-->Make calls to action descriptive - state the intent of the action.<!--]--></li><li><!--[-->Write short, clear headings and form input labels.<!--]--></li><li><!--[-->Use hint text (instead of labels) to explain any specifications.<!--]--></li><li><!--[-->Use field length input constraints - for fields with a defined character count like phone numbers and postcodes.<!--]--></li><li><!--[-->Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t create a form without a submit button.<!--]--></li><li><!--[-->Don't use an input or control without a form label.<!--]--></li><li><!--[-->Avoid using all caps.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Forms use colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-form--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/form.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/form/_payload.json">[{"state":1,"_errors":834,"serverRendered":837,"path":838,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":527,"$sdd-globals":541,"$sdd-navigation":542},{"/design-system/components/form":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":522,"_id":523,"_source":524,"_file":525,"_extension":526},"/design-system/components/form","components",false,"","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","page","Core",{"type":14,"children":15,"toc":511},"root",[16,25,31,36,98,103,108,113,126,131,138,145,150,155,161,166,171,176,181,187,192,197,202,208,213,218,236,241,247,258,264,269,274,280,285,297,302,308,313,318,323,329,334,339,344,349,354,359,365,408,414,432,436,442,447,460,465,472,492,495,501,506],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Common form components include the:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,51,60,69,78,87],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":17,"tag":45,"props":46,"children":48},"a",{"href":47},"/design-system/components/input-field/",[49],{"type":23,"value":50},"input field component",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":17,"tag":45,"props":55,"children":57},{"href":56},"/design-system/components/text-area/",[58],{"type":23,"value":59},"text area component",{"type":17,"tag":41,"props":61,"children":62},{},[63],{"type":17,"tag":45,"props":64,"children":66},{"href":65},"/design-system/components/date-input/",[67],{"type":23,"value":68},"date input component",{"type":17,"tag":41,"props":70,"children":71},{},[72],{"type":17,"tag":45,"props":73,"children":75},{"href":74},"/design-system/components/radio-button/",[76],{"type":23,"value":77},"radio button component",{"type":17,"tag":41,"props":79,"children":80},{},[81],{"type":17,"tag":45,"props":82,"children":84},{"href":83},"/design-system/components/checkbox/",[85],{"type":23,"value":86},"checkbox component",{"type":17,"tag":41,"props":88,"children":89},{},[90,96],{"type":17,"tag":45,"props":91,"children":93},{"href":92},"/design-system/components/dropdown/",[94],{"type":23,"value":95},"dropdown component",{"type":23,"value":97},".",{"type":17,"tag":26,"props":99,"children":100},{},[101],{"type":23,"value":102},"An input field) is for short (single-line) text entry. A text area is for longer text.",{"type":17,"tag":26,"props":104,"children":105},{},[106],{"type":23,"value":107},"Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections.",{"type":17,"tag":26,"props":109,"children":110},{},[111],{"type":23,"value":112},"Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences.",{"type":17,"tag":26,"props":114,"children":115},{},[116,118,124],{"type":23,"value":117},"The user can submit a form when all fields are valid (see ",{"type":17,"tag":45,"props":119,"children":121},{"href":120},"/design-system/components/form-alert/",[122],{"type":23,"value":123},"form alert",{"type":23,"value":125},").",{"type":17,"tag":127,"props":128,"children":130},"docs-example",{"id":129},"forms-form--default-story",[],{"type":17,"tag":132,"props":133,"children":135},"h3",{"id":134},"how-this-component-works",[136],{"type":23,"value":137},"How this component works",{"type":17,"tag":139,"props":140,"children":142},"h4",{"id":141},"layout",[143],{"type":23,"value":144},"Layout",{"type":17,"tag":26,"props":146,"children":147},{},[148],{"type":23,"value":149},"Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used.",{"type":17,"tag":26,"props":151,"children":152},{},[153],{"type":23,"value":154},"Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give.",{"type":17,"tag":139,"props":156,"children":158},{"id":157},"labels",[159],{"type":23,"value":160},"Labels",{"type":17,"tag":26,"props":162,"children":163},{},[164],{"type":23,"value":165},"Each input must have a label.",{"type":17,"tag":26,"props":167,"children":168},{},[169],{"type":23,"value":170},"Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels.",{"type":17,"tag":26,"props":172,"children":173},{},[174],{"type":23,"value":175},"Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form.",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"Placeholder text should not be used as a label.",{"type":17,"tag":139,"props":182,"children":184},{"id":183},"requirement-optional-vs-mandatory",[185],{"type":23,"value":186},"Requirement - optional vs. mandatory",{"type":17,"tag":26,"props":188,"children":189},{},[190],{"type":23,"value":191},"Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information.",{"type":17,"tag":26,"props":193,"children":194},{},[195],{"type":23,"value":196},"Most fields on a simple form will be required.",{"type":17,"tag":26,"props":198,"children":199},{},[200],{"type":23,"value":201},"Where possible, don’t include a large number of optional fields.",{"type":17,"tag":139,"props":203,"children":205},{"id":204},"hint-text",[206],{"type":23,"value":207},"Hint text",{"type":17,"tag":26,"props":209,"children":210},{},[211],{"type":23,"value":212},"Hint text can be used to tell the user what, or how, to successfully complete an input or text field.",{"type":17,"tag":26,"props":214,"children":215},{},[216],{"type":23,"value":217},"For example, hint text can include:",{"type":17,"tag":37,"props":219,"children":220},{},[221,226,231],{"type":17,"tag":41,"props":222,"children":223},{},[224],{"type":23,"value":225},"an overall description of the input field",{"type":17,"tag":41,"props":227,"children":228},{},[229],{"type":23,"value":230},"hints for what kind of information needs to be input",{"type":17,"tag":41,"props":232,"children":233},{},[234],{"type":23,"value":235},"specific formatting examples or requirements.",{"type":17,"tag":26,"props":237,"children":238},{},[239],{"type":23,"value":240},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":139,"props":242,"children":244},{"id":243},"placeholder-text",[245],{"type":23,"value":246},"Placeholder text",{"type":17,"tag":26,"props":248,"children":249},{},[250,256],{"type":17,"tag":45,"props":251,"children":253},{"href":252},"/design-system/components/form/#accessibility",[254],{"type":23,"value":255},"See accessibility",{"type":23,"value":257}," (below).",{"type":17,"tag":139,"props":259,"children":261},{"id":260},"error-messages",[262],{"type":23,"value":263},"Error messages",{"type":17,"tag":26,"props":265,"children":266},{},[267],{"type":23,"value":268},"All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page.",{"type":17,"tag":26,"props":270,"children":271},{},[272],{"type":23,"value":273},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages.",{"type":17,"tag":139,"props":275,"children":277},{"id":276},"buttons",[278],{"type":23,"value":279},"Buttons",{"type":17,"tag":26,"props":281,"children":282},{},[283],{"type":23,"value":284},"Button labels should say what the button will do when a user interacts with it.",{"type":17,"tag":26,"props":286,"children":287},{},[288,290,296],{"type":23,"value":289},"Ensure the main action button tells the user when the form is being submitted (see ",{"type":17,"tag":45,"props":291,"children":293},{"href":292},"/design-system/components/button/#loading-spinner",[294],{"type":23,"value":295},"button loading spinner",{"type":23,"value":125},{"type":17,"tag":26,"props":298,"children":299},{},[300],{"type":23,"value":301},"To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button.",{"type":17,"tag":139,"props":303,"children":305},{"id":304},"validation",[306],{"type":23,"value":307},"Validation",{"type":17,"tag":26,"props":309,"children":310},{},[311],{"type":23,"value":312},"Form alert is used to tell the user the outcome of the form validation.",{"type":17,"tag":26,"props":314,"children":315},{},[316],{"type":23,"value":317},"If the form has been submitted successfully, the success alert will replace the form.",{"type":17,"tag":26,"props":319,"children":320},{},[321],{"type":23,"value":322},"If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions.",{"type":17,"tag":139,"props":324,"children":326},{"id":325},"accessibility",[327],{"type":23,"value":328},"Accessibility",{"type":17,"tag":26,"props":330,"children":331},{},[332],{"type":23,"value":333},"All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)",{"type":17,"tag":26,"props":335,"children":336},{},[337],{"type":23,"value":338},"On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input.",{"type":17,"tag":26,"props":340,"children":341},{},[342],{"type":23,"value":343},"Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome.",{"type":17,"tag":26,"props":345,"children":346},{},[347],{"type":23,"value":348},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":350,"children":351},{},[352],{"type":23,"value":353},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":17,"tag":26,"props":355,"children":356},{},[357],{"type":23,"value":358},"Use autocomplete to reduce typing for users.",{"type":17,"tag":132,"props":360,"children":362},{"id":361},"when-and-how-to-use",[363],{"type":23,"value":364},"When and how to use",{"type":17,"tag":37,"props":366,"children":367},{},[368,373,378,383,388,393,398,403],{"type":17,"tag":41,"props":369,"children":370},{},[371],{"type":23,"value":372},"Keep to one column.",{"type":17,"tag":41,"props":374,"children":375},{},[376],{"type":23,"value":377},"Use top-align labels.",{"type":17,"tag":41,"props":379,"children":380},{},[381],{"type":23,"value":382},"Always mark form fields as ‘required’ or ‘optional’.",{"type":17,"tag":41,"props":384,"children":385},{},[386],{"type":23,"value":387},"Make calls to action descriptive - state the intent of the action.",{"type":17,"tag":41,"props":389,"children":390},{},[391],{"type":23,"value":392},"Write short, clear headings and form input labels.",{"type":17,"tag":41,"props":394,"children":395},{},[396],{"type":23,"value":397},"Use hint text (instead of labels) to explain any specifications.",{"type":17,"tag":41,"props":399,"children":400},{},[401],{"type":23,"value":402},"Use field length input constraints - for fields with a defined character count like phone numbers and postcodes.",{"type":17,"tag":41,"props":404,"children":405},{},[406],{"type":23,"value":407},"Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them.",{"type":17,"tag":132,"props":409,"children":411},{"id":410},"when-and-how-not-to-use",[412],{"type":23,"value":413},"When and how not to use",{"type":17,"tag":37,"props":415,"children":416},{},[417,422,427],{"type":17,"tag":41,"props":418,"children":419},{},[420],{"type":23,"value":421},"Don’t create a form without a submit button.",{"type":17,"tag":41,"props":423,"children":424},{},[425],{"type":23,"value":426},"Don't use an input or control without a form label.",{"type":17,"tag":41,"props":428,"children":429},{},[430],{"type":23,"value":431},"Avoid using all caps.",{"type":17,"tag":433,"props":434,"children":435},"hr",{},[],{"type":17,"tag":18,"props":437,"children":439},{"id":438},"theming",[440],{"type":23,"value":441},"Theming",{"type":17,"tag":26,"props":443,"children":444},{},[445],{"type":23,"value":446},"Forms use colour for:",{"type":17,"tag":37,"props":448,"children":449},{},[450,455],{"type":17,"tag":41,"props":451,"children":452},{},[453],{"type":23,"value":454},"interactive states",{"type":17,"tag":41,"props":456,"children":457},{},[458],{"type":23,"value":459},"icons.",{"type":17,"tag":26,"props":461,"children":462},{},[463],{"type":23,"value":464},"A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":466,"props":467,"children":468},"docs-theme-chooser",{},[469],{"type":17,"tag":127,"props":470,"children":471},{"id":129},[],{"type":17,"tag":26,"props":473,"children":474},{},[475,477,483,485,491],{"type":23,"value":476},"To create your own theme see ",{"type":17,"tag":45,"props":478,"children":480},{"href":479},"/design-system/design/theming-guidance-for-designers",[481],{"type":23,"value":482},"theming guidance for designers",{"type":23,"value":484}," or ",{"type":17,"tag":45,"props":486,"children":488},{"href":487},"/design-system/develop/theming",[489],{"type":23,"value":490},"theming guidance for developers",{"type":23,"value":97},{"type":17,"tag":433,"props":493,"children":494},{},[],{"type":17,"tag":18,"props":496,"children":498},{"id":497},"rationale",[499],{"type":23,"value":500},"Rationale",{"type":17,"tag":26,"props":502,"children":503},{},[504],{"type":23,"value":505},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":507,"children":508},{},[509],{"type":23,"value":510},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":512,"depth":512,"links":513},2,[514,520,521],{"id":20,"depth":512,"text":24,"children":515},[516,518,519],{"id":134,"depth":517,"text":137},3,{"id":361,"depth":517,"text":364},{"id":410,"depth":517,"text":413},{"id":438,"depth":512,"text":441},{"id":497,"depth":512,"text":500},"markdown","content:design-system:5.components:form.md","content","design-system/5.components/form.md","md",{"/design-system/components/form":528},[529,535],{"_path":530,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":531,"description":532,"layout":11,"label":12,"_type":522,"_id":533,"_source":524,"_file":534,"_extension":526},"/design-system/components/form-alert","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","content:design-system:5.components:form-alert.md","design-system/5.components/form-alert.md",{"_path":536,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":537,"description":538,"layout":11,"label":12,"_type":522,"_id":539,"_source":524,"_file":540,"_extension":526},"/design-system/components/header","Header","The Header component introduces the purpose and content of a page.","content:design-system:5.components:header.md","design-system/5.components/header.md",{},[543,548,786],{"title":544,"_path":545,"icon":546,"layout":547},"Ripple Design System","/","carbon:home","home",{"title":549,"_path":550,"children":551},"Design System","/design-system",[552,568,583,611,644],{"title":553,"_path":554,"children":555},"About","/design-system/about",[556,559,562,565],{"title":557,"_path":558,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":560,"_path":561,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":563,"_path":564,"layout":11},"Support","/design-system/about/getting-support",{"title":566,"_path":567,"layout":11},"Contributing","/design-system/about/contributing",{"title":569,"_path":570,"children":571},"Design","/design-system/design",[572,575,578,581],{"title":573,"_path":574,"layout":11},"Getting started","/design-system/design/getting-started",{"title":576,"_path":577,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":579,"_path":580,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":582,"_path":479,"layout":11},"Theming guidance for designers",{"title":584,"_path":585,"children":586},"Develop","/design-system/develop",[587,589,591,593],{"title":573,"_path":588,"layout":11},"/design-system/develop/getting-started",{"title":566,"_path":590,"layout":11},"/design-system/develop/contributing",{"title":592,"_path":487,"layout":11},"Theme and brand application",{"title":24,"_path":594,"children":595,"layout":11},"/design-system/develop/usage",[596,599,602,605,608],{"title":597,"_path":598,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":600,"_path":601,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":603,"_path":604,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":606,"_path":607,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":609,"_path":610,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":612,"_path":613,"children":614},"Styles","/design-system/styles",[615,618,621,624,627,630,632,635,638,641],{"title":616,"_path":617,"layout":11},"Colour","/design-system/styles/colour",{"title":619,"_path":620,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":622,"_path":623,"layout":11},"Grid","/design-system/styles/grid",{"title":625,"_path":626,"layout":11},"Icons","/design-system/styles/icons",{"title":628,"_path":629,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":144,"_path":631,"layout":11},"/design-system/styles/layout",{"title":633,"_path":634,"layout":11},"Logo","/design-system/styles/logo",{"title":636,"_path":637,"layout":11},"Motion","/design-system/styles/motion",{"title":639,"_path":640,"layout":11},"Spacing","/design-system/styles/spacing",{"title":642,"_path":643,"layout":11},"Typography","/design-system/styles/typography",{"title":645,"_path":646,"children":647},"Components","/design-system/components",[648,651,654,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,709,710,711,714,717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783],{"title":649,"_path":650,"layout":11},"Accordion","/design-system/components/accordion",{"title":652,"_path":653,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":655,"_path":656,"layout":11},"Alert","/design-system/components/alert",{"title":658,"_path":659,"layout":11},"Block quote","/design-system/components/block-quote",{"title":661,"_path":662,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":664,"_path":665,"layout":11},"Button","/design-system/components/button",{"title":667,"_path":668,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":670,"_path":671,"layout":11},"Callout","/design-system/components/callout",{"title":673,"_path":674,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":676,"_path":677,"layout":11},"Card","/design-system/components/card",{"title":679,"_path":680,"layout":11},"Carousel","/design-system/components/carousel",{"title":682,"_path":683,"layout":11},"Category grid","/design-system/components/category-grid",{"title":685,"_path":686,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":688,"_path":689,"layout":11},"Chip","/design-system/components/chip",{"title":691,"_path":692,"layout":11},"Contact us","/design-system/components/contact-us",{"title":694,"_path":695,"layout":11},"Date input","/design-system/components/date-input",{"title":697,"_path":698,"layout":11},"Detail list","/design-system/components/detail-list",{"title":700,"_path":701,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":703,"_path":704,"layout":11},"File","/design-system/components/file",{"title":706,"_path":707,"layout":11},"Footer","/design-system/components/footer",{"title":531,"_path":530,"layout":11},{"title":9,"_path":5,"layout":11},{"title":537,"_path":536,"layout":11},{"title":712,"_path":713,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":715,"_path":716,"layout":11},"Input field","/design-system/components/input-field",{"title":718,"_path":719,"layout":11},"Key dates","/design-system/components/key-dates",{"title":721,"_path":722,"layout":11},"Media embed","/design-system/components/media-embed",{"title":724,"_path":725,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":727,"_path":728,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":730,"_path":731,"layout":11},"Media","/design-system/components/media",{"title":733,"_path":734,"layout":11},"Option button","/design-system/components/option-button",{"title":736,"_path":737,"layout":11},"Page action","/design-system/components/page-action",{"title":739,"_path":740,"layout":11},"Pagination","/design-system/components/pagination",{"title":742,"_path":743,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":745,"_path":746,"layout":11},"Profile","/design-system/components/profile",{"title":748,"_path":749,"layout":11},"Radio button","/design-system/components/radio-button",{"title":751,"_path":752,"layout":11},"Related links","/design-system/components/related-links",{"title":754,"_path":755,"layout":11},"Results listing","/design-system/components/results-listing",{"title":757,"_path":758,"layout":11},"Search bar","/design-system/components/search-bar",{"title":760,"_path":761,"layout":11},"Skip link","/design-system/components/skip-link",{"title":763,"_path":764,"layout":11},"Social share","/design-system/components/social-share",{"title":766,"_path":767,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":769,"_path":770,"layout":11},"Table","/design-system/components/table",{"title":772,"_path":773,"layout":11},"Tabs","/design-system/components/tabs",{"title":775,"_path":776,"layout":11},"Tag","/design-system/components/tag",{"title":778,"_path":779,"layout":11},"Text area","/design-system/components/text-area",{"title":781,"_path":782,"layout":11},"Timeline","/design-system/components/timeline",{"title":784,"_path":785,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":787,"_path":788,"children":789,"layout":11},"Ripple Framework","/framework",[790,791,809,831],{"title":787,"_path":788,"layout":11},{"title":792,"_path":793,"children":794},"Key Concepts","/framework/key-concepts",[795,797,800,803,806],{"title":603,"_path":796,"layout":11},"/framework/key-concepts/nuxt",{"title":798,"_path":799,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":801,"_path":802,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":804,"_path":805,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":807,"_path":808,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":810,"_path":811,"children":812},"Guides","/framework/guides",[813,816,819,822,825,828],{"title":814,"_path":815,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":817,"_path":818,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":820,"_path":821,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":823,"_path":824,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":826,"_path":827,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":829,"_path":830,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":832,"_path":833,"layout":11},"Core modules","/framework/core-modules",["Reactive",835],{"module-navigation":836},null,true,"/design-system/components/form/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/header/index.html b/design-system/components/header/index.html index f0f1cce686..86ebdacea1 100644 --- a/design-system/components/header/index.html +++ b/design-system/components/header/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Header</h1><p class="rpl-type-p-large" data-v-3163c6df>The Header component introduces the purpose and content of a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading.<!--]--></p><p><!--[-->Headers include optional content such as introduction text, journey links, a call to action and an introduction banner.<!--]--></p><p><!--[-->Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics.<!--]--></p><p><!--[-->The header can also support a campaign logo if required. This will display above the page title.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--default-journey-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-journey-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Keep the header simple and concise.<!--]--></li><li><!--[-->Use clear calls to action that align with the message or task.<!--]--></li><li><!--[-->Only use images that add value to the content and support the message.<!--]--></li><li><!--[-->Include with featured links and buttons to help users perform key tasks.<!--]--></li><li><!--[-->Include an optional campaign logo.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use a mix of reverse and default page title and introduction text styling.<!--]--></li><li><!--[-->Don’t include the same links in the main and introduction banners.<!--]--></li><li><!--[-->Don’t use with more than 6 journey links.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The header has 3 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->reverse<!--]--></li><li><!--[-->image.<!--]--></li><!--]--></ul><p><!--[-->The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information.<!--]--></p><p><!--[-->They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required.<!--]--></p><p><!--[-->The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text.<!--]--></p><p><!--[-->All variants can be used with the introduction banner.<!--]--></p><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--default-call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><p><!--[-->The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--reverse-journey-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-journey-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--reverse-call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="image"><a href="#image"><!--[-->Image<!--]--></a></h3><p><!--[-->An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type.<!--]--></p><p><!--[-->Images should not be stretched or too low in resolution. They should also not be complex or include text.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--image-reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--image-reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="introduction-banner"><a href="#introduction-banner"><!--[-->Introduction banner<!--]--></a></h3><p><!--[-->The introduction banner:<!--]--></p><ul><!--[--><li><!--[-->can be used to add content and journey links under the page title and introduction section in the main header banner<!--]--></li><li><!--[-->has an optional icon and journey links<!--]--></li><li><!--[-->should contain content relating to the content in the main header.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--intro-with-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--intro-with-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="interaction-with-other-components"><a href="#interaction-with-other-components"><!--[-->Interaction with other components<!--]--></a></h2><p><!--[-->When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape.<!--]--></p><p><!--[-->The bottom corner shape won't hide if an introduction banner is between the header and campaign banner.<!--]--></p><figure class="docs-example" data-v-442f4b84><div class="docs-example-body" data-v-442f4b84><img src="/assets/img/campaign-banner-behaviour.png" alt="A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header." data-v-442f4b84></div><!----></figure><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Headers can be themed in 2 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette.<!--]--></li><!--]--></ul><p><!--[-->It will also adopt theming from the button component when displaying the call to action.<!--]--></p><p><!--[-->If you choose neutral button for your site, the header will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--default-call-to-action&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-call-to-action&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--reverse-journey-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-journey-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--intro-with-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--intro-with-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><h3 id="neutral-theme"><a href="#neutral-theme"><!--[-->Neutral theme<!--]--></a></h3><p><!--[-->Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--image-neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--image-neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->To create your own theme see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/header.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/header/_payload.json">[{"state":1,"_errors":701,"serverRendered":704,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":391,"$sdd-globals":405,"$sdd-navigation":406},{"/design-system/components/header":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":386,"_id":387,"_source":388,"_file":389,"_extension":390},"/design-system/components/header","components",false,"","Header","The Header component introduces the purpose and content of a page.","page","Core",{"type":14,"children":15,"toc":368},"root",[16,25,31,36,41,46,51,58,88,94,117,121,127,132,150,155,160,165,170,175,179,183,188,193,197,201,207,212,217,221,227,232,250,254,257,263,268,273,279,282,288,293,306,311,316,329,335,340,344],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Headers include optional content such as introduction text, journey links, a call to action and an introduction banner.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"The header can also support a campaign logo if required. This will display above the page title.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"core-containers-header--default-journey-links",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"when-and-how-to-use",[56],{"type":23,"value":57},"When and how to use",{"type":17,"tag":59,"props":60,"children":61},"ul",{},[62,68,73,78,83],{"type":17,"tag":63,"props":64,"children":65},"li",{},[66],{"type":23,"value":67},"Keep the header simple and concise.",{"type":17,"tag":63,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use clear calls to action that align with the message or task.",{"type":17,"tag":63,"props":74,"children":75},{},[76],{"type":23,"value":77},"Only use images that add value to the content and support the message.",{"type":17,"tag":63,"props":79,"children":80},{},[81],{"type":23,"value":82},"Include with featured links and buttons to help users perform key tasks.",{"type":17,"tag":63,"props":84,"children":85},{},[86],{"type":23,"value":87},"Include an optional campaign logo.",{"type":17,"tag":52,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":23,"value":93},"When and how not to use",{"type":17,"tag":59,"props":95,"children":96},{},[97,102,107,112],{"type":17,"tag":63,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t use a mix of reverse and default page title and introduction text styling.",{"type":17,"tag":63,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don’t include the same links in the main and introduction banners.",{"type":17,"tag":63,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don’t use with more than 6 journey links.",{"type":17,"tag":63,"props":113,"children":114},{},[115],{"type":23,"value":116},"Don’t overload with content.",{"type":17,"tag":118,"props":119,"children":120},"hr",{},[],{"type":17,"tag":18,"props":122,"children":124},{"id":123},"variants",[125],{"type":23,"value":126},"Variants",{"type":17,"tag":26,"props":128,"children":129},{},[130],{"type":23,"value":131},"The header has 3 variants:",{"type":17,"tag":59,"props":133,"children":134},{},[135,140,145],{"type":17,"tag":63,"props":136,"children":137},{},[138],{"type":23,"value":139},"default",{"type":17,"tag":63,"props":141,"children":142},{},[143],{"type":23,"value":144},"reverse",{"type":17,"tag":63,"props":146,"children":147},{},[148],{"type":23,"value":149},"image.",{"type":17,"tag":26,"props":151,"children":152},{},[153],{"type":23,"value":154},"The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information.",{"type":17,"tag":26,"props":156,"children":157},{},[158],{"type":23,"value":159},"They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required.",{"type":17,"tag":26,"props":161,"children":162},{},[163],{"type":23,"value":164},"The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text.",{"type":17,"tag":26,"props":166,"children":167},{},[168],{"type":23,"value":169},"All variants can be used with the introduction banner.",{"type":17,"tag":52,"props":171,"children":172},{"id":139},[173],{"type":23,"value":174},"Default",{"type":17,"tag":47,"props":176,"children":178},{"id":177},"core-containers-header--default-story",[],{"type":17,"tag":47,"props":180,"children":182},{"id":181},"core-containers-header--default-call-to-action",[],{"type":17,"tag":52,"props":184,"children":185},{"id":144},[186],{"type":23,"value":187},"Reverse",{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information.",{"type":17,"tag":47,"props":194,"children":196},{"id":195},"core-containers-header--reverse-journey-links",[],{"type":17,"tag":47,"props":198,"children":200},{"id":199},"core-containers-header--reverse-call-to-action",[],{"type":17,"tag":52,"props":202,"children":204},{"id":203},"image",[205],{"type":23,"value":206},"Image",{"type":17,"tag":26,"props":208,"children":209},{},[210],{"type":23,"value":211},"An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type.",{"type":17,"tag":26,"props":213,"children":214},{},[215],{"type":23,"value":216},"Images should not be stretched or too low in resolution. They should also not be complex or include text.",{"type":17,"tag":47,"props":218,"children":220},{"id":219},"core-containers-header--image-reverse",[],{"type":17,"tag":52,"props":222,"children":224},{"id":223},"introduction-banner",[225],{"type":23,"value":226},"Introduction banner",{"type":17,"tag":26,"props":228,"children":229},{},[230],{"type":23,"value":231},"The introduction banner:",{"type":17,"tag":59,"props":233,"children":234},{},[235,240,245],{"type":17,"tag":63,"props":236,"children":237},{},[238],{"type":23,"value":239},"can be used to add content and journey links under the page title and introduction section in the main header banner",{"type":17,"tag":63,"props":241,"children":242},{},[243],{"type":23,"value":244},"has an optional icon and journey links",{"type":17,"tag":63,"props":246,"children":247},{},[248],{"type":23,"value":249},"should contain content relating to the content in the main header.",{"type":17,"tag":47,"props":251,"children":253},{"id":252},"core-containers-header--intro-with-links",[],{"type":17,"tag":118,"props":255,"children":256},{},[],{"type":17,"tag":18,"props":258,"children":260},{"id":259},"interaction-with-other-components",[261],{"type":23,"value":262},"Interaction with other components",{"type":17,"tag":26,"props":264,"children":265},{},[266],{"type":23,"value":267},"When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape.",{"type":17,"tag":26,"props":269,"children":270},{},[271],{"type":23,"value":272},"The bottom corner shape won't hide if an introduction banner is between the header and campaign banner.",{"type":17,"tag":274,"props":275,"children":278},"docs-image-example",{"alt":276,"src":277},"A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header.","/assets/img/campaign-banner-behaviour.png",[],{"type":17,"tag":118,"props":280,"children":281},{},[],{"type":17,"tag":18,"props":283,"children":285},{"id":284},"theming",[286],{"type":23,"value":287},"Theming",{"type":17,"tag":26,"props":289,"children":290},{},[291],{"type":23,"value":292},"Headers can be themed in 2 ways:",{"type":17,"tag":59,"props":294,"children":295},{},[296,301],{"type":17,"tag":63,"props":297,"children":298},{},[299],{"type":23,"value":300},"site colour palette",{"type":17,"tag":63,"props":302,"children":303},{},[304],{"type":23,"value":305},"neutral colour palette.",{"type":17,"tag":26,"props":307,"children":308},{},[309],{"type":23,"value":310},"It will also adopt theming from the button component when displaying the call to action.",{"type":17,"tag":26,"props":312,"children":313},{},[314],{"type":23,"value":315},"If you choose neutral button for your site, the header will display buttons in the neutral theme.",{"type":17,"tag":317,"props":318,"children":319},"docs-theme-chooser",{},[320,323,326],{"type":17,"tag":47,"props":321,"children":322},{"id":181},[],{"type":17,"tag":47,"props":324,"children":325},{"id":195},[],{"type":17,"tag":47,"props":327,"children":328},{"id":252},[],{"type":17,"tag":52,"props":330,"children":332},{"id":331},"neutral-theme",[333],{"type":23,"value":334},"Neutral theme",{"type":17,"tag":26,"props":336,"children":337},{},[338],{"type":23,"value":339},"Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised.",{"type":17,"tag":47,"props":341,"children":343},{"id":342},"core-containers-header--image-neutral",[],{"type":17,"tag":26,"props":345,"children":346},{},[347,349,358,360,366],{"type":23,"value":348},"To create your own theme see ",{"type":17,"tag":350,"props":351,"children":355},"a",{"href":352,"rel":353},"https://www.vic.gov.au",[354],"nofollow",[356],{"type":23,"value":357},"theming guidance for designers",{"type":23,"value":359}," or ",{"type":17,"tag":350,"props":361,"children":363},{"href":352,"rel":362},[354],[364],{"type":23,"value":365},"theming guidance for developers",{"type":23,"value":367},".",{"title":8,"searchDepth":369,"depth":369,"links":370},2,[371,376,382,383],{"id":20,"depth":369,"text":24,"children":372},[373,375],{"id":54,"depth":374,"text":57},3,{"id":90,"depth":374,"text":93},{"id":123,"depth":369,"text":126,"children":377},[378,379,380,381],{"id":139,"depth":374,"text":174},{"id":144,"depth":374,"text":187},{"id":203,"depth":374,"text":206},{"id":223,"depth":374,"text":226},{"id":259,"depth":369,"text":262},{"id":284,"depth":369,"text":287,"children":384},[385],{"id":331,"depth":374,"text":334},"markdown","content:design-system:5.components:header.md","content","design-system/5.components/header.md","md",{"/design-system/components/header":392},[393,399],{"_path":394,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":395,"description":396,"layout":11,"label":12,"_type":386,"_id":397,"_source":388,"_file":398,"_extension":390},"/design-system/components/form","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","content:design-system:5.components:form.md","design-system/5.components/form.md",{"_path":400,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":401,"description":402,"layout":11,"label":12,"_type":386,"_id":403,"_source":388,"_file":404,"_extension":390},"/design-system/components/in-page-navigation","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","content:design-system:5.components:in-page-navigation.md","design-system/5.components/in-page-navigation.md",{},[407,412,653],{"title":408,"_path":409,"icon":410,"layout":411},"Ripple Design System","/","carbon:home","home",{"title":413,"_path":414,"children":415},"Design System","/design-system",[416,432,448,477,511],{"title":417,"_path":418,"children":419},"About","/design-system/about",[420,423,426,429],{"title":421,"_path":422,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":424,"_path":425,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":427,"_path":428,"layout":11},"Support","/design-system/about/getting-support",{"title":430,"_path":431,"layout":11},"Contributing","/design-system/about/contributing",{"title":433,"_path":434,"children":435},"Design","/design-system/design",[436,439,442,445],{"title":437,"_path":438,"layout":11},"Getting started","/design-system/design/getting-started",{"title":440,"_path":441,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":443,"_path":444,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":446,"_path":447,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":449,"_path":450,"children":451},"Develop","/design-system/develop",[452,454,456,459],{"title":437,"_path":453,"layout":11},"/design-system/develop/getting-started",{"title":430,"_path":455,"layout":11},"/design-system/develop/contributing",{"title":457,"_path":458,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":460,"children":461,"layout":11},"/design-system/develop/usage",[462,465,468,471,474],{"title":463,"_path":464,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":466,"_path":467,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":469,"_path":470,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":472,"_path":473,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":475,"_path":476,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":478,"_path":479,"children":480},"Styles","/design-system/styles",[481,484,487,490,493,496,499,502,505,508],{"title":482,"_path":483,"layout":11},"Colour","/design-system/styles/colour",{"title":485,"_path":486,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":488,"_path":489,"layout":11},"Grid","/design-system/styles/grid",{"title":491,"_path":492,"layout":11},"Icons","/design-system/styles/icons",{"title":494,"_path":495,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":497,"_path":498,"layout":11},"Layout","/design-system/styles/layout",{"title":500,"_path":501,"layout":11},"Logo","/design-system/styles/logo",{"title":503,"_path":504,"layout":11},"Motion","/design-system/styles/motion",{"title":506,"_path":507,"layout":11},"Spacing","/design-system/styles/spacing",{"title":509,"_path":510,"layout":11},"Typography","/design-system/styles/typography",{"title":512,"_path":513,"children":514},"Components","/design-system/components",[515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,563,566,569,572,575,578,579,580,581,584,587,590,593,596,599,602,605,608,611,614,617,620,623,626,629,632,635,638,641,644,647,650],{"title":516,"_path":517,"layout":11},"Accordion","/design-system/components/accordion",{"title":519,"_path":520,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":522,"_path":523,"layout":11},"Alert","/design-system/components/alert",{"title":525,"_path":526,"layout":11},"Block quote","/design-system/components/block-quote",{"title":528,"_path":529,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":531,"_path":532,"layout":11},"Button","/design-system/components/button",{"title":534,"_path":535,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":537,"_path":538,"layout":11},"Callout","/design-system/components/callout",{"title":540,"_path":541,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":543,"_path":544,"layout":11},"Card","/design-system/components/card",{"title":546,"_path":547,"layout":11},"Carousel","/design-system/components/carousel",{"title":549,"_path":550,"layout":11},"Category grid","/design-system/components/category-grid",{"title":552,"_path":553,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":555,"_path":556,"layout":11},"Chip","/design-system/components/chip",{"title":558,"_path":559,"layout":11},"Contact us","/design-system/components/contact-us",{"title":561,"_path":562,"layout":11},"Date input","/design-system/components/date-input",{"title":564,"_path":565,"layout":11},"Detail list","/design-system/components/detail-list",{"title":567,"_path":568,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":570,"_path":571,"layout":11},"File","/design-system/components/file",{"title":573,"_path":574,"layout":11},"Footer","/design-system/components/footer",{"title":576,"_path":577,"layout":11},"Form alert","/design-system/components/form-alert",{"title":395,"_path":394,"layout":11},{"title":9,"_path":5,"layout":11},{"title":401,"_path":400,"layout":11},{"title":582,"_path":583,"layout":11},"Input field","/design-system/components/input-field",{"title":585,"_path":586,"layout":11},"Key dates","/design-system/components/key-dates",{"title":588,"_path":589,"layout":11},"Media embed","/design-system/components/media-embed",{"title":591,"_path":592,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":594,"_path":595,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":597,"_path":598,"layout":11},"Media","/design-system/components/media",{"title":600,"_path":601,"layout":11},"Option button","/design-system/components/option-button",{"title":603,"_path":604,"layout":11},"Page action","/design-system/components/page-action",{"title":606,"_path":607,"layout":11},"Pagination","/design-system/components/pagination",{"title":609,"_path":610,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":612,"_path":613,"layout":11},"Profile","/design-system/components/profile",{"title":615,"_path":616,"layout":11},"Radio button","/design-system/components/radio-button",{"title":618,"_path":619,"layout":11},"Related links","/design-system/components/related-links",{"title":621,"_path":622,"layout":11},"Results listing","/design-system/components/results-listing",{"title":624,"_path":625,"layout":11},"Search bar","/design-system/components/search-bar",{"title":627,"_path":628,"layout":11},"Skip link","/design-system/components/skip-link",{"title":630,"_path":631,"layout":11},"Social share","/design-system/components/social-share",{"title":633,"_path":634,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":636,"_path":637,"layout":11},"Table","/design-system/components/table",{"title":639,"_path":640,"layout":11},"Tabs","/design-system/components/tabs",{"title":642,"_path":643,"layout":11},"Tag","/design-system/components/tag",{"title":645,"_path":646,"layout":11},"Text area","/design-system/components/text-area",{"title":648,"_path":649,"layout":11},"Timeline","/design-system/components/timeline",{"title":651,"_path":652,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":654,"_path":655,"children":656,"layout":11},"Ripple Framework","/framework",[657,658,676,698],{"title":654,"_path":655,"layout":11},{"title":659,"_path":660,"children":661},"Key Concepts","/framework/key-concepts",[662,664,667,670,673],{"title":469,"_path":663,"layout":11},"/framework/key-concepts/nuxt",{"title":665,"_path":666,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":668,"_path":669,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":671,"_path":672,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":674,"_path":675,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":677,"_path":678,"children":679},"Guides","/framework/guides",[680,683,686,689,692,695],{"title":681,"_path":682,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":684,"_path":685,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":687,"_path":688,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":690,"_path":691,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":693,"_path":694,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":696,"_path":697,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":699,"_path":700,"layout":11},"Core modules","/framework/core-modules",["Reactive",702],{"module-navigation":703},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Header</h1><p class="rpl-type-p-large" data-v-3163c6df>The Header component introduces the purpose and content of a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading.<!--]--></p><p><!--[-->Headers include optional content such as introduction text, journey links, a call to action and an introduction banner.<!--]--></p><p><!--[-->Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics.<!--]--></p><p><!--[-->The header can also support a campaign logo if required. This will display above the page title.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--default-journey-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-journey-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Keep the header simple and concise.<!--]--></li><li><!--[-->Use clear calls to action that align with the message or task.<!--]--></li><li><!--[-->Only use images that add value to the content and support the message.<!--]--></li><li><!--[-->Include with featured links and buttons to help users perform key tasks.<!--]--></li><li><!--[-->Include an optional campaign logo.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use a mix of reverse and default page title and introduction text styling.<!--]--></li><li><!--[-->Don’t include the same links in the main and introduction banners.<!--]--></li><li><!--[-->Don’t use with more than 6 journey links.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The header has 3 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->reverse<!--]--></li><li><!--[-->image.<!--]--></li><!--]--></ul><p><!--[-->The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information.<!--]--></p><p><!--[-->They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required.<!--]--></p><p><!--[-->The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text.<!--]--></p><p><!--[-->All variants can be used with the introduction banner.<!--]--></p><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--default-call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><p><!--[-->The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--reverse-journey-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-journey-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--reverse-call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-call-to-action&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="image"><a href="#image"><!--[-->Image<!--]--></a></h3><p><!--[-->An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type.<!--]--></p><p><!--[-->Images should not be stretched or too low in resolution. They should also not be complex or include text.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--image-reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--image-reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="introduction-banner"><a href="#introduction-banner"><!--[-->Introduction banner<!--]--></a></h3><p><!--[-->The introduction banner:<!--]--></p><ul><!--[--><li><!--[-->can be used to add content and journey links under the page title and introduction section in the main header banner<!--]--></li><li><!--[-->has an optional icon and journey links<!--]--></li><li><!--[-->should contain content relating to the content in the main header.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--intro-with-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--intro-with-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="interaction-with-other-components"><a href="#interaction-with-other-components"><!--[-->Interaction with other components<!--]--></a></h2><p><!--[-->When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape.<!--]--></p><p><!--[-->The bottom corner shape won't hide if an introduction banner is between the header and campaign banner.<!--]--></p><figure class="docs-example" data-v-442f4b84><div class="docs-example-body" data-v-442f4b84><img src="/assets/img/campaign-banner-behaviour.png" alt="A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header." data-v-442f4b84></div><!----></figure><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Headers can be themed in 2 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette.<!--]--></li><!--]--></ul><p><!--[-->It will also adopt theming from the button component when displaying the call to action.<!--]--></p><p><!--[-->If you choose neutral button for your site, the header will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--default-call-to-action&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-call-to-action&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--reverse-journey-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-journey-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--intro-with-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--intro-with-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><h3 id="neutral-theme"><a href="#neutral-theme"><!--[-->Neutral theme<!--]--></a></h3><p><!--[-->Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-header--image-neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--image-neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->To create your own theme see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/header.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/header/_payload.json">[{"state":1,"_errors":701,"serverRendered":704,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":391,"$sdd-globals":405,"$sdd-navigation":406},{"/design-system/components/header":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":386,"_id":387,"_source":388,"_file":389,"_extension":390},"/design-system/components/header","components",false,"","Header","The Header component introduces the purpose and content of a page.","page","Core",{"type":14,"children":15,"toc":368},"root",[16,25,31,36,41,46,51,58,88,94,117,121,127,132,150,155,160,165,170,175,179,183,188,193,197,201,207,212,217,221,227,232,250,254,257,263,268,273,279,282,288,293,306,311,316,329,335,340,344],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Headers include optional content such as introduction text, journey links, a call to action and an introduction banner.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"The header can also support a campaign logo if required. This will display above the page title.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"core-containers-header--default-journey-links",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"when-and-how-to-use",[56],{"type":23,"value":57},"When and how to use",{"type":17,"tag":59,"props":60,"children":61},"ul",{},[62,68,73,78,83],{"type":17,"tag":63,"props":64,"children":65},"li",{},[66],{"type":23,"value":67},"Keep the header simple and concise.",{"type":17,"tag":63,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use clear calls to action that align with the message or task.",{"type":17,"tag":63,"props":74,"children":75},{},[76],{"type":23,"value":77},"Only use images that add value to the content and support the message.",{"type":17,"tag":63,"props":79,"children":80},{},[81],{"type":23,"value":82},"Include with featured links and buttons to help users perform key tasks.",{"type":17,"tag":63,"props":84,"children":85},{},[86],{"type":23,"value":87},"Include an optional campaign logo.",{"type":17,"tag":52,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":23,"value":93},"When and how not to use",{"type":17,"tag":59,"props":95,"children":96},{},[97,102,107,112],{"type":17,"tag":63,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t use a mix of reverse and default page title and introduction text styling.",{"type":17,"tag":63,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don’t include the same links in the main and introduction banners.",{"type":17,"tag":63,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don’t use with more than 6 journey links.",{"type":17,"tag":63,"props":113,"children":114},{},[115],{"type":23,"value":116},"Don’t overload with content.",{"type":17,"tag":118,"props":119,"children":120},"hr",{},[],{"type":17,"tag":18,"props":122,"children":124},{"id":123},"variants",[125],{"type":23,"value":126},"Variants",{"type":17,"tag":26,"props":128,"children":129},{},[130],{"type":23,"value":131},"The header has 3 variants:",{"type":17,"tag":59,"props":133,"children":134},{},[135,140,145],{"type":17,"tag":63,"props":136,"children":137},{},[138],{"type":23,"value":139},"default",{"type":17,"tag":63,"props":141,"children":142},{},[143],{"type":23,"value":144},"reverse",{"type":17,"tag":63,"props":146,"children":147},{},[148],{"type":23,"value":149},"image.",{"type":17,"tag":26,"props":151,"children":152},{},[153],{"type":23,"value":154},"The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information.",{"type":17,"tag":26,"props":156,"children":157},{},[158],{"type":23,"value":159},"They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required.",{"type":17,"tag":26,"props":161,"children":162},{},[163],{"type":23,"value":164},"The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text.",{"type":17,"tag":26,"props":166,"children":167},{},[168],{"type":23,"value":169},"All variants can be used with the introduction banner.",{"type":17,"tag":52,"props":171,"children":172},{"id":139},[173],{"type":23,"value":174},"Default",{"type":17,"tag":47,"props":176,"children":178},{"id":177},"core-containers-header--default-story",[],{"type":17,"tag":47,"props":180,"children":182},{"id":181},"core-containers-header--default-call-to-action",[],{"type":17,"tag":52,"props":184,"children":185},{"id":144},[186],{"type":23,"value":187},"Reverse",{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information.",{"type":17,"tag":47,"props":194,"children":196},{"id":195},"core-containers-header--reverse-journey-links",[],{"type":17,"tag":47,"props":198,"children":200},{"id":199},"core-containers-header--reverse-call-to-action",[],{"type":17,"tag":52,"props":202,"children":204},{"id":203},"image",[205],{"type":23,"value":206},"Image",{"type":17,"tag":26,"props":208,"children":209},{},[210],{"type":23,"value":211},"An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type.",{"type":17,"tag":26,"props":213,"children":214},{},[215],{"type":23,"value":216},"Images should not be stretched or too low in resolution. They should also not be complex or include text.",{"type":17,"tag":47,"props":218,"children":220},{"id":219},"core-containers-header--image-reverse",[],{"type":17,"tag":52,"props":222,"children":224},{"id":223},"introduction-banner",[225],{"type":23,"value":226},"Introduction banner",{"type":17,"tag":26,"props":228,"children":229},{},[230],{"type":23,"value":231},"The introduction banner:",{"type":17,"tag":59,"props":233,"children":234},{},[235,240,245],{"type":17,"tag":63,"props":236,"children":237},{},[238],{"type":23,"value":239},"can be used to add content and journey links under the page title and introduction section in the main header banner",{"type":17,"tag":63,"props":241,"children":242},{},[243],{"type":23,"value":244},"has an optional icon and journey links",{"type":17,"tag":63,"props":246,"children":247},{},[248],{"type":23,"value":249},"should contain content relating to the content in the main header.",{"type":17,"tag":47,"props":251,"children":253},{"id":252},"core-containers-header--intro-with-links",[],{"type":17,"tag":118,"props":255,"children":256},{},[],{"type":17,"tag":18,"props":258,"children":260},{"id":259},"interaction-with-other-components",[261],{"type":23,"value":262},"Interaction with other components",{"type":17,"tag":26,"props":264,"children":265},{},[266],{"type":23,"value":267},"When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape.",{"type":17,"tag":26,"props":269,"children":270},{},[271],{"type":23,"value":272},"The bottom corner shape won't hide if an introduction banner is between the header and campaign banner.",{"type":17,"tag":274,"props":275,"children":278},"docs-image-example",{"alt":276,"src":277},"A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header.","/assets/img/campaign-banner-behaviour.png",[],{"type":17,"tag":118,"props":280,"children":281},{},[],{"type":17,"tag":18,"props":283,"children":285},{"id":284},"theming",[286],{"type":23,"value":287},"Theming",{"type":17,"tag":26,"props":289,"children":290},{},[291],{"type":23,"value":292},"Headers can be themed in 2 ways:",{"type":17,"tag":59,"props":294,"children":295},{},[296,301],{"type":17,"tag":63,"props":297,"children":298},{},[299],{"type":23,"value":300},"site colour palette",{"type":17,"tag":63,"props":302,"children":303},{},[304],{"type":23,"value":305},"neutral colour palette.",{"type":17,"tag":26,"props":307,"children":308},{},[309],{"type":23,"value":310},"It will also adopt theming from the button component when displaying the call to action.",{"type":17,"tag":26,"props":312,"children":313},{},[314],{"type":23,"value":315},"If you choose neutral button for your site, the header will display buttons in the neutral theme.",{"type":17,"tag":317,"props":318,"children":319},"docs-theme-chooser",{},[320,323,326],{"type":17,"tag":47,"props":321,"children":322},{"id":181},[],{"type":17,"tag":47,"props":324,"children":325},{"id":195},[],{"type":17,"tag":47,"props":327,"children":328},{"id":252},[],{"type":17,"tag":52,"props":330,"children":332},{"id":331},"neutral-theme",[333],{"type":23,"value":334},"Neutral theme",{"type":17,"tag":26,"props":336,"children":337},{},[338],{"type":23,"value":339},"Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised.",{"type":17,"tag":47,"props":341,"children":343},{"id":342},"core-containers-header--image-neutral",[],{"type":17,"tag":26,"props":345,"children":346},{},[347,349,358,360,366],{"type":23,"value":348},"To create your own theme see ",{"type":17,"tag":350,"props":351,"children":355},"a",{"href":352,"rel":353},"https://www.vic.gov.au",[354],"nofollow",[356],{"type":23,"value":357},"theming guidance for designers",{"type":23,"value":359}," or ",{"type":17,"tag":350,"props":361,"children":363},{"href":352,"rel":362},[354],[364],{"type":23,"value":365},"theming guidance for developers",{"type":23,"value":367},".",{"title":8,"searchDepth":369,"depth":369,"links":370},2,[371,376,382,383],{"id":20,"depth":369,"text":24,"children":372},[373,375],{"id":54,"depth":374,"text":57},3,{"id":90,"depth":374,"text":93},{"id":123,"depth":369,"text":126,"children":377},[378,379,380,381],{"id":139,"depth":374,"text":174},{"id":144,"depth":374,"text":187},{"id":203,"depth":374,"text":206},{"id":223,"depth":374,"text":226},{"id":259,"depth":369,"text":262},{"id":284,"depth":369,"text":287,"children":384},[385],{"id":331,"depth":374,"text":334},"markdown","content:design-system:5.components:header.md","content","design-system/5.components/header.md","md",{"/design-system/components/header":392},[393,399],{"_path":394,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":395,"description":396,"layout":11,"label":12,"_type":386,"_id":397,"_source":388,"_file":398,"_extension":390},"/design-system/components/form","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","content:design-system:5.components:form.md","design-system/5.components/form.md",{"_path":400,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":401,"description":402,"layout":11,"label":12,"_type":386,"_id":403,"_source":388,"_file":404,"_extension":390},"/design-system/components/in-page-navigation","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","content:design-system:5.components:in-page-navigation.md","design-system/5.components/in-page-navigation.md",{},[407,412,653],{"title":408,"_path":409,"icon":410,"layout":411},"Ripple Design System","/","carbon:home","home",{"title":413,"_path":414,"children":415},"Design System","/design-system",[416,432,448,477,511],{"title":417,"_path":418,"children":419},"About","/design-system/about",[420,423,426,429],{"title":421,"_path":422,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":424,"_path":425,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":427,"_path":428,"layout":11},"Support","/design-system/about/getting-support",{"title":430,"_path":431,"layout":11},"Contributing","/design-system/about/contributing",{"title":433,"_path":434,"children":435},"Design","/design-system/design",[436,439,442,445],{"title":437,"_path":438,"layout":11},"Getting started","/design-system/design/getting-started",{"title":440,"_path":441,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":443,"_path":444,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":446,"_path":447,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":449,"_path":450,"children":451},"Develop","/design-system/develop",[452,454,456,459],{"title":437,"_path":453,"layout":11},"/design-system/develop/getting-started",{"title":430,"_path":455,"layout":11},"/design-system/develop/contributing",{"title":457,"_path":458,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":460,"children":461,"layout":11},"/design-system/develop/usage",[462,465,468,471,474],{"title":463,"_path":464,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":466,"_path":467,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":469,"_path":470,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":472,"_path":473,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":475,"_path":476,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":478,"_path":479,"children":480},"Styles","/design-system/styles",[481,484,487,490,493,496,499,502,505,508],{"title":482,"_path":483,"layout":11},"Colour","/design-system/styles/colour",{"title":485,"_path":486,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":488,"_path":489,"layout":11},"Grid","/design-system/styles/grid",{"title":491,"_path":492,"layout":11},"Icons","/design-system/styles/icons",{"title":494,"_path":495,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":497,"_path":498,"layout":11},"Layout","/design-system/styles/layout",{"title":500,"_path":501,"layout":11},"Logo","/design-system/styles/logo",{"title":503,"_path":504,"layout":11},"Motion","/design-system/styles/motion",{"title":506,"_path":507,"layout":11},"Spacing","/design-system/styles/spacing",{"title":509,"_path":510,"layout":11},"Typography","/design-system/styles/typography",{"title":512,"_path":513,"children":514},"Components","/design-system/components",[515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,563,566,569,572,575,578,579,580,581,584,587,590,593,596,599,602,605,608,611,614,617,620,623,626,629,632,635,638,641,644,647,650],{"title":516,"_path":517,"layout":11},"Accordion","/design-system/components/accordion",{"title":519,"_path":520,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":522,"_path":523,"layout":11},"Alert","/design-system/components/alert",{"title":525,"_path":526,"layout":11},"Block quote","/design-system/components/block-quote",{"title":528,"_path":529,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":531,"_path":532,"layout":11},"Button","/design-system/components/button",{"title":534,"_path":535,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":537,"_path":538,"layout":11},"Callout","/design-system/components/callout",{"title":540,"_path":541,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":543,"_path":544,"layout":11},"Card","/design-system/components/card",{"title":546,"_path":547,"layout":11},"Carousel","/design-system/components/carousel",{"title":549,"_path":550,"layout":11},"Category grid","/design-system/components/category-grid",{"title":552,"_path":553,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":555,"_path":556,"layout":11},"Chip","/design-system/components/chip",{"title":558,"_path":559,"layout":11},"Contact us","/design-system/components/contact-us",{"title":561,"_path":562,"layout":11},"Date input","/design-system/components/date-input",{"title":564,"_path":565,"layout":11},"Detail list","/design-system/components/detail-list",{"title":567,"_path":568,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":570,"_path":571,"layout":11},"File","/design-system/components/file",{"title":573,"_path":574,"layout":11},"Footer","/design-system/components/footer",{"title":576,"_path":577,"layout":11},"Form alert","/design-system/components/form-alert",{"title":395,"_path":394,"layout":11},{"title":9,"_path":5,"layout":11},{"title":401,"_path":400,"layout":11},{"title":582,"_path":583,"layout":11},"Input field","/design-system/components/input-field",{"title":585,"_path":586,"layout":11},"Key dates","/design-system/components/key-dates",{"title":588,"_path":589,"layout":11},"Media embed","/design-system/components/media-embed",{"title":591,"_path":592,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":594,"_path":595,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":597,"_path":598,"layout":11},"Media","/design-system/components/media",{"title":600,"_path":601,"layout":11},"Option button","/design-system/components/option-button",{"title":603,"_path":604,"layout":11},"Page action","/design-system/components/page-action",{"title":606,"_path":607,"layout":11},"Pagination","/design-system/components/pagination",{"title":609,"_path":610,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":612,"_path":613,"layout":11},"Profile","/design-system/components/profile",{"title":615,"_path":616,"layout":11},"Radio button","/design-system/components/radio-button",{"title":618,"_path":619,"layout":11},"Related links","/design-system/components/related-links",{"title":621,"_path":622,"layout":11},"Results listing","/design-system/components/results-listing",{"title":624,"_path":625,"layout":11},"Search bar","/design-system/components/search-bar",{"title":627,"_path":628,"layout":11},"Skip link","/design-system/components/skip-link",{"title":630,"_path":631,"layout":11},"Social share","/design-system/components/social-share",{"title":633,"_path":634,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":636,"_path":637,"layout":11},"Table","/design-system/components/table",{"title":639,"_path":640,"layout":11},"Tabs","/design-system/components/tabs",{"title":642,"_path":643,"layout":11},"Tag","/design-system/components/tag",{"title":645,"_path":646,"layout":11},"Text area","/design-system/components/text-area",{"title":648,"_path":649,"layout":11},"Timeline","/design-system/components/timeline",{"title":651,"_path":652,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":654,"_path":655,"children":656,"layout":11},"Ripple Framework","/framework",[657,658,676,698],{"title":654,"_path":655,"layout":11},{"title":659,"_path":660,"children":661},"Key Concepts","/framework/key-concepts",[662,664,667,670,673],{"title":469,"_path":663,"layout":11},"/framework/key-concepts/nuxt",{"title":665,"_path":666,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":668,"_path":669,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":671,"_path":672,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":674,"_path":675,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":677,"_path":678,"children":679},"Guides","/framework/guides",[680,683,686,689,692,695],{"title":681,"_path":682,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":684,"_path":685,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":687,"_path":688,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":690,"_path":691,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":693,"_path":694,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":696,"_path":697,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":699,"_path":700,"layout":11},"Core modules","/framework/core-modules",["Reactive",702],{"module-navigation":703},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/in-page-navigation/index.html b/design-system/components/in-page-navigation/index.html index 4be9f7fc74..b6c21b2de7 100644 --- a/design-system/components/in-page-navigation/index.html +++ b/design-system/components/in-page-navigation/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>In-page navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The In-page navigation component sits above a page’s main content and shows a set of links.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page.<!--]--></p><p><!--[-->Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page.<!--]--></p><p><!--[-->The left-hand highlight bar:<!--]--></p><ul><!--[--><li><!--[-->separates the component from the page content<!--]--></li><li><!--[-->groups the navigation.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content.<!--]--></li><li><!--[-->Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents.<!--]--></li><li><!--[-->Use subheadings as indented navigation links from the page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't link to other pages, including on external sites.<!--]--></li><li><!--[-->Never use colons in the heading.<!--]--></li><li><!--[-->Don't use it if you have less than 2 navigation links.<!--]--></li><li><!--[-->Don't use it with component headings, such as accordion item headings.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Ripple’s theming applies colour to in-page navigation so that the user understands:<!--]--></p><ul><!--[--><li><!--[-->its links and navigation heading relate to each other<!--]--></li><li><!--[-->they are deliberately separated from the main content.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/in-page-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/in-page-navigation/_payload.json">[{"state":1,"_errors":498,"serverRendered":501,"path":502,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":188,"$sdd-globals":202,"$sdd-navigation":203},{"/design-system/components/in-page-navigation":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":183,"_id":184,"_source":185,"_file":186,"_extension":187},"/design-system/components/in-page-navigation","components",false,"","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","page","Core",{"type":14,"children":15,"toc":174},"root",[16,25,31,36,41,56,61,68,86,92,115,119,125,130,143,150],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"The left-hand highlight bar:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"separates the component from the page content",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"groups the navigation.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-navigation-in-page-navigation",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":42,"props":69,"children":70},{},[71,76,81],{"type":17,"tag":46,"props":72,"children":73},{},[74],{"type":23,"value":75},"In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content.",{"type":17,"tag":46,"props":77,"children":78},{},[79],{"type":23,"value":80},"Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents.",{"type":17,"tag":46,"props":82,"children":83},{},[84],{"type":23,"value":85},"Use subheadings as indented navigation links from the page.",{"type":17,"tag":62,"props":87,"children":89},{"id":88},"when-and-how-not-to-use",[90],{"type":23,"value":91},"When and how not to use",{"type":17,"tag":42,"props":93,"children":94},{},[95,100,105,110],{"type":17,"tag":46,"props":96,"children":97},{},[98],{"type":23,"value":99},"Don't link to other pages, including on external sites.",{"type":17,"tag":46,"props":101,"children":102},{},[103],{"type":23,"value":104},"Never use colons in the heading.",{"type":17,"tag":46,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't use it if you have less than 2 navigation links.",{"type":17,"tag":46,"props":111,"children":112},{},[113],{"type":23,"value":114},"Don't use it with component headings, such as accordion item headings.",{"type":17,"tag":116,"props":117,"children":118},"hr",{},[],{"type":17,"tag":18,"props":120,"children":122},{"id":121},"theming",[123],{"type":23,"value":124},"Theming",{"type":17,"tag":26,"props":126,"children":127},{},[128],{"type":23,"value":129},"Ripple’s theming applies colour to in-page navigation so that the user understands:",{"type":17,"tag":42,"props":131,"children":132},{},[133,138],{"type":17,"tag":46,"props":134,"children":135},{},[136],{"type":23,"value":137},"its links and navigation heading relate to each other",{"type":17,"tag":46,"props":139,"children":140},{},[141],{"type":23,"value":142},"they are deliberately separated from the main content.",{"type":17,"tag":144,"props":145,"children":146},"docs-theme-chooser",{},[147],{"type":17,"tag":57,"props":148,"children":149},{"id":59},[],{"type":17,"tag":26,"props":151,"children":152},{},[153,155,164,166,172],{"type":23,"value":154},"To create your own theme, see ",{"type":17,"tag":156,"props":157,"children":161},"a",{"href":158,"rel":159},"https://www.vic.gov.au",[160],"nofollow",[162],{"type":23,"value":163},"theming guidance for designers",{"type":23,"value":165}," or ",{"type":17,"tag":156,"props":167,"children":169},{"href":158,"rel":168},[160],[170],{"type":23,"value":171},"theming guidance for developers",{"type":23,"value":173},".",{"title":8,"searchDepth":175,"depth":175,"links":176},2,[177,182],{"id":20,"depth":175,"text":24,"children":178},[179,181],{"id":64,"depth":180,"text":67},3,{"id":88,"depth":180,"text":91},{"id":121,"depth":175,"text":124},"markdown","content:design-system:5.components:in-page-navigation.md","content","design-system/5.components/in-page-navigation.md","md",{"/design-system/components/in-page-navigation":189},[190,196],{"_path":191,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":192,"description":193,"layout":11,"label":12,"_type":183,"_id":194,"_source":185,"_file":195,"_extension":187},"/design-system/components/header","Header","The Header component introduces the purpose and content of a page.","content:design-system:5.components:header.md","design-system/5.components/header.md",{"_path":197,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":198,"description":199,"layout":11,"label":12,"_type":183,"_id":200,"_source":185,"_file":201,"_extension":187},"/design-system/components/input-field","Input field","The Input field component lets users input a short amount of text.","content:design-system:5.components:input-field.md","design-system/5.components/input-field.md",{},[204,209,450],{"title":205,"_path":206,"icon":207,"layout":208},"Ripple Design System","/","carbon:home","home",{"title":210,"_path":211,"children":212},"Design System","/design-system",[213,229,245,274,308],{"title":214,"_path":215,"children":216},"About","/design-system/about",[217,220,223,226],{"title":218,"_path":219,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":221,"_path":222,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":224,"_path":225,"layout":11},"Support","/design-system/about/getting-support",{"title":227,"_path":228,"layout":11},"Contributing","/design-system/about/contributing",{"title":230,"_path":231,"children":232},"Design","/design-system/design",[233,236,239,242],{"title":234,"_path":235,"layout":11},"Getting started","/design-system/design/getting-started",{"title":237,"_path":238,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":240,"_path":241,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":243,"_path":244,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":246,"_path":247,"children":248},"Develop","/design-system/develop",[249,251,253,256],{"title":234,"_path":250,"layout":11},"/design-system/develop/getting-started",{"title":227,"_path":252,"layout":11},"/design-system/develop/contributing",{"title":254,"_path":255,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":257,"children":258,"layout":11},"/design-system/develop/usage",[259,262,265,268,271],{"title":260,"_path":261,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":263,"_path":264,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":266,"_path":267,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":269,"_path":270,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":272,"_path":273,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":275,"_path":276,"children":277},"Styles","/design-system/styles",[278,281,284,287,290,293,296,299,302,305],{"title":279,"_path":280,"layout":11},"Colour","/design-system/styles/colour",{"title":282,"_path":283,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":285,"_path":286,"layout":11},"Grid","/design-system/styles/grid",{"title":288,"_path":289,"layout":11},"Icons","/design-system/styles/icons",{"title":291,"_path":292,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":294,"_path":295,"layout":11},"Layout","/design-system/styles/layout",{"title":297,"_path":298,"layout":11},"Logo","/design-system/styles/logo",{"title":300,"_path":301,"layout":11},"Motion","/design-system/styles/motion",{"title":303,"_path":304,"layout":11},"Spacing","/design-system/styles/spacing",{"title":306,"_path":307,"layout":11},"Typography","/design-system/styles/typography",{"title":309,"_path":310,"children":311},"Components","/design-system/components",[312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,379,380,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447],{"title":313,"_path":314,"layout":11},"Accordion","/design-system/components/accordion",{"title":316,"_path":317,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":319,"_path":320,"layout":11},"Alert","/design-system/components/alert",{"title":322,"_path":323,"layout":11},"Block quote","/design-system/components/block-quote",{"title":325,"_path":326,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":328,"_path":329,"layout":11},"Button","/design-system/components/button",{"title":331,"_path":332,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":334,"_path":335,"layout":11},"Callout","/design-system/components/callout",{"title":337,"_path":338,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":340,"_path":341,"layout":11},"Card","/design-system/components/card",{"title":343,"_path":344,"layout":11},"Carousel","/design-system/components/carousel",{"title":346,"_path":347,"layout":11},"Category grid","/design-system/components/category-grid",{"title":349,"_path":350,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":352,"_path":353,"layout":11},"Chip","/design-system/components/chip",{"title":355,"_path":356,"layout":11},"Contact us","/design-system/components/contact-us",{"title":358,"_path":359,"layout":11},"Date input","/design-system/components/date-input",{"title":361,"_path":362,"layout":11},"Detail list","/design-system/components/detail-list",{"title":364,"_path":365,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":367,"_path":368,"layout":11},"File","/design-system/components/file",{"title":370,"_path":371,"layout":11},"Footer","/design-system/components/footer",{"title":373,"_path":374,"layout":11},"Form alert","/design-system/components/form-alert",{"title":376,"_path":377,"layout":11},"Form","/design-system/components/form",{"title":192,"_path":191,"layout":11},{"title":9,"_path":5,"layout":11},{"title":198,"_path":197,"layout":11},{"title":382,"_path":383,"layout":11},"Key dates","/design-system/components/key-dates",{"title":385,"_path":386,"layout":11},"Media embed","/design-system/components/media-embed",{"title":388,"_path":389,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":391,"_path":392,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":394,"_path":395,"layout":11},"Media","/design-system/components/media",{"title":397,"_path":398,"layout":11},"Option button","/design-system/components/option-button",{"title":400,"_path":401,"layout":11},"Page action","/design-system/components/page-action",{"title":403,"_path":404,"layout":11},"Pagination","/design-system/components/pagination",{"title":406,"_path":407,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":409,"_path":410,"layout":11},"Profile","/design-system/components/profile",{"title":412,"_path":413,"layout":11},"Radio button","/design-system/components/radio-button",{"title":415,"_path":416,"layout":11},"Related links","/design-system/components/related-links",{"title":418,"_path":419,"layout":11},"Results listing","/design-system/components/results-listing",{"title":421,"_path":422,"layout":11},"Search bar","/design-system/components/search-bar",{"title":424,"_path":425,"layout":11},"Skip link","/design-system/components/skip-link",{"title":427,"_path":428,"layout":11},"Social share","/design-system/components/social-share",{"title":430,"_path":431,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":433,"_path":434,"layout":11},"Table","/design-system/components/table",{"title":436,"_path":437,"layout":11},"Tabs","/design-system/components/tabs",{"title":439,"_path":440,"layout":11},"Tag","/design-system/components/tag",{"title":442,"_path":443,"layout":11},"Text area","/design-system/components/text-area",{"title":445,"_path":446,"layout":11},"Timeline","/design-system/components/timeline",{"title":448,"_path":449,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":451,"_path":452,"children":453,"layout":11},"Ripple Framework","/framework",[454,455,473,495],{"title":451,"_path":452,"layout":11},{"title":456,"_path":457,"children":458},"Key Concepts","/framework/key-concepts",[459,461,464,467,470],{"title":266,"_path":460,"layout":11},"/framework/key-concepts/nuxt",{"title":462,"_path":463,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":465,"_path":466,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":468,"_path":469,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":471,"_path":472,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":474,"_path":475,"children":476},"Guides","/framework/guides",[477,480,483,486,489,492],{"title":478,"_path":479,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":481,"_path":482,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":484,"_path":485,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":487,"_path":488,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":490,"_path":491,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":493,"_path":494,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":496,"_path":497,"layout":11},"Core modules","/framework/core-modules",["Reactive",499],{"module-navigation":500},null,true,"/design-system/components/in-page-navigation/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>In-page navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The In-page navigation component sits above a page’s main content and shows a set of links.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page.<!--]--></p><p><!--[-->Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page.<!--]--></p><p><!--[-->The left-hand highlight bar:<!--]--></p><ul><!--[--><li><!--[-->separates the component from the page content<!--]--></li><li><!--[-->groups the navigation.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content.<!--]--></li><li><!--[-->Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents.<!--]--></li><li><!--[-->Use subheadings as indented navigation links from the page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't link to other pages, including on external sites.<!--]--></li><li><!--[-->Never use colons in the heading.<!--]--></li><li><!--[-->Don't use it if you have less than 2 navigation links.<!--]--></li><li><!--[-->Don't use it with component headings, such as accordion item headings.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Ripple’s theming applies colour to in-page navigation so that the user understands:<!--]--></p><ul><!--[--><li><!--[-->its links and navigation heading relate to each other<!--]--></li><li><!--[-->they are deliberately separated from the main content.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/in-page-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/in-page-navigation/_payload.json">[{"state":1,"_errors":498,"serverRendered":501,"path":502,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":188,"$sdd-globals":202,"$sdd-navigation":203},{"/design-system/components/in-page-navigation":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":183,"_id":184,"_source":185,"_file":186,"_extension":187},"/design-system/components/in-page-navigation","components",false,"","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","page","Core",{"type":14,"children":15,"toc":174},"root",[16,25,31,36,41,56,61,68,86,92,115,119,125,130,143,150],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"The left-hand highlight bar:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"separates the component from the page content",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"groups the navigation.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-navigation-in-page-navigation",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":42,"props":69,"children":70},{},[71,76,81],{"type":17,"tag":46,"props":72,"children":73},{},[74],{"type":23,"value":75},"In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content.",{"type":17,"tag":46,"props":77,"children":78},{},[79],{"type":23,"value":80},"Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents.",{"type":17,"tag":46,"props":82,"children":83},{},[84],{"type":23,"value":85},"Use subheadings as indented navigation links from the page.",{"type":17,"tag":62,"props":87,"children":89},{"id":88},"when-and-how-not-to-use",[90],{"type":23,"value":91},"When and how not to use",{"type":17,"tag":42,"props":93,"children":94},{},[95,100,105,110],{"type":17,"tag":46,"props":96,"children":97},{},[98],{"type":23,"value":99},"Don't link to other pages, including on external sites.",{"type":17,"tag":46,"props":101,"children":102},{},[103],{"type":23,"value":104},"Never use colons in the heading.",{"type":17,"tag":46,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't use it if you have less than 2 navigation links.",{"type":17,"tag":46,"props":111,"children":112},{},[113],{"type":23,"value":114},"Don't use it with component headings, such as accordion item headings.",{"type":17,"tag":116,"props":117,"children":118},"hr",{},[],{"type":17,"tag":18,"props":120,"children":122},{"id":121},"theming",[123],{"type":23,"value":124},"Theming",{"type":17,"tag":26,"props":126,"children":127},{},[128],{"type":23,"value":129},"Ripple’s theming applies colour to in-page navigation so that the user understands:",{"type":17,"tag":42,"props":131,"children":132},{},[133,138],{"type":17,"tag":46,"props":134,"children":135},{},[136],{"type":23,"value":137},"its links and navigation heading relate to each other",{"type":17,"tag":46,"props":139,"children":140},{},[141],{"type":23,"value":142},"they are deliberately separated from the main content.",{"type":17,"tag":144,"props":145,"children":146},"docs-theme-chooser",{},[147],{"type":17,"tag":57,"props":148,"children":149},{"id":59},[],{"type":17,"tag":26,"props":151,"children":152},{},[153,155,164,166,172],{"type":23,"value":154},"To create your own theme, see ",{"type":17,"tag":156,"props":157,"children":161},"a",{"href":158,"rel":159},"https://www.vic.gov.au",[160],"nofollow",[162],{"type":23,"value":163},"theming guidance for designers",{"type":23,"value":165}," or ",{"type":17,"tag":156,"props":167,"children":169},{"href":158,"rel":168},[160],[170],{"type":23,"value":171},"theming guidance for developers",{"type":23,"value":173},".",{"title":8,"searchDepth":175,"depth":175,"links":176},2,[177,182],{"id":20,"depth":175,"text":24,"children":178},[179,181],{"id":64,"depth":180,"text":67},3,{"id":88,"depth":180,"text":91},{"id":121,"depth":175,"text":124},"markdown","content:design-system:5.components:in-page-navigation.md","content","design-system/5.components/in-page-navigation.md","md",{"/design-system/components/in-page-navigation":189},[190,196],{"_path":191,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":192,"description":193,"layout":11,"label":12,"_type":183,"_id":194,"_source":185,"_file":195,"_extension":187},"/design-system/components/header","Header","The Header component introduces the purpose and content of a page.","content:design-system:5.components:header.md","design-system/5.components/header.md",{"_path":197,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":198,"description":199,"layout":11,"label":12,"_type":183,"_id":200,"_source":185,"_file":201,"_extension":187},"/design-system/components/input-field","Input field","The Input field component lets users input a short amount of text.","content:design-system:5.components:input-field.md","design-system/5.components/input-field.md",{},[204,209,450],{"title":205,"_path":206,"icon":207,"layout":208},"Ripple Design System","/","carbon:home","home",{"title":210,"_path":211,"children":212},"Design System","/design-system",[213,229,245,274,308],{"title":214,"_path":215,"children":216},"About","/design-system/about",[217,220,223,226],{"title":218,"_path":219,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":221,"_path":222,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":224,"_path":225,"layout":11},"Support","/design-system/about/getting-support",{"title":227,"_path":228,"layout":11},"Contributing","/design-system/about/contributing",{"title":230,"_path":231,"children":232},"Design","/design-system/design",[233,236,239,242],{"title":234,"_path":235,"layout":11},"Getting started","/design-system/design/getting-started",{"title":237,"_path":238,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":240,"_path":241,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":243,"_path":244,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":246,"_path":247,"children":248},"Develop","/design-system/develop",[249,251,253,256],{"title":234,"_path":250,"layout":11},"/design-system/develop/getting-started",{"title":227,"_path":252,"layout":11},"/design-system/develop/contributing",{"title":254,"_path":255,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":257,"children":258,"layout":11},"/design-system/develop/usage",[259,262,265,268,271],{"title":260,"_path":261,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":263,"_path":264,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":266,"_path":267,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":269,"_path":270,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":272,"_path":273,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":275,"_path":276,"children":277},"Styles","/design-system/styles",[278,281,284,287,290,293,296,299,302,305],{"title":279,"_path":280,"layout":11},"Colour","/design-system/styles/colour",{"title":282,"_path":283,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":285,"_path":286,"layout":11},"Grid","/design-system/styles/grid",{"title":288,"_path":289,"layout":11},"Icons","/design-system/styles/icons",{"title":291,"_path":292,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":294,"_path":295,"layout":11},"Layout","/design-system/styles/layout",{"title":297,"_path":298,"layout":11},"Logo","/design-system/styles/logo",{"title":300,"_path":301,"layout":11},"Motion","/design-system/styles/motion",{"title":303,"_path":304,"layout":11},"Spacing","/design-system/styles/spacing",{"title":306,"_path":307,"layout":11},"Typography","/design-system/styles/typography",{"title":309,"_path":310,"children":311},"Components","/design-system/components",[312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,379,380,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447],{"title":313,"_path":314,"layout":11},"Accordion","/design-system/components/accordion",{"title":316,"_path":317,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":319,"_path":320,"layout":11},"Alert","/design-system/components/alert",{"title":322,"_path":323,"layout":11},"Block quote","/design-system/components/block-quote",{"title":325,"_path":326,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":328,"_path":329,"layout":11},"Button","/design-system/components/button",{"title":331,"_path":332,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":334,"_path":335,"layout":11},"Callout","/design-system/components/callout",{"title":337,"_path":338,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":340,"_path":341,"layout":11},"Card","/design-system/components/card",{"title":343,"_path":344,"layout":11},"Carousel","/design-system/components/carousel",{"title":346,"_path":347,"layout":11},"Category grid","/design-system/components/category-grid",{"title":349,"_path":350,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":352,"_path":353,"layout":11},"Chip","/design-system/components/chip",{"title":355,"_path":356,"layout":11},"Contact us","/design-system/components/contact-us",{"title":358,"_path":359,"layout":11},"Date input","/design-system/components/date-input",{"title":361,"_path":362,"layout":11},"Detail list","/design-system/components/detail-list",{"title":364,"_path":365,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":367,"_path":368,"layout":11},"File","/design-system/components/file",{"title":370,"_path":371,"layout":11},"Footer","/design-system/components/footer",{"title":373,"_path":374,"layout":11},"Form alert","/design-system/components/form-alert",{"title":376,"_path":377,"layout":11},"Form","/design-system/components/form",{"title":192,"_path":191,"layout":11},{"title":9,"_path":5,"layout":11},{"title":198,"_path":197,"layout":11},{"title":382,"_path":383,"layout":11},"Key dates","/design-system/components/key-dates",{"title":385,"_path":386,"layout":11},"Media embed","/design-system/components/media-embed",{"title":388,"_path":389,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":391,"_path":392,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":394,"_path":395,"layout":11},"Media","/design-system/components/media",{"title":397,"_path":398,"layout":11},"Option button","/design-system/components/option-button",{"title":400,"_path":401,"layout":11},"Page action","/design-system/components/page-action",{"title":403,"_path":404,"layout":11},"Pagination","/design-system/components/pagination",{"title":406,"_path":407,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":409,"_path":410,"layout":11},"Profile","/design-system/components/profile",{"title":412,"_path":413,"layout":11},"Radio button","/design-system/components/radio-button",{"title":415,"_path":416,"layout":11},"Related links","/design-system/components/related-links",{"title":418,"_path":419,"layout":11},"Results listing","/design-system/components/results-listing",{"title":421,"_path":422,"layout":11},"Search bar","/design-system/components/search-bar",{"title":424,"_path":425,"layout":11},"Skip link","/design-system/components/skip-link",{"title":427,"_path":428,"layout":11},"Social share","/design-system/components/social-share",{"title":430,"_path":431,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":433,"_path":434,"layout":11},"Table","/design-system/components/table",{"title":436,"_path":437,"layout":11},"Tabs","/design-system/components/tabs",{"title":439,"_path":440,"layout":11},"Tag","/design-system/components/tag",{"title":442,"_path":443,"layout":11},"Text area","/design-system/components/text-area",{"title":445,"_path":446,"layout":11},"Timeline","/design-system/components/timeline",{"title":448,"_path":449,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":451,"_path":452,"children":453,"layout":11},"Ripple Framework","/framework",[454,455,473,495],{"title":451,"_path":452,"layout":11},{"title":456,"_path":457,"children":458},"Key Concepts","/framework/key-concepts",[459,461,464,467,470],{"title":266,"_path":460,"layout":11},"/framework/key-concepts/nuxt",{"title":462,"_path":463,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":465,"_path":466,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":468,"_path":469,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":471,"_path":472,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":474,"_path":475,"children":476},"Guides","/framework/guides",[477,480,483,486,489,492],{"title":478,"_path":479,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":481,"_path":482,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":484,"_path":485,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":487,"_path":488,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":490,"_path":491,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":493,"_path":494,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":496,"_path":497,"layout":11},"Core modules","/framework/core-modules",["Reactive",499],{"module-navigation":500},null,true,"/design-system/components/in-page-navigation/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/input-field/_payload.json b/design-system/components/input-field/_payload.json index 100f743677..3f97b446fc 100644 --- a/design-system/components/input-field/_payload.json +++ b/design-system/components/input-field/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":-1},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form","Form",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":104,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media","Media",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation"] \ No newline at end of file +[{"data":1,"prerenderedAt":-1},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form","Form",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media","Media",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation"] \ No newline at end of file diff --git a/design-system/components/input-field/index.html b/design-system/components/input-field/index.html index 16a153aada..b0f82d4253 100644 --- a/design-system/components/input-field/index.html +++ b/design-system/components/input-field/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Input field</h1><p class="rpl-type-p-large" data-v-3163c6df>The Input field component lets users input a short amount of text.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search.<!--]--></p><p><!--[-->Use an input field for users to enter text shorter than a single line.<!--]--></p><p><!--[-->Input fields can have multiple input types, depending on the need and use case. They have a text input type by default.<!--]--></p><p><!--[-->Input fields can be used for entering:<!--]--></p><ul><!--[--><li><!--[-->text: basic text or search terms<!--]--></li><li><!--[-->phone: a telephone number<!--]--></li><li><!--[-->email: an email address<!--]--></li><li><!--[-->passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type.<!--]--></li><!--]--></ul><p><!--[-->Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails.<!--]--></p><p><!--[-->You must use a form label with an input field.<!--]--></p><p><!--[-->You can use an input field with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text<!--]--></li><li><!--[-->prefix or suffix text<!--]--></li><li><!--[-->prefix or suffix icon.<!--]--></li><!--]--></ul><h4 id="avoid-placeholder-text"><a href="#avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></a></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete an input field.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the input field<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 id="prefix-and-suffixes"><a href="#prefix-and-suffixes"><!--[-->Prefix and suffixes<!--]--></a></h4><p><!--[-->Use prefixes and suffixes to help users enter things like currencies and measurements.<!--]--></p><p><!--[-->Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed.<!--]--></p><p><!--[-->Don’t rely on prefixes or suffixes alone. Screen readers will not read them out.<!--]--></p><p><!--[-->If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always use a label for input fields.<!--]--></li><li><!--[-->Use hint text to specify helpful information such as:<ul><!--[--><li><!--[-->expected number format, for example ‘Must be 6 to 8 digits long’<!--]--></li><li><!--[-->minimum and maximum number values, for example ‘Minimum of # and maximum of #’.<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->Use the prefix to indicate measurements and categories like currency, for example, '$'.<!--]--></li><li><!--[-->Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use an input field without a label.<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t set a minimum or maximum input limit without explicitly saying this in the hint text.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The input field has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-input--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for an input field, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: empty input<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Enter [the missing information]'.<!--]--></li><li><!--[-->Example: 'Enter your name'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or less'.<!--]--></li><li><!--[-->Example: 'Delivery address must be 56 characters or less'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or more'.<!--]--></li><li><!--[-->Example: 'Previous employer must be 3 characters or more'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long or too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be between [number] and [number] characters'.<!--]--></li><li><!--[-->Example: 'Justification must be between 3 and 56 characters'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must not include [characters]'.<!--]--></li><li><!--[-->Example: ‘Reasons must not include + & ~'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must only include [list of allowed characters]'.<!--]--></li><li><!--[-->Example: ‘Explanations must only include letters, numbers and commas'.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Input field uses colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-input--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/input-field.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/input-field/_payload.json">[{"state":1,"_errors":898,"serverRendered":901,"path":902,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":590,"$sdd-globals":604,"$sdd-navigation":605},{"/design-system/components/input-field":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":585,"_id":586,"_source":587,"_file":588,"_extension":589},"/design-system/components/input-field","components",false,"","Input field","The Input field component lets users input a short amount of text.","page","Core",{"type":14,"children":15,"toc":569},"root",[16,25,31,36,41,46,71,76,81,88,93,98,103,131,138,143,148,154,159,164,182,187,193,198,203,208,213,219,255,261,294,298,304,309,322,328,331,337,341,347,352,357,362,371,384,392,405,413,426,434,447,455,468,476,489,492,498,503,516,521,528,550,553,559,564],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use an input field for users to enter text shorter than a single line.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Input fields can have multiple input types, depending on the need and use case. They have a text input type by default.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Input fields can be used for entering:",{"type":17,"tag":47,"props":48,"children":49},"ul",{},[50,56,61,66],{"type":17,"tag":51,"props":52,"children":53},"li",{},[54],{"type":23,"value":55},"text: basic text or search terms",{"type":17,"tag":51,"props":57,"children":58},{},[59],{"type":23,"value":60},"phone: a telephone number",{"type":17,"tag":51,"props":62,"children":63},{},[64],{"type":23,"value":65},"email: an email address",{"type":17,"tag":51,"props":67,"children":68},{},[69],{"type":23,"value":70},"passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type.",{"type":17,"tag":26,"props":72,"children":73},{},[74],{"type":23,"value":75},"Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead.",{"type":17,"tag":77,"props":78,"children":80},"docs-example",{"id":79},"forms-input--default-story",[],{"type":17,"tag":82,"props":83,"children":85},"h3",{"id":84},"how-this-component-works",[86],{"type":23,"value":87},"How this component works",{"type":17,"tag":26,"props":89,"children":90},{},[91],{"type":23,"value":92},"Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails.",{"type":17,"tag":26,"props":94,"children":95},{},[96],{"type":23,"value":97},"You must use a form label with an input field.",{"type":17,"tag":26,"props":99,"children":100},{},[101],{"type":23,"value":102},"You can use an input field with:",{"type":17,"tag":47,"props":104,"children":105},{},[106,111,116,121,126],{"type":17,"tag":51,"props":107,"children":108},{},[109],{"type":23,"value":110},"requirement label",{"type":17,"tag":51,"props":112,"children":113},{},[114],{"type":23,"value":115},"hint text",{"type":17,"tag":51,"props":117,"children":118},{},[119],{"type":23,"value":120},"placeholder text",{"type":17,"tag":51,"props":122,"children":123},{},[124],{"type":23,"value":125},"prefix or suffix text",{"type":17,"tag":51,"props":127,"children":128},{},[129],{"type":23,"value":130},"prefix or suffix icon.",{"type":17,"tag":132,"props":133,"children":135},"h4",{"id":134},"avoid-placeholder-text",[136],{"type":23,"value":137},"Avoid placeholder text",{"type":17,"tag":26,"props":139,"children":140},{},[141],{"type":23,"value":142},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":144,"children":145},{},[146],{"type":23,"value":147},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":17,"tag":132,"props":149,"children":151},{"id":150},"hint-text",[152],{"type":23,"value":153},"Hint text",{"type":17,"tag":26,"props":155,"children":156},{},[157],{"type":23,"value":158},"Hint text can be used to tell the user what, or how, to successfully complete an input field.",{"type":17,"tag":26,"props":160,"children":161},{},[162],{"type":23,"value":163},"For example, hint text can include:",{"type":17,"tag":47,"props":165,"children":166},{},[167,172,177],{"type":17,"tag":51,"props":168,"children":169},{},[170],{"type":23,"value":171},"an overall description of the input field",{"type":17,"tag":51,"props":173,"children":174},{},[175],{"type":23,"value":176},"hints for what kind of information needs to be input",{"type":17,"tag":51,"props":178,"children":179},{},[180],{"type":23,"value":181},"specific formatting examples or requirements.",{"type":17,"tag":26,"props":183,"children":184},{},[185],{"type":23,"value":186},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":132,"props":188,"children":190},{"id":189},"prefix-and-suffixes",[191],{"type":23,"value":192},"Prefix and suffixes",{"type":17,"tag":26,"props":194,"children":195},{},[196],{"type":23,"value":197},"Use prefixes and suffixes to help users enter things like currencies and measurements.",{"type":17,"tag":26,"props":199,"children":200},{},[201],{"type":23,"value":202},"Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed.",{"type":17,"tag":26,"props":204,"children":205},{},[206],{"type":23,"value":207},"Don’t rely on prefixes or suffixes alone. Screen readers will not read them out.",{"type":17,"tag":26,"props":209,"children":210},{},[211],{"type":23,"value":212},"If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix.",{"type":17,"tag":82,"props":214,"children":216},{"id":215},"when-and-how-to-use",[217],{"type":23,"value":218},"When and how to use",{"type":17,"tag":47,"props":220,"children":221},{},[222,227,245,250],{"type":17,"tag":51,"props":223,"children":224},{},[225],{"type":23,"value":226},"Always use a label for input fields.",{"type":17,"tag":51,"props":228,"children":229},{},[230,232],{"type":23,"value":231},"Use hint text to specify helpful information such as:",{"type":17,"tag":47,"props":233,"children":234},{},[235,240],{"type":17,"tag":51,"props":236,"children":237},{},[238],{"type":23,"value":239},"expected number format, for example ‘Must be 6 to 8 digits long’",{"type":17,"tag":51,"props":241,"children":242},{},[243],{"type":23,"value":244},"minimum and maximum number values, for example ‘Minimum of # and maximum of #’.",{"type":17,"tag":51,"props":246,"children":247},{},[248],{"type":23,"value":249},"Use the prefix to indicate measurements and categories like currency, for example, '$'.",{"type":17,"tag":51,"props":251,"children":252},{},[253],{"type":23,"value":254},"Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'.",{"type":17,"tag":82,"props":256,"children":258},{"id":257},"when-and-how-not-to-use",[259],{"type":23,"value":260},"When and how not to use",{"type":17,"tag":47,"props":262,"children":263},{},[264,269,274,279,284,289],{"type":17,"tag":51,"props":265,"children":266},{},[267],{"type":23,"value":268},"Never use an input field without a label.",{"type":17,"tag":51,"props":270,"children":271},{},[272],{"type":23,"value":273},"Avoid placeholder text because it can cause accessibility issues.",{"type":17,"tag":51,"props":275,"children":276},{},[277],{"type":23,"value":278},"Don’t disable copy and paste.",{"type":17,"tag":51,"props":280,"children":281},{},[282],{"type":23,"value":283},"Don’t set a minimum or maximum input limit without explicitly saying this in the hint text.",{"type":17,"tag":51,"props":285,"children":286},{},[287],{"type":23,"value":288},"Don’t use placeholder text to give instructions.",{"type":17,"tag":51,"props":290,"children":291},{},[292],{"type":23,"value":293},"Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it.",{"type":17,"tag":295,"props":296,"children":297},"hr",{},[],{"type":17,"tag":18,"props":299,"children":301},{"id":300},"variants",[302],{"type":23,"value":303},"Variants",{"type":17,"tag":26,"props":305,"children":306},{},[307],{"type":23,"value":308},"The input field has 2 variants:",{"type":17,"tag":47,"props":310,"children":311},{},[312,317],{"type":17,"tag":51,"props":313,"children":314},{},[315],{"type":23,"value":316},"default, used on white backgrounds",{"type":17,"tag":51,"props":318,"children":319},{},[320],{"type":23,"value":321},"reverse, used on neutral backgrounds.",{"type":17,"tag":82,"props":323,"children":325},{"id":324},"default",[326],{"type":23,"value":327},"Default",{"type":17,"tag":77,"props":329,"children":330},{"id":79},[],{"type":17,"tag":82,"props":332,"children":334},{"id":333},"reverse",[335],{"type":23,"value":336},"Reverse",{"type":17,"tag":77,"props":338,"children":340},{"id":339},"forms-input--reverse",[],{"type":17,"tag":82,"props":342,"children":344},{"id":343},"error",[345],{"type":23,"value":346},"Error",{"type":17,"tag":26,"props":348,"children":349},{},[350],{"type":23,"value":351},"All form inputs share error state styling.",{"type":17,"tag":26,"props":353,"children":354},{},[355],{"type":23,"value":356},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":358,"children":359},{},[360],{"type":23,"value":361},"When creating an error message for an input field, use the wording below.",{"type":17,"tag":26,"props":363,"children":364},{},[365],{"type":17,"tag":366,"props":367,"children":368},"strong",{},[369],{"type":23,"value":370},"Error: empty input",{"type":17,"tag":47,"props":372,"children":373},{},[374,379],{"type":17,"tag":51,"props":375,"children":376},{},[377],{"type":23,"value":378},"Error message: ‘Enter [the missing information]'.",{"type":17,"tag":51,"props":380,"children":381},{},[382],{"type":23,"value":383},"Example: 'Enter your name'.",{"type":17,"tag":26,"props":385,"children":386},{},[387],{"type":17,"tag":366,"props":388,"children":389},{},[390],{"type":23,"value":391},"Error: input is too long",{"type":17,"tag":47,"props":393,"children":394},{},[395,400],{"type":17,"tag":51,"props":396,"children":397},{},[398],{"type":23,"value":399},"Error message: ‘[The input] must be [number] characters or less'.",{"type":17,"tag":51,"props":401,"children":402},{},[403],{"type":23,"value":404},"Example: 'Delivery address must be 56 characters or less'.",{"type":17,"tag":26,"props":406,"children":407},{},[408],{"type":17,"tag":366,"props":409,"children":410},{},[411],{"type":23,"value":412},"Error: input is too short",{"type":17,"tag":47,"props":414,"children":415},{},[416,421],{"type":17,"tag":51,"props":417,"children":418},{},[419],{"type":23,"value":420},"Error message: ‘[The input] must be [number] characters or more'.",{"type":17,"tag":51,"props":422,"children":423},{},[424],{"type":23,"value":425},"Example: 'Previous employer must be 3 characters or more'.",{"type":17,"tag":26,"props":427,"children":428},{},[429],{"type":17,"tag":366,"props":430,"children":431},{},[432],{"type":23,"value":433},"Error: input is too long or too short",{"type":17,"tag":47,"props":435,"children":436},{},[437,442],{"type":17,"tag":51,"props":438,"children":439},{},[440],{"type":23,"value":441},"Error message: ‘[The input] must be between [number] and [number] characters'.",{"type":17,"tag":51,"props":443,"children":444},{},[445],{"type":23,"value":446},"Example: 'Justification must be between 3 and 56 characters'.",{"type":17,"tag":26,"props":448,"children":449},{},[450],{"type":17,"tag":366,"props":451,"children":452},{},[453],{"type":23,"value":454},"Error: input uses known characters that aren’t allowed",{"type":17,"tag":47,"props":456,"children":457},{},[458,463],{"type":17,"tag":51,"props":459,"children":460},{},[461],{"type":23,"value":462},"Error message: ‘[The input] must not include [characters]'.",{"type":17,"tag":51,"props":464,"children":465},{},[466],{"type":23,"value":467},"Example: ‘Reasons must not include + & ~'.",{"type":17,"tag":26,"props":469,"children":470},{},[471],{"type":17,"tag":366,"props":472,"children":473},{},[474],{"type":23,"value":475},"Error: input uses unknown characters that aren’t allowed",{"type":17,"tag":47,"props":477,"children":478},{},[479,484],{"type":17,"tag":51,"props":480,"children":481},{},[482],{"type":23,"value":483},"Error message: ‘[The input] must only include [list of allowed characters]'.",{"type":17,"tag":51,"props":485,"children":486},{},[487],{"type":23,"value":488},"Example: ‘Explanations must only include letters, numbers and commas'.",{"type":17,"tag":295,"props":490,"children":491},{},[],{"type":17,"tag":18,"props":493,"children":495},{"id":494},"theming",[496],{"type":23,"value":497},"Theming",{"type":17,"tag":26,"props":499,"children":500},{},[501],{"type":23,"value":502},"Input field uses colour for:",{"type":17,"tag":47,"props":504,"children":505},{},[506,511],{"type":17,"tag":51,"props":507,"children":508},{},[509],{"type":23,"value":510},"interactive states",{"type":17,"tag":51,"props":512,"children":513},{},[514],{"type":23,"value":515},"icons.",{"type":17,"tag":26,"props":517,"children":518},{},[519],{"type":23,"value":520},"An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":522,"props":523,"children":524},"docs-theme-chooser",{},[525],{"type":17,"tag":77,"props":526,"children":527},{"id":79},[],{"type":17,"tag":26,"props":529,"children":530},{},[531,533,540,542,548],{"type":23,"value":532},"To create your own theme see ",{"type":17,"tag":534,"props":535,"children":537},"a",{"href":536},"/design-system/design/theming-guidance-for-designers",[538],{"type":23,"value":539},"theming guidance for designers",{"type":23,"value":541}," or ",{"type":17,"tag":534,"props":543,"children":545},{"href":544},"/design-system/develop/theming",[546],{"type":23,"value":547},"theming guidance for developers",{"type":23,"value":549},".",{"type":17,"tag":295,"props":551,"children":552},{},[],{"type":17,"tag":18,"props":554,"children":556},{"id":555},"rationale",[557],{"type":23,"value":558},"Rationale",{"type":17,"tag":26,"props":560,"children":561},{},[562],{"type":23,"value":563},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":565,"children":566},{},[567],{"type":23,"value":568},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":570,"depth":570,"links":571},2,[572,578,583,584],{"id":20,"depth":570,"text":24,"children":573},[574,576,577],{"id":84,"depth":575,"text":87},3,{"id":215,"depth":575,"text":218},{"id":257,"depth":575,"text":260},{"id":300,"depth":570,"text":303,"children":579},[580,581,582],{"id":324,"depth":575,"text":327},{"id":333,"depth":575,"text":336},{"id":343,"depth":575,"text":346},{"id":494,"depth":570,"text":497},{"id":555,"depth":570,"text":558},"markdown","content:design-system:5.components:input-field.md","content","design-system/5.components/input-field.md","md",{"/design-system/components/input-field":591},[592,598],{"_path":593,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":594,"description":595,"layout":11,"label":12,"_type":585,"_id":596,"_source":587,"_file":597,"_extension":589},"/design-system/components/in-page-navigation","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","content:design-system:5.components:in-page-navigation.md","design-system/5.components/in-page-navigation.md",{"_path":599,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":600,"description":601,"layout":11,"label":12,"_type":585,"_id":602,"_source":587,"_file":603,"_extension":589},"/design-system/components/key-dates","Key dates","The Key dates component shows users a card promoting key dates or events.","content:design-system:5.components:key-dates.md","design-system/5.components/key-dates.md",{},[606,611,850],{"title":607,"_path":608,"icon":609,"layout":610},"Ripple Design System","/","carbon:home","home",{"title":612,"_path":613,"children":614},"Design System","/design-system",[615,631,646,674,708],{"title":616,"_path":617,"children":618},"About","/design-system/about",[619,622,625,628],{"title":620,"_path":621,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":623,"_path":624,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":626,"_path":627,"layout":11},"Support","/design-system/about/getting-support",{"title":629,"_path":630,"layout":11},"Contributing","/design-system/about/contributing",{"title":632,"_path":633,"children":634},"Design","/design-system/design",[635,638,641,644],{"title":636,"_path":637,"layout":11},"Getting started","/design-system/design/getting-started",{"title":639,"_path":640,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":642,"_path":643,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":645,"_path":536,"layout":11},"Theming guidance for designers",{"title":647,"_path":648,"children":649},"Develop","/design-system/develop",[650,652,654,656],{"title":636,"_path":651,"layout":11},"/design-system/develop/getting-started",{"title":629,"_path":653,"layout":11},"/design-system/develop/contributing",{"title":655,"_path":544,"layout":11},"Theme and brand application",{"title":24,"_path":657,"children":658,"layout":11},"/design-system/develop/usage",[659,662,665,668,671],{"title":660,"_path":661,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":663,"_path":664,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":666,"_path":667,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":669,"_path":670,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":672,"_path":673,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":675,"_path":676,"children":677},"Styles","/design-system/styles",[678,681,684,687,690,693,696,699,702,705],{"title":679,"_path":680,"layout":11},"Colour","/design-system/styles/colour",{"title":682,"_path":683,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":685,"_path":686,"layout":11},"Grid","/design-system/styles/grid",{"title":688,"_path":689,"layout":11},"Icons","/design-system/styles/icons",{"title":691,"_path":692,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":694,"_path":695,"layout":11},"Layout","/design-system/styles/layout",{"title":697,"_path":698,"layout":11},"Logo","/design-system/styles/logo",{"title":700,"_path":701,"layout":11},"Motion","/design-system/styles/motion",{"title":703,"_path":704,"layout":11},"Spacing","/design-system/styles/spacing",{"title":706,"_path":707,"layout":11},"Typography","/design-system/styles/typography",{"title":709,"_path":710,"children":711},"Components","/design-system/components",[712,715,718,721,724,727,730,733,736,739,742,745,748,751,754,757,760,763,766,769,772,775,778,781,782,783,784,787,790,793,796,799,802,805,808,811,814,817,820,823,826,829,832,835,838,841,844,847],{"title":713,"_path":714,"layout":11},"Accordion","/design-system/components/accordion",{"title":716,"_path":717,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":719,"_path":720,"layout":11},"Alert","/design-system/components/alert",{"title":722,"_path":723,"layout":11},"Block quote","/design-system/components/block-quote",{"title":725,"_path":726,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":728,"_path":729,"layout":11},"Button","/design-system/components/button",{"title":731,"_path":732,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":734,"_path":735,"layout":11},"Callout","/design-system/components/callout",{"title":737,"_path":738,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":740,"_path":741,"layout":11},"Card","/design-system/components/card",{"title":743,"_path":744,"layout":11},"Carousel","/design-system/components/carousel",{"title":746,"_path":747,"layout":11},"Category grid","/design-system/components/category-grid",{"title":749,"_path":750,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":752,"_path":753,"layout":11},"Chip","/design-system/components/chip",{"title":755,"_path":756,"layout":11},"Contact us","/design-system/components/contact-us",{"title":758,"_path":759,"layout":11},"Date input","/design-system/components/date-input",{"title":761,"_path":762,"layout":11},"Detail list","/design-system/components/detail-list",{"title":764,"_path":765,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":767,"_path":768,"layout":11},"File","/design-system/components/file",{"title":770,"_path":771,"layout":11},"Footer","/design-system/components/footer",{"title":773,"_path":774,"layout":11},"Form alert","/design-system/components/form-alert",{"title":776,"_path":777,"layout":11},"Form","/design-system/components/form",{"title":779,"_path":780,"layout":11},"Header","/design-system/components/header",{"title":594,"_path":593,"layout":11},{"title":9,"_path":5,"layout":11},{"title":600,"_path":599,"layout":11},{"title":785,"_path":786,"layout":11},"Media embed","/design-system/components/media-embed",{"title":788,"_path":789,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":791,"_path":792,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":794,"_path":795,"layout":11},"Media","/design-system/components/media",{"title":797,"_path":798,"layout":11},"Option button","/design-system/components/option-button",{"title":800,"_path":801,"layout":11},"Page action","/design-system/components/page-action",{"title":803,"_path":804,"layout":11},"Pagination","/design-system/components/pagination",{"title":806,"_path":807,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":809,"_path":810,"layout":11},"Profile","/design-system/components/profile",{"title":812,"_path":813,"layout":11},"Radio button","/design-system/components/radio-button",{"title":815,"_path":816,"layout":11},"Related links","/design-system/components/related-links",{"title":818,"_path":819,"layout":11},"Results listing","/design-system/components/results-listing",{"title":821,"_path":822,"layout":11},"Search bar","/design-system/components/search-bar",{"title":824,"_path":825,"layout":11},"Skip link","/design-system/components/skip-link",{"title":827,"_path":828,"layout":11},"Social share","/design-system/components/social-share",{"title":830,"_path":831,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":833,"_path":834,"layout":11},"Table","/design-system/components/table",{"title":836,"_path":837,"layout":11},"Tabs","/design-system/components/tabs",{"title":839,"_path":840,"layout":11},"Tag","/design-system/components/tag",{"title":842,"_path":843,"layout":11},"Text area","/design-system/components/text-area",{"title":845,"_path":846,"layout":11},"Timeline","/design-system/components/timeline",{"title":848,"_path":849,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":851,"_path":852,"children":853,"layout":11},"Ripple Framework","/framework",[854,855,873,895],{"title":851,"_path":852,"layout":11},{"title":856,"_path":857,"children":858},"Key Concepts","/framework/key-concepts",[859,861,864,867,870],{"title":666,"_path":860,"layout":11},"/framework/key-concepts/nuxt",{"title":862,"_path":863,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":865,"_path":866,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":868,"_path":869,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":871,"_path":872,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":874,"_path":875,"children":876},"Guides","/framework/guides",[877,880,883,886,889,892],{"title":878,"_path":879,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":881,"_path":882,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":884,"_path":885,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":887,"_path":888,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":890,"_path":891,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":893,"_path":894,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":896,"_path":897,"layout":11},"Core modules","/framework/core-modules",["Reactive",899],{"module-navigation":900},null,true,"/design-system/components/input-field/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Input field</h1><p class="rpl-type-p-large" data-v-3163c6df>The Input field component lets users input a short amount of text.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search.<!--]--></p><p><!--[-->Use an input field for users to enter text shorter than a single line.<!--]--></p><p><!--[-->Input fields can have multiple input types, depending on the need and use case. They have a text input type by default.<!--]--></p><p><!--[-->Input fields can be used for entering:<!--]--></p><ul><!--[--><li><!--[-->text: basic text or search terms<!--]--></li><li><!--[-->phone: a telephone number<!--]--></li><li><!--[-->email: an email address<!--]--></li><li><!--[-->passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type.<!--]--></li><!--]--></ul><p><!--[-->Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails.<!--]--></p><p><!--[-->You must use a form label with an input field.<!--]--></p><p><!--[-->You can use an input field with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text<!--]--></li><li><!--[-->prefix or suffix text<!--]--></li><li><!--[-->prefix or suffix icon.<!--]--></li><!--]--></ul><h4 id="avoid-placeholder-text"><a href="#avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></a></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete an input field.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the input field<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 id="prefix-and-suffixes"><a href="#prefix-and-suffixes"><!--[-->Prefix and suffixes<!--]--></a></h4><p><!--[-->Use prefixes and suffixes to help users enter things like currencies and measurements.<!--]--></p><p><!--[-->Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed.<!--]--></p><p><!--[-->Don’t rely on prefixes or suffixes alone. Screen readers will not read them out.<!--]--></p><p><!--[-->If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always use a label for input fields.<!--]--></li><li><!--[-->Use hint text to specify helpful information such as:<ul><!--[--><li><!--[-->expected number format, for example ‘Must be 6 to 8 digits long’<!--]--></li><li><!--[-->minimum and maximum number values, for example ‘Minimum of # and maximum of #’.<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->Use the prefix to indicate measurements and categories like currency, for example, '$'.<!--]--></li><li><!--[-->Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use an input field without a label.<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t set a minimum or maximum input limit without explicitly saying this in the hint text.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The input field has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-input--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for an input field, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: empty input<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Enter [the missing information]'.<!--]--></li><li><!--[-->Example: 'Enter your name'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or less'.<!--]--></li><li><!--[-->Example: 'Delivery address must be 56 characters or less'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or more'.<!--]--></li><li><!--[-->Example: 'Previous employer must be 3 characters or more'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long or too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be between [number] and [number] characters'.<!--]--></li><li><!--[-->Example: 'Justification must be between 3 and 56 characters'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must not include [characters]'.<!--]--></li><li><!--[-->Example: ‘Reasons must not include + & ~'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must only include [list of allowed characters]'.<!--]--></li><li><!--[-->Example: ‘Explanations must only include letters, numbers and commas'.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Input field uses colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-input--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/input-field.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/input-field/_payload.json">[{"state":1,"_errors":898,"serverRendered":901,"path":902,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":590,"$sdd-globals":604,"$sdd-navigation":605},{"/design-system/components/input-field":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":585,"_id":586,"_source":587,"_file":588,"_extension":589},"/design-system/components/input-field","components",false,"","Input field","The Input field component lets users input a short amount of text.","page","Core",{"type":14,"children":15,"toc":569},"root",[16,25,31,36,41,46,71,76,81,88,93,98,103,131,138,143,148,154,159,164,182,187,193,198,203,208,213,219,255,261,294,298,304,309,322,328,331,337,341,347,352,357,362,371,384,392,405,413,426,434,447,455,468,476,489,492,498,503,516,521,528,550,553,559,564],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use an input field for users to enter text shorter than a single line.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Input fields can have multiple input types, depending on the need and use case. They have a text input type by default.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Input fields can be used for entering:",{"type":17,"tag":47,"props":48,"children":49},"ul",{},[50,56,61,66],{"type":17,"tag":51,"props":52,"children":53},"li",{},[54],{"type":23,"value":55},"text: basic text or search terms",{"type":17,"tag":51,"props":57,"children":58},{},[59],{"type":23,"value":60},"phone: a telephone number",{"type":17,"tag":51,"props":62,"children":63},{},[64],{"type":23,"value":65},"email: an email address",{"type":17,"tag":51,"props":67,"children":68},{},[69],{"type":23,"value":70},"passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type.",{"type":17,"tag":26,"props":72,"children":73},{},[74],{"type":23,"value":75},"Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead.",{"type":17,"tag":77,"props":78,"children":80},"docs-example",{"id":79},"forms-input--default-story",[],{"type":17,"tag":82,"props":83,"children":85},"h3",{"id":84},"how-this-component-works",[86],{"type":23,"value":87},"How this component works",{"type":17,"tag":26,"props":89,"children":90},{},[91],{"type":23,"value":92},"Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails.",{"type":17,"tag":26,"props":94,"children":95},{},[96],{"type":23,"value":97},"You must use a form label with an input field.",{"type":17,"tag":26,"props":99,"children":100},{},[101],{"type":23,"value":102},"You can use an input field with:",{"type":17,"tag":47,"props":104,"children":105},{},[106,111,116,121,126],{"type":17,"tag":51,"props":107,"children":108},{},[109],{"type":23,"value":110},"requirement label",{"type":17,"tag":51,"props":112,"children":113},{},[114],{"type":23,"value":115},"hint text",{"type":17,"tag":51,"props":117,"children":118},{},[119],{"type":23,"value":120},"placeholder text",{"type":17,"tag":51,"props":122,"children":123},{},[124],{"type":23,"value":125},"prefix or suffix text",{"type":17,"tag":51,"props":127,"children":128},{},[129],{"type":23,"value":130},"prefix or suffix icon.",{"type":17,"tag":132,"props":133,"children":135},"h4",{"id":134},"avoid-placeholder-text",[136],{"type":23,"value":137},"Avoid placeholder text",{"type":17,"tag":26,"props":139,"children":140},{},[141],{"type":23,"value":142},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":144,"children":145},{},[146],{"type":23,"value":147},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":17,"tag":132,"props":149,"children":151},{"id":150},"hint-text",[152],{"type":23,"value":153},"Hint text",{"type":17,"tag":26,"props":155,"children":156},{},[157],{"type":23,"value":158},"Hint text can be used to tell the user what, or how, to successfully complete an input field.",{"type":17,"tag":26,"props":160,"children":161},{},[162],{"type":23,"value":163},"For example, hint text can include:",{"type":17,"tag":47,"props":165,"children":166},{},[167,172,177],{"type":17,"tag":51,"props":168,"children":169},{},[170],{"type":23,"value":171},"an overall description of the input field",{"type":17,"tag":51,"props":173,"children":174},{},[175],{"type":23,"value":176},"hints for what kind of information needs to be input",{"type":17,"tag":51,"props":178,"children":179},{},[180],{"type":23,"value":181},"specific formatting examples or requirements.",{"type":17,"tag":26,"props":183,"children":184},{},[185],{"type":23,"value":186},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":132,"props":188,"children":190},{"id":189},"prefix-and-suffixes",[191],{"type":23,"value":192},"Prefix and suffixes",{"type":17,"tag":26,"props":194,"children":195},{},[196],{"type":23,"value":197},"Use prefixes and suffixes to help users enter things like currencies and measurements.",{"type":17,"tag":26,"props":199,"children":200},{},[201],{"type":23,"value":202},"Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed.",{"type":17,"tag":26,"props":204,"children":205},{},[206],{"type":23,"value":207},"Don’t rely on prefixes or suffixes alone. Screen readers will not read them out.",{"type":17,"tag":26,"props":209,"children":210},{},[211],{"type":23,"value":212},"If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix.",{"type":17,"tag":82,"props":214,"children":216},{"id":215},"when-and-how-to-use",[217],{"type":23,"value":218},"When and how to use",{"type":17,"tag":47,"props":220,"children":221},{},[222,227,245,250],{"type":17,"tag":51,"props":223,"children":224},{},[225],{"type":23,"value":226},"Always use a label for input fields.",{"type":17,"tag":51,"props":228,"children":229},{},[230,232],{"type":23,"value":231},"Use hint text to specify helpful information such as:",{"type":17,"tag":47,"props":233,"children":234},{},[235,240],{"type":17,"tag":51,"props":236,"children":237},{},[238],{"type":23,"value":239},"expected number format, for example ‘Must be 6 to 8 digits long’",{"type":17,"tag":51,"props":241,"children":242},{},[243],{"type":23,"value":244},"minimum and maximum number values, for example ‘Minimum of # and maximum of #’.",{"type":17,"tag":51,"props":246,"children":247},{},[248],{"type":23,"value":249},"Use the prefix to indicate measurements and categories like currency, for example, '$'.",{"type":17,"tag":51,"props":251,"children":252},{},[253],{"type":23,"value":254},"Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'.",{"type":17,"tag":82,"props":256,"children":258},{"id":257},"when-and-how-not-to-use",[259],{"type":23,"value":260},"When and how not to use",{"type":17,"tag":47,"props":262,"children":263},{},[264,269,274,279,284,289],{"type":17,"tag":51,"props":265,"children":266},{},[267],{"type":23,"value":268},"Never use an input field without a label.",{"type":17,"tag":51,"props":270,"children":271},{},[272],{"type":23,"value":273},"Avoid placeholder text because it can cause accessibility issues.",{"type":17,"tag":51,"props":275,"children":276},{},[277],{"type":23,"value":278},"Don’t disable copy and paste.",{"type":17,"tag":51,"props":280,"children":281},{},[282],{"type":23,"value":283},"Don’t set a minimum or maximum input limit without explicitly saying this in the hint text.",{"type":17,"tag":51,"props":285,"children":286},{},[287],{"type":23,"value":288},"Don’t use placeholder text to give instructions.",{"type":17,"tag":51,"props":290,"children":291},{},[292],{"type":23,"value":293},"Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it.",{"type":17,"tag":295,"props":296,"children":297},"hr",{},[],{"type":17,"tag":18,"props":299,"children":301},{"id":300},"variants",[302],{"type":23,"value":303},"Variants",{"type":17,"tag":26,"props":305,"children":306},{},[307],{"type":23,"value":308},"The input field has 2 variants:",{"type":17,"tag":47,"props":310,"children":311},{},[312,317],{"type":17,"tag":51,"props":313,"children":314},{},[315],{"type":23,"value":316},"default, used on white backgrounds",{"type":17,"tag":51,"props":318,"children":319},{},[320],{"type":23,"value":321},"reverse, used on neutral backgrounds.",{"type":17,"tag":82,"props":323,"children":325},{"id":324},"default",[326],{"type":23,"value":327},"Default",{"type":17,"tag":77,"props":329,"children":330},{"id":79},[],{"type":17,"tag":82,"props":332,"children":334},{"id":333},"reverse",[335],{"type":23,"value":336},"Reverse",{"type":17,"tag":77,"props":338,"children":340},{"id":339},"forms-input--reverse",[],{"type":17,"tag":82,"props":342,"children":344},{"id":343},"error",[345],{"type":23,"value":346},"Error",{"type":17,"tag":26,"props":348,"children":349},{},[350],{"type":23,"value":351},"All form inputs share error state styling.",{"type":17,"tag":26,"props":353,"children":354},{},[355],{"type":23,"value":356},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":358,"children":359},{},[360],{"type":23,"value":361},"When creating an error message for an input field, use the wording below.",{"type":17,"tag":26,"props":363,"children":364},{},[365],{"type":17,"tag":366,"props":367,"children":368},"strong",{},[369],{"type":23,"value":370},"Error: empty input",{"type":17,"tag":47,"props":372,"children":373},{},[374,379],{"type":17,"tag":51,"props":375,"children":376},{},[377],{"type":23,"value":378},"Error message: ‘Enter [the missing information]'.",{"type":17,"tag":51,"props":380,"children":381},{},[382],{"type":23,"value":383},"Example: 'Enter your name'.",{"type":17,"tag":26,"props":385,"children":386},{},[387],{"type":17,"tag":366,"props":388,"children":389},{},[390],{"type":23,"value":391},"Error: input is too long",{"type":17,"tag":47,"props":393,"children":394},{},[395,400],{"type":17,"tag":51,"props":396,"children":397},{},[398],{"type":23,"value":399},"Error message: ‘[The input] must be [number] characters or less'.",{"type":17,"tag":51,"props":401,"children":402},{},[403],{"type":23,"value":404},"Example: 'Delivery address must be 56 characters or less'.",{"type":17,"tag":26,"props":406,"children":407},{},[408],{"type":17,"tag":366,"props":409,"children":410},{},[411],{"type":23,"value":412},"Error: input is too short",{"type":17,"tag":47,"props":414,"children":415},{},[416,421],{"type":17,"tag":51,"props":417,"children":418},{},[419],{"type":23,"value":420},"Error message: ‘[The input] must be [number] characters or more'.",{"type":17,"tag":51,"props":422,"children":423},{},[424],{"type":23,"value":425},"Example: 'Previous employer must be 3 characters or more'.",{"type":17,"tag":26,"props":427,"children":428},{},[429],{"type":17,"tag":366,"props":430,"children":431},{},[432],{"type":23,"value":433},"Error: input is too long or too short",{"type":17,"tag":47,"props":435,"children":436},{},[437,442],{"type":17,"tag":51,"props":438,"children":439},{},[440],{"type":23,"value":441},"Error message: ‘[The input] must be between [number] and [number] characters'.",{"type":17,"tag":51,"props":443,"children":444},{},[445],{"type":23,"value":446},"Example: 'Justification must be between 3 and 56 characters'.",{"type":17,"tag":26,"props":448,"children":449},{},[450],{"type":17,"tag":366,"props":451,"children":452},{},[453],{"type":23,"value":454},"Error: input uses known characters that aren’t allowed",{"type":17,"tag":47,"props":456,"children":457},{},[458,463],{"type":17,"tag":51,"props":459,"children":460},{},[461],{"type":23,"value":462},"Error message: ‘[The input] must not include [characters]'.",{"type":17,"tag":51,"props":464,"children":465},{},[466],{"type":23,"value":467},"Example: ‘Reasons must not include + & ~'.",{"type":17,"tag":26,"props":469,"children":470},{},[471],{"type":17,"tag":366,"props":472,"children":473},{},[474],{"type":23,"value":475},"Error: input uses unknown characters that aren’t allowed",{"type":17,"tag":47,"props":477,"children":478},{},[479,484],{"type":17,"tag":51,"props":480,"children":481},{},[482],{"type":23,"value":483},"Error message: ‘[The input] must only include [list of allowed characters]'.",{"type":17,"tag":51,"props":485,"children":486},{},[487],{"type":23,"value":488},"Example: ‘Explanations must only include letters, numbers and commas'.",{"type":17,"tag":295,"props":490,"children":491},{},[],{"type":17,"tag":18,"props":493,"children":495},{"id":494},"theming",[496],{"type":23,"value":497},"Theming",{"type":17,"tag":26,"props":499,"children":500},{},[501],{"type":23,"value":502},"Input field uses colour for:",{"type":17,"tag":47,"props":504,"children":505},{},[506,511],{"type":17,"tag":51,"props":507,"children":508},{},[509],{"type":23,"value":510},"interactive states",{"type":17,"tag":51,"props":512,"children":513},{},[514],{"type":23,"value":515},"icons.",{"type":17,"tag":26,"props":517,"children":518},{},[519],{"type":23,"value":520},"An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":522,"props":523,"children":524},"docs-theme-chooser",{},[525],{"type":17,"tag":77,"props":526,"children":527},{"id":79},[],{"type":17,"tag":26,"props":529,"children":530},{},[531,533,540,542,548],{"type":23,"value":532},"To create your own theme see ",{"type":17,"tag":534,"props":535,"children":537},"a",{"href":536},"/design-system/design/theming-guidance-for-designers",[538],{"type":23,"value":539},"theming guidance for designers",{"type":23,"value":541}," or ",{"type":17,"tag":534,"props":543,"children":545},{"href":544},"/design-system/develop/theming",[546],{"type":23,"value":547},"theming guidance for developers",{"type":23,"value":549},".",{"type":17,"tag":295,"props":551,"children":552},{},[],{"type":17,"tag":18,"props":554,"children":556},{"id":555},"rationale",[557],{"type":23,"value":558},"Rationale",{"type":17,"tag":26,"props":560,"children":561},{},[562],{"type":23,"value":563},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":565,"children":566},{},[567],{"type":23,"value":568},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":570,"depth":570,"links":571},2,[572,578,583,584],{"id":20,"depth":570,"text":24,"children":573},[574,576,577],{"id":84,"depth":575,"text":87},3,{"id":215,"depth":575,"text":218},{"id":257,"depth":575,"text":260},{"id":300,"depth":570,"text":303,"children":579},[580,581,582],{"id":324,"depth":575,"text":327},{"id":333,"depth":575,"text":336},{"id":343,"depth":575,"text":346},{"id":494,"depth":570,"text":497},{"id":555,"depth":570,"text":558},"markdown","content:design-system:5.components:input-field.md","content","design-system/5.components/input-field.md","md",{"/design-system/components/input-field":591},[592,598],{"_path":593,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":594,"description":595,"layout":11,"label":12,"_type":585,"_id":596,"_source":587,"_file":597,"_extension":589},"/design-system/components/in-page-navigation","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","content:design-system:5.components:in-page-navigation.md","design-system/5.components/in-page-navigation.md",{"_path":599,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":600,"description":601,"layout":11,"label":12,"_type":585,"_id":602,"_source":587,"_file":603,"_extension":589},"/design-system/components/key-dates","Key dates","The Key dates component shows users a card promoting key dates or events.","content:design-system:5.components:key-dates.md","design-system/5.components/key-dates.md",{},[606,611,850],{"title":607,"_path":608,"icon":609,"layout":610},"Ripple Design System","/","carbon:home","home",{"title":612,"_path":613,"children":614},"Design System","/design-system",[615,631,646,674,708],{"title":616,"_path":617,"children":618},"About","/design-system/about",[619,622,625,628],{"title":620,"_path":621,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":623,"_path":624,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":626,"_path":627,"layout":11},"Support","/design-system/about/getting-support",{"title":629,"_path":630,"layout":11},"Contributing","/design-system/about/contributing",{"title":632,"_path":633,"children":634},"Design","/design-system/design",[635,638,641,644],{"title":636,"_path":637,"layout":11},"Getting started","/design-system/design/getting-started",{"title":639,"_path":640,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":642,"_path":643,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":645,"_path":536,"layout":11},"Theming guidance for designers",{"title":647,"_path":648,"children":649},"Develop","/design-system/develop",[650,652,654,656],{"title":636,"_path":651,"layout":11},"/design-system/develop/getting-started",{"title":629,"_path":653,"layout":11},"/design-system/develop/contributing",{"title":655,"_path":544,"layout":11},"Theme and brand application",{"title":24,"_path":657,"children":658,"layout":11},"/design-system/develop/usage",[659,662,665,668,671],{"title":660,"_path":661,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":663,"_path":664,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":666,"_path":667,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":669,"_path":670,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":672,"_path":673,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":675,"_path":676,"children":677},"Styles","/design-system/styles",[678,681,684,687,690,693,696,699,702,705],{"title":679,"_path":680,"layout":11},"Colour","/design-system/styles/colour",{"title":682,"_path":683,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":685,"_path":686,"layout":11},"Grid","/design-system/styles/grid",{"title":688,"_path":689,"layout":11},"Icons","/design-system/styles/icons",{"title":691,"_path":692,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":694,"_path":695,"layout":11},"Layout","/design-system/styles/layout",{"title":697,"_path":698,"layout":11},"Logo","/design-system/styles/logo",{"title":700,"_path":701,"layout":11},"Motion","/design-system/styles/motion",{"title":703,"_path":704,"layout":11},"Spacing","/design-system/styles/spacing",{"title":706,"_path":707,"layout":11},"Typography","/design-system/styles/typography",{"title":709,"_path":710,"children":711},"Components","/design-system/components",[712,715,718,721,724,727,730,733,736,739,742,745,748,751,754,757,760,763,766,769,772,775,778,781,782,783,784,787,790,793,796,799,802,805,808,811,814,817,820,823,826,829,832,835,838,841,844,847],{"title":713,"_path":714,"layout":11},"Accordion","/design-system/components/accordion",{"title":716,"_path":717,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":719,"_path":720,"layout":11},"Alert","/design-system/components/alert",{"title":722,"_path":723,"layout":11},"Block quote","/design-system/components/block-quote",{"title":725,"_path":726,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":728,"_path":729,"layout":11},"Button","/design-system/components/button",{"title":731,"_path":732,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":734,"_path":735,"layout":11},"Callout","/design-system/components/callout",{"title":737,"_path":738,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":740,"_path":741,"layout":11},"Card","/design-system/components/card",{"title":743,"_path":744,"layout":11},"Carousel","/design-system/components/carousel",{"title":746,"_path":747,"layout":11},"Category grid","/design-system/components/category-grid",{"title":749,"_path":750,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":752,"_path":753,"layout":11},"Chip","/design-system/components/chip",{"title":755,"_path":756,"layout":11},"Contact us","/design-system/components/contact-us",{"title":758,"_path":759,"layout":11},"Date input","/design-system/components/date-input",{"title":761,"_path":762,"layout":11},"Detail list","/design-system/components/detail-list",{"title":764,"_path":765,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":767,"_path":768,"layout":11},"File","/design-system/components/file",{"title":770,"_path":771,"layout":11},"Footer","/design-system/components/footer",{"title":773,"_path":774,"layout":11},"Form alert","/design-system/components/form-alert",{"title":776,"_path":777,"layout":11},"Form","/design-system/components/form",{"title":779,"_path":780,"layout":11},"Header","/design-system/components/header",{"title":594,"_path":593,"layout":11},{"title":9,"_path":5,"layout":11},{"title":600,"_path":599,"layout":11},{"title":785,"_path":786,"layout":11},"Media embed","/design-system/components/media-embed",{"title":788,"_path":789,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":791,"_path":792,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":794,"_path":795,"layout":11},"Media","/design-system/components/media",{"title":797,"_path":798,"layout":11},"Option button","/design-system/components/option-button",{"title":800,"_path":801,"layout":11},"Page action","/design-system/components/page-action",{"title":803,"_path":804,"layout":11},"Pagination","/design-system/components/pagination",{"title":806,"_path":807,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":809,"_path":810,"layout":11},"Profile","/design-system/components/profile",{"title":812,"_path":813,"layout":11},"Radio button","/design-system/components/radio-button",{"title":815,"_path":816,"layout":11},"Related links","/design-system/components/related-links",{"title":818,"_path":819,"layout":11},"Results listing","/design-system/components/results-listing",{"title":821,"_path":822,"layout":11},"Search bar","/design-system/components/search-bar",{"title":824,"_path":825,"layout":11},"Skip link","/design-system/components/skip-link",{"title":827,"_path":828,"layout":11},"Social share","/design-system/components/social-share",{"title":830,"_path":831,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":833,"_path":834,"layout":11},"Table","/design-system/components/table",{"title":836,"_path":837,"layout":11},"Tabs","/design-system/components/tabs",{"title":839,"_path":840,"layout":11},"Tag","/design-system/components/tag",{"title":842,"_path":843,"layout":11},"Text area","/design-system/components/text-area",{"title":845,"_path":846,"layout":11},"Timeline","/design-system/components/timeline",{"title":848,"_path":849,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":851,"_path":852,"children":853,"layout":11},"Ripple Framework","/framework",[854,855,873,895],{"title":851,"_path":852,"layout":11},{"title":856,"_path":857,"children":858},"Key Concepts","/framework/key-concepts",[859,861,864,867,870],{"title":666,"_path":860,"layout":11},"/framework/key-concepts/nuxt",{"title":862,"_path":863,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":865,"_path":866,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":868,"_path":869,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":871,"_path":872,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":874,"_path":875,"children":876},"Guides","/framework/guides",[877,880,883,886,889,892],{"title":878,"_path":879,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":881,"_path":882,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":884,"_path":885,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":887,"_path":888,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":890,"_path":891,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":893,"_path":894,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":896,"_path":897,"layout":11},"Core modules","/framework/core-modules",["Reactive",899],{"module-navigation":900},null,true,"/design-system/components/input-field/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/key-dates/index.html b/design-system/components/key-dates/index.html index 4014944a8b..171a5faa2c 100644 --- a/design-system/components/key-dates/index.html +++ b/design-system/components/key-dates/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Key dates</h1><p class="rpl-type-p-large" data-v-3163c6df>The Key dates component shows users a card promoting key dates or events.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--key-dates&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--key-dates&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use only on landing pages.<!--]--></li><li><!--[-->Include in a grid of promo cards.<!--]--></li><li><!--[-->Only use once per page.<!--]--></li><li><!--[-->Use clear and concise content.<!--]--></li><li><!--[-->Only use as the last card in the grid.<!--]--></li><li><!--[-->Include a summary.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use with navigation cards.<!--]--></li><li><!--[-->Don’t use the key dates card by itself.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t use with other interactive elements like links.<!--]--></li><li><!--[-->Don’t use it to replace a call to action.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The key date card uses colour to:<!--]--></p><ul><!--[--><li><!--[-->add visual prominence to key information<!--]--></li><li><!--[-->indicate an interaction to users.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--key-dates&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--key-dates&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/key-dates.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/key-dates/_payload.json">[{"state":1,"_errors":495,"serverRendered":498,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":185,"$sdd-globals":199,"$sdd-navigation":200},{"/design-system/components/key-dates":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":180,"_id":181,"_source":182,"_file":183,"_extension":184},"/design-system/components/key-dates","components",false,"","Key dates","The Key dates component shows users a card promoting key dates or events.","page","Core",{"type":14,"children":15,"toc":171},"root",[16,25,31,36,43,78,84,112,116,122,127,140,147],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action.",{"type":17,"tag":32,"props":33,"children":35},"docs-example",{"id":34},"core-navigation-card--key-dates",[],{"type":17,"tag":37,"props":38,"children":40},"h3",{"id":39},"when-and-how-to-use",[41],{"type":23,"value":42},"When and how to use",{"type":17,"tag":44,"props":45,"children":46},"ul",{},[47,53,58,63,68,73],{"type":17,"tag":48,"props":49,"children":50},"li",{},[51],{"type":23,"value":52},"Use only on landing pages.",{"type":17,"tag":48,"props":54,"children":55},{},[56],{"type":23,"value":57},"Include in a grid of promo cards.",{"type":17,"tag":48,"props":59,"children":60},{},[61],{"type":23,"value":62},"Only use once per page.",{"type":17,"tag":48,"props":64,"children":65},{},[66],{"type":23,"value":67},"Use clear and concise content.",{"type":17,"tag":48,"props":69,"children":70},{},[71],{"type":23,"value":72},"Only use as the last card in the grid.",{"type":17,"tag":48,"props":74,"children":75},{},[76],{"type":23,"value":77},"Include a summary.",{"type":17,"tag":37,"props":79,"children":81},{"id":80},"when-and-how-not-to-use",[82],{"type":23,"value":83},"When and how not to use",{"type":17,"tag":44,"props":85,"children":86},{},[87,92,97,102,107],{"type":17,"tag":48,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don’t use with navigation cards.",{"type":17,"tag":48,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don’t use the key dates card by itself.",{"type":17,"tag":48,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t overload with content.",{"type":17,"tag":48,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don’t use with other interactive elements like links.",{"type":17,"tag":48,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don’t use it to replace a call to action.",{"type":17,"tag":113,"props":114,"children":115},"hr",{},[],{"type":17,"tag":18,"props":117,"children":119},{"id":118},"theming",[120],{"type":23,"value":121},"Theming",{"type":17,"tag":26,"props":123,"children":124},{},[125],{"type":23,"value":126},"The key date card uses colour to:",{"type":17,"tag":44,"props":128,"children":129},{},[130,135],{"type":17,"tag":48,"props":131,"children":132},{},[133],{"type":23,"value":134},"add visual prominence to key information",{"type":17,"tag":48,"props":136,"children":137},{},[138],{"type":23,"value":139},"indicate an interaction to users.",{"type":17,"tag":141,"props":142,"children":143},"docs-theme-chooser",{},[144],{"type":17,"tag":32,"props":145,"children":146},{"id":34},[],{"type":17,"tag":26,"props":148,"children":149},{},[150,152,161,163,169],{"type":23,"value":151},"To create your own theme, see ",{"type":17,"tag":153,"props":154,"children":158},"a",{"href":155,"rel":156},"https://www.vic.gov.au",[157],"nofollow",[159],{"type":23,"value":160},"theming guidance for designers",{"type":23,"value":162}," or ",{"type":17,"tag":153,"props":164,"children":166},{"href":155,"rel":165},[157],[167],{"type":23,"value":168},"theming guidance for developers",{"type":23,"value":170},".",{"title":8,"searchDepth":172,"depth":172,"links":173},2,[174,179],{"id":20,"depth":172,"text":24,"children":175},[176,178],{"id":39,"depth":177,"text":42},3,{"id":80,"depth":177,"text":83},{"id":118,"depth":172,"text":121},"markdown","content:design-system:5.components:key-dates.md","content","design-system/5.components/key-dates.md","md",{"/design-system/components/key-dates":186},[187,193],{"_path":188,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":189,"description":190,"layout":11,"label":12,"_type":180,"_id":191,"_source":182,"_file":192,"_extension":184},"/design-system/components/input-field","Input field","The Input field component lets users input a short amount of text.","content:design-system:5.components:input-field.md","design-system/5.components/input-field.md",{"_path":194,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":195,"description":196,"layout":11,"label":12,"_type":180,"_id":197,"_source":182,"_file":198,"_extension":184},"/design-system/components/media-embed","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","content:design-system:5.components:media-embed.md","design-system/5.components/media-embed.md",{},[201,206,447],{"title":202,"_path":203,"icon":204,"layout":205},"Ripple Design System","/","carbon:home","home",{"title":207,"_path":208,"children":209},"Design System","/design-system",[210,226,242,271,305],{"title":211,"_path":212,"children":213},"About","/design-system/about",[214,217,220,223],{"title":215,"_path":216,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":218,"_path":219,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":221,"_path":222,"layout":11},"Support","/design-system/about/getting-support",{"title":224,"_path":225,"layout":11},"Contributing","/design-system/about/contributing",{"title":227,"_path":228,"children":229},"Design","/design-system/design",[230,233,236,239],{"title":231,"_path":232,"layout":11},"Getting started","/design-system/design/getting-started",{"title":234,"_path":235,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":237,"_path":238,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":240,"_path":241,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":243,"_path":244,"children":245},"Develop","/design-system/develop",[246,248,250,253],{"title":231,"_path":247,"layout":11},"/design-system/develop/getting-started",{"title":224,"_path":249,"layout":11},"/design-system/develop/contributing",{"title":251,"_path":252,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":254,"children":255,"layout":11},"/design-system/develop/usage",[256,259,262,265,268],{"title":257,"_path":258,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":260,"_path":261,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":263,"_path":264,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":266,"_path":267,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":269,"_path":270,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":272,"_path":273,"children":274},"Styles","/design-system/styles",[275,278,281,284,287,290,293,296,299,302],{"title":276,"_path":277,"layout":11},"Colour","/design-system/styles/colour",{"title":279,"_path":280,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":282,"_path":283,"layout":11},"Grid","/design-system/styles/grid",{"title":285,"_path":286,"layout":11},"Icons","/design-system/styles/icons",{"title":288,"_path":289,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":291,"_path":292,"layout":11},"Layout","/design-system/styles/layout",{"title":294,"_path":295,"layout":11},"Logo","/design-system/styles/logo",{"title":297,"_path":298,"layout":11},"Motion","/design-system/styles/motion",{"title":300,"_path":301,"layout":11},"Spacing","/design-system/styles/spacing",{"title":303,"_path":304,"layout":11},"Typography","/design-system/styles/typography",{"title":306,"_path":307,"children":308},"Components","/design-system/components",[309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,382,383,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444],{"title":310,"_path":311,"layout":11},"Accordion","/design-system/components/accordion",{"title":313,"_path":314,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":316,"_path":317,"layout":11},"Alert","/design-system/components/alert",{"title":319,"_path":320,"layout":11},"Block quote","/design-system/components/block-quote",{"title":322,"_path":323,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":325,"_path":326,"layout":11},"Button","/design-system/components/button",{"title":328,"_path":329,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":331,"_path":332,"layout":11},"Callout","/design-system/components/callout",{"title":334,"_path":335,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":337,"_path":338,"layout":11},"Card","/design-system/components/card",{"title":340,"_path":341,"layout":11},"Carousel","/design-system/components/carousel",{"title":343,"_path":344,"layout":11},"Category grid","/design-system/components/category-grid",{"title":346,"_path":347,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":349,"_path":350,"layout":11},"Chip","/design-system/components/chip",{"title":352,"_path":353,"layout":11},"Contact us","/design-system/components/contact-us",{"title":355,"_path":356,"layout":11},"Date input","/design-system/components/date-input",{"title":358,"_path":359,"layout":11},"Detail list","/design-system/components/detail-list",{"title":361,"_path":362,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":364,"_path":365,"layout":11},"File","/design-system/components/file",{"title":367,"_path":368,"layout":11},"Footer","/design-system/components/footer",{"title":370,"_path":371,"layout":11},"Form alert","/design-system/components/form-alert",{"title":373,"_path":374,"layout":11},"Form","/design-system/components/form",{"title":376,"_path":377,"layout":11},"Header","/design-system/components/header",{"title":379,"_path":380,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":189,"_path":188,"layout":11},{"title":9,"_path":5,"layout":11},{"title":195,"_path":194,"layout":11},{"title":385,"_path":386,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":388,"_path":389,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":391,"_path":392,"layout":11},"Media","/design-system/components/media",{"title":394,"_path":395,"layout":11},"Option button","/design-system/components/option-button",{"title":397,"_path":398,"layout":11},"Page action","/design-system/components/page-action",{"title":400,"_path":401,"layout":11},"Pagination","/design-system/components/pagination",{"title":403,"_path":404,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":406,"_path":407,"layout":11},"Profile","/design-system/components/profile",{"title":409,"_path":410,"layout":11},"Radio button","/design-system/components/radio-button",{"title":412,"_path":413,"layout":11},"Related links","/design-system/components/related-links",{"title":415,"_path":416,"layout":11},"Results listing","/design-system/components/results-listing",{"title":418,"_path":419,"layout":11},"Search bar","/design-system/components/search-bar",{"title":421,"_path":422,"layout":11},"Skip link","/design-system/components/skip-link",{"title":424,"_path":425,"layout":11},"Social share","/design-system/components/social-share",{"title":427,"_path":428,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":430,"_path":431,"layout":11},"Table","/design-system/components/table",{"title":433,"_path":434,"layout":11},"Tabs","/design-system/components/tabs",{"title":436,"_path":437,"layout":11},"Tag","/design-system/components/tag",{"title":439,"_path":440,"layout":11},"Text area","/design-system/components/text-area",{"title":442,"_path":443,"layout":11},"Timeline","/design-system/components/timeline",{"title":445,"_path":446,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":448,"_path":449,"children":450,"layout":11},"Ripple Framework","/framework",[451,452,470,492],{"title":448,"_path":449,"layout":11},{"title":453,"_path":454,"children":455},"Key Concepts","/framework/key-concepts",[456,458,461,464,467],{"title":263,"_path":457,"layout":11},"/framework/key-concepts/nuxt",{"title":459,"_path":460,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":462,"_path":463,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":465,"_path":466,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":468,"_path":469,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":471,"_path":472,"children":473},"Guides","/framework/guides",[474,477,480,483,486,489],{"title":475,"_path":476,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":478,"_path":479,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":481,"_path":482,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":484,"_path":485,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":487,"_path":488,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":490,"_path":491,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":493,"_path":494,"layout":11},"Core modules","/framework/core-modules",["Reactive",496],{"module-navigation":497},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Key dates</h1><p class="rpl-type-p-large" data-v-3163c6df>The Key dates component shows users a card promoting key dates or events.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--key-dates&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--key-dates&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use only on landing pages.<!--]--></li><li><!--[-->Include in a grid of promo cards.<!--]--></li><li><!--[-->Only use once per page.<!--]--></li><li><!--[-->Use clear and concise content.<!--]--></li><li><!--[-->Only use as the last card in the grid.<!--]--></li><li><!--[-->Include a summary.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use with navigation cards.<!--]--></li><li><!--[-->Don’t use the key dates card by itself.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t use with other interactive elements like links.<!--]--></li><li><!--[-->Don’t use it to replace a call to action.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The key date card uses colour to:<!--]--></p><ul><!--[--><li><!--[-->add visual prominence to key information<!--]--></li><li><!--[-->indicate an interaction to users.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-card--key-dates&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--key-dates&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/key-dates.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/key-dates/_payload.json">[{"state":1,"_errors":495,"serverRendered":498,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":185,"$sdd-globals":199,"$sdd-navigation":200},{"/design-system/components/key-dates":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":180,"_id":181,"_source":182,"_file":183,"_extension":184},"/design-system/components/key-dates","components",false,"","Key dates","The Key dates component shows users a card promoting key dates or events.","page","Core",{"type":14,"children":15,"toc":171},"root",[16,25,31,36,43,78,84,112,116,122,127,140,147],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action.",{"type":17,"tag":32,"props":33,"children":35},"docs-example",{"id":34},"core-navigation-card--key-dates",[],{"type":17,"tag":37,"props":38,"children":40},"h3",{"id":39},"when-and-how-to-use",[41],{"type":23,"value":42},"When and how to use",{"type":17,"tag":44,"props":45,"children":46},"ul",{},[47,53,58,63,68,73],{"type":17,"tag":48,"props":49,"children":50},"li",{},[51],{"type":23,"value":52},"Use only on landing pages.",{"type":17,"tag":48,"props":54,"children":55},{},[56],{"type":23,"value":57},"Include in a grid of promo cards.",{"type":17,"tag":48,"props":59,"children":60},{},[61],{"type":23,"value":62},"Only use once per page.",{"type":17,"tag":48,"props":64,"children":65},{},[66],{"type":23,"value":67},"Use clear and concise content.",{"type":17,"tag":48,"props":69,"children":70},{},[71],{"type":23,"value":72},"Only use as the last card in the grid.",{"type":17,"tag":48,"props":74,"children":75},{},[76],{"type":23,"value":77},"Include a summary.",{"type":17,"tag":37,"props":79,"children":81},{"id":80},"when-and-how-not-to-use",[82],{"type":23,"value":83},"When and how not to use",{"type":17,"tag":44,"props":85,"children":86},{},[87,92,97,102,107],{"type":17,"tag":48,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don’t use with navigation cards.",{"type":17,"tag":48,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don’t use the key dates card by itself.",{"type":17,"tag":48,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don’t overload with content.",{"type":17,"tag":48,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don’t use with other interactive elements like links.",{"type":17,"tag":48,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don’t use it to replace a call to action.",{"type":17,"tag":113,"props":114,"children":115},"hr",{},[],{"type":17,"tag":18,"props":117,"children":119},{"id":118},"theming",[120],{"type":23,"value":121},"Theming",{"type":17,"tag":26,"props":123,"children":124},{},[125],{"type":23,"value":126},"The key date card uses colour to:",{"type":17,"tag":44,"props":128,"children":129},{},[130,135],{"type":17,"tag":48,"props":131,"children":132},{},[133],{"type":23,"value":134},"add visual prominence to key information",{"type":17,"tag":48,"props":136,"children":137},{},[138],{"type":23,"value":139},"indicate an interaction to users.",{"type":17,"tag":141,"props":142,"children":143},"docs-theme-chooser",{},[144],{"type":17,"tag":32,"props":145,"children":146},{"id":34},[],{"type":17,"tag":26,"props":148,"children":149},{},[150,152,161,163,169],{"type":23,"value":151},"To create your own theme, see ",{"type":17,"tag":153,"props":154,"children":158},"a",{"href":155,"rel":156},"https://www.vic.gov.au",[157],"nofollow",[159],{"type":23,"value":160},"theming guidance for designers",{"type":23,"value":162}," or ",{"type":17,"tag":153,"props":164,"children":166},{"href":155,"rel":165},[157],[167],{"type":23,"value":168},"theming guidance for developers",{"type":23,"value":170},".",{"title":8,"searchDepth":172,"depth":172,"links":173},2,[174,179],{"id":20,"depth":172,"text":24,"children":175},[176,178],{"id":39,"depth":177,"text":42},3,{"id":80,"depth":177,"text":83},{"id":118,"depth":172,"text":121},"markdown","content:design-system:5.components:key-dates.md","content","design-system/5.components/key-dates.md","md",{"/design-system/components/key-dates":186},[187,193],{"_path":188,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":189,"description":190,"layout":11,"label":12,"_type":180,"_id":191,"_source":182,"_file":192,"_extension":184},"/design-system/components/input-field","Input field","The Input field component lets users input a short amount of text.","content:design-system:5.components:input-field.md","design-system/5.components/input-field.md",{"_path":194,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":195,"description":196,"layout":11,"label":12,"_type":180,"_id":197,"_source":182,"_file":198,"_extension":184},"/design-system/components/media-embed","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","content:design-system:5.components:media-embed.md","design-system/5.components/media-embed.md",{},[201,206,447],{"title":202,"_path":203,"icon":204,"layout":205},"Ripple Design System","/","carbon:home","home",{"title":207,"_path":208,"children":209},"Design System","/design-system",[210,226,242,271,305],{"title":211,"_path":212,"children":213},"About","/design-system/about",[214,217,220,223],{"title":215,"_path":216,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":218,"_path":219,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":221,"_path":222,"layout":11},"Support","/design-system/about/getting-support",{"title":224,"_path":225,"layout":11},"Contributing","/design-system/about/contributing",{"title":227,"_path":228,"children":229},"Design","/design-system/design",[230,233,236,239],{"title":231,"_path":232,"layout":11},"Getting started","/design-system/design/getting-started",{"title":234,"_path":235,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":237,"_path":238,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":240,"_path":241,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":243,"_path":244,"children":245},"Develop","/design-system/develop",[246,248,250,253],{"title":231,"_path":247,"layout":11},"/design-system/develop/getting-started",{"title":224,"_path":249,"layout":11},"/design-system/develop/contributing",{"title":251,"_path":252,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":254,"children":255,"layout":11},"/design-system/develop/usage",[256,259,262,265,268],{"title":257,"_path":258,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":260,"_path":261,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":263,"_path":264,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":266,"_path":267,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":269,"_path":270,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":272,"_path":273,"children":274},"Styles","/design-system/styles",[275,278,281,284,287,290,293,296,299,302],{"title":276,"_path":277,"layout":11},"Colour","/design-system/styles/colour",{"title":279,"_path":280,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":282,"_path":283,"layout":11},"Grid","/design-system/styles/grid",{"title":285,"_path":286,"layout":11},"Icons","/design-system/styles/icons",{"title":288,"_path":289,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":291,"_path":292,"layout":11},"Layout","/design-system/styles/layout",{"title":294,"_path":295,"layout":11},"Logo","/design-system/styles/logo",{"title":297,"_path":298,"layout":11},"Motion","/design-system/styles/motion",{"title":300,"_path":301,"layout":11},"Spacing","/design-system/styles/spacing",{"title":303,"_path":304,"layout":11},"Typography","/design-system/styles/typography",{"title":306,"_path":307,"children":308},"Components","/design-system/components",[309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,382,383,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444],{"title":310,"_path":311,"layout":11},"Accordion","/design-system/components/accordion",{"title":313,"_path":314,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":316,"_path":317,"layout":11},"Alert","/design-system/components/alert",{"title":319,"_path":320,"layout":11},"Block quote","/design-system/components/block-quote",{"title":322,"_path":323,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":325,"_path":326,"layout":11},"Button","/design-system/components/button",{"title":328,"_path":329,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":331,"_path":332,"layout":11},"Callout","/design-system/components/callout",{"title":334,"_path":335,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":337,"_path":338,"layout":11},"Card","/design-system/components/card",{"title":340,"_path":341,"layout":11},"Carousel","/design-system/components/carousel",{"title":343,"_path":344,"layout":11},"Category grid","/design-system/components/category-grid",{"title":346,"_path":347,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":349,"_path":350,"layout":11},"Chip","/design-system/components/chip",{"title":352,"_path":353,"layout":11},"Contact us","/design-system/components/contact-us",{"title":355,"_path":356,"layout":11},"Date input","/design-system/components/date-input",{"title":358,"_path":359,"layout":11},"Detail list","/design-system/components/detail-list",{"title":361,"_path":362,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":364,"_path":365,"layout":11},"File","/design-system/components/file",{"title":367,"_path":368,"layout":11},"Footer","/design-system/components/footer",{"title":370,"_path":371,"layout":11},"Form alert","/design-system/components/form-alert",{"title":373,"_path":374,"layout":11},"Form","/design-system/components/form",{"title":376,"_path":377,"layout":11},"Header","/design-system/components/header",{"title":379,"_path":380,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":189,"_path":188,"layout":11},{"title":9,"_path":5,"layout":11},{"title":195,"_path":194,"layout":11},{"title":385,"_path":386,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":388,"_path":389,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":391,"_path":392,"layout":11},"Media","/design-system/components/media",{"title":394,"_path":395,"layout":11},"Option button","/design-system/components/option-button",{"title":397,"_path":398,"layout":11},"Page action","/design-system/components/page-action",{"title":400,"_path":401,"layout":11},"Pagination","/design-system/components/pagination",{"title":403,"_path":404,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":406,"_path":407,"layout":11},"Profile","/design-system/components/profile",{"title":409,"_path":410,"layout":11},"Radio button","/design-system/components/radio-button",{"title":412,"_path":413,"layout":11},"Related links","/design-system/components/related-links",{"title":415,"_path":416,"layout":11},"Results listing","/design-system/components/results-listing",{"title":418,"_path":419,"layout":11},"Search bar","/design-system/components/search-bar",{"title":421,"_path":422,"layout":11},"Skip link","/design-system/components/skip-link",{"title":424,"_path":425,"layout":11},"Social share","/design-system/components/social-share",{"title":427,"_path":428,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":430,"_path":431,"layout":11},"Table","/design-system/components/table",{"title":433,"_path":434,"layout":11},"Tabs","/design-system/components/tabs",{"title":436,"_path":437,"layout":11},"Tag","/design-system/components/tag",{"title":439,"_path":440,"layout":11},"Text area","/design-system/components/text-area",{"title":442,"_path":443,"layout":11},"Timeline","/design-system/components/timeline",{"title":445,"_path":446,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":448,"_path":449,"children":450,"layout":11},"Ripple Framework","/framework",[451,452,470,492],{"title":448,"_path":449,"layout":11},{"title":453,"_path":454,"children":455},"Key Concepts","/framework/key-concepts",[456,458,461,464,467],{"title":263,"_path":457,"layout":11},"/framework/key-concepts/nuxt",{"title":459,"_path":460,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":462,"_path":463,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":465,"_path":466,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":468,"_path":469,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":471,"_path":472,"children":473},"Guides","/framework/guides",[474,477,480,483,486,489],{"title":475,"_path":476,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":478,"_path":479,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":481,"_path":482,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":484,"_path":485,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":487,"_path":488,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":490,"_path":491,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":493,"_path":494,"layout":11},"Core modules","/framework/core-modules",["Reactive",496],{"module-navigation":497},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/media-embed/index.html b/design-system/components/media-embed/index.html index 5b3eb2a3c8..f3995e971d 100644 --- a/design-system/components/media-embed/index.html +++ b/design-system/components/media-embed/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media embed</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media embed component shows an image or video within the page content, with optional text to give context.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content.<!--]--></p><p><!--[-->Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data.<!--]--></p><p><!--[-->Media can be an image or video. Images can display as small, medium or large.<!--]--></p><p><!--[-->When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-landscape&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-landscape&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use it with videos, images or complex images.<!--]--></li><li><!--[-->Add data when using the complex image variant.<!--]--></li><li><!--[-->Ensure the media is the right size so that it displays without error.<!--]--></li><li><!--[-->Only add it to the content section of a page.<!--]--></li><li><!--[-->Add an optional image caption and metadata.<!--]--></li><li><!--[-->Always include alt text.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't include media unrelated to the page.<!--]--></li><li><!--[-->Avoid adding interactive elements, like links, to the caption or metadata sections.<!--]--></li><li><!--[-->Never use a video without closed captions and a transcript.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Media embed has 3 variants:<!--]--></p><ul><!--[--><li><!--[-->image<!--]--></li><li><!--[-->video<!--]--></li><li><!--[-->complex media.<!--]--></li><!--]--></ul><p><!--[-->Depending on the variant used, you can display:<!--]--></p><ul><!--[--><li><!--[-->a caption<!--]--></li><li><!--[-->metadata<!--]--></li><li><!--[-->a transcript link<!--]--></li><li><!--[-->accompanying data.<!--]--></li><!--]--></ul><h3 id="image"><a href="#image"><!--[-->Image<!--]--></a></h3><p><!--[-->The image variant has 4 display options:<!--]--></p><ul><!--[--><li><!--[-->landscape / 16:9 ratio<!--]--></li><li><!--[-->portrait / 3:4 ratio<!--]--></li><li><!--[-->square / 1:1 ratio<!--]--></li><li><!--[-->avatar / circle.<!--]--></li><!--]--></ul><p><!--[-->You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium.<!--]--></p><p><!--[-->The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item.<!--]--></p><h4 id="landscape"><a href="#landscape"><!--[-->Landscape<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-landscape&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-landscape&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="portrait"><a href="#portrait"><!--[-->Portrait<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-portrait&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-portrait&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="square"><a href="#square"><!--[-->Square<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-square&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-square&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="avatar"><a href="#avatar"><!--[-->Avatar<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-avatar&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-avatar&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="video"><a href="#video"><!--[-->Video<!--]--></a></h3><p><!--[-->Videos will always display at a 16:9 ratio.<!--]--></p><p><!--[-->A 'view transcript' link displays by default. Videos must have both closed captions and a transcript.<!--]--></p><p><!--[-->Include a supporting caption to give extra context to the user.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--video&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--video&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="complex-media"><a href="#complex-media"><!--[-->Complex media<!--]--></a></h3><p><!--[-->Complex media items contain detail. They include:<!--]--></p><ul><!--[--><li><!--[-->infographics<!--]--></li><li><!--[-->graphs<!--]--></li><li><!--[-->flowchart<!--]--></li><li><!--[-->maps.<!--]--></li><!--]--></ul><p><!--[-->You can support media by including:<!--]--></p><ul><!--[--><li><!--[-->optional supporting data such as content or tables<!--]--></li><li><!--[-->a view fullscreen link<!--]--></li><li><!--[-->a download media link.<!--]--></li><!--]--></ul><p><!--[-->Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text.<!--]--></p><p><!--[-->Complex media will always display the full image. The media item will display at a predefined max height or width.<!--]--></p><p><!--[-->When the media is fullscreen, it displays in the media fullscreen component.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--complex-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--complex-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Media embed uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--complex-image&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--complex-image&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-embed.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-embed/_payload.json">[{"state":1,"_errors":757,"serverRendered":760,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":449,"$sdd-globals":463,"$sdd-navigation":464},{"/design-system/components/media-embed":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":444,"_id":445,"_source":446,"_file":447,"_extension":448},"/design-system/components/media-embed","components",false,"","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","page","Core",{"type":14,"children":15,"toc":430},"root",[16,25,31,36,41,46,60,65,72,107,113,131,135,141,146,164,169,192,197,202,225,230,235,242,245,251,255,261,265,271,275,280,285,290,295,299,305,310,333,338,356,361,366,371,375,378,384,389,402,409],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Media can be an image or video. Images can display as small, medium or large.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image.",{"type":17,"tag":26,"props":47,"children":48},{},[49,51,58],{"type":23,"value":50},"See ",{"type":17,"tag":52,"props":53,"children":55},"a",{"href":54},"/design-system/components/media/",[56],{"type":23,"value":57},"media",{"type":23,"value":59}," for information relating to file type, ratios and focal point.",{"type":17,"tag":61,"props":62,"children":64},"docs-example",{"id":63},"core-containers-media-embed--image-landscape",[],{"type":17,"tag":66,"props":67,"children":69},"h3",{"id":68},"when-and-how-to-use",[70],{"type":23,"value":71},"When and how to use",{"type":17,"tag":73,"props":74,"children":75},"ul",{},[76,82,87,92,97,102],{"type":17,"tag":77,"props":78,"children":79},"li",{},[80],{"type":23,"value":81},"Use it with videos, images or complex images.",{"type":17,"tag":77,"props":83,"children":84},{},[85],{"type":23,"value":86},"Add data when using the complex image variant.",{"type":17,"tag":77,"props":88,"children":89},{},[90],{"type":23,"value":91},"Ensure the media is the right size so that it displays without error.",{"type":17,"tag":77,"props":93,"children":94},{},[95],{"type":23,"value":96},"Only add it to the content section of a page.",{"type":17,"tag":77,"props":98,"children":99},{},[100],{"type":23,"value":101},"Add an optional image caption and metadata.",{"type":17,"tag":77,"props":103,"children":104},{},[105],{"type":23,"value":106},"Always include alt text.",{"type":17,"tag":66,"props":108,"children":110},{"id":109},"when-and-how-not-to-use",[111],{"type":23,"value":112},"When and how not to use",{"type":17,"tag":73,"props":114,"children":115},{},[116,121,126],{"type":17,"tag":77,"props":117,"children":118},{},[119],{"type":23,"value":120},"Don't include media unrelated to the page.",{"type":17,"tag":77,"props":122,"children":123},{},[124],{"type":23,"value":125},"Avoid adding interactive elements, like links, to the caption or metadata sections.",{"type":17,"tag":77,"props":127,"children":128},{},[129],{"type":23,"value":130},"Never use a video without closed captions and a transcript.",{"type":17,"tag":132,"props":133,"children":134},"hr",{},[],{"type":17,"tag":18,"props":136,"children":138},{"id":137},"variants",[139],{"type":23,"value":140},"Variants",{"type":17,"tag":26,"props":142,"children":143},{},[144],{"type":23,"value":145},"Media embed has 3 variants:",{"type":17,"tag":73,"props":147,"children":148},{},[149,154,159],{"type":17,"tag":77,"props":150,"children":151},{},[152],{"type":23,"value":153},"image",{"type":17,"tag":77,"props":155,"children":156},{},[157],{"type":23,"value":158},"video",{"type":17,"tag":77,"props":160,"children":161},{},[162],{"type":23,"value":163},"complex media.",{"type":17,"tag":26,"props":165,"children":166},{},[167],{"type":23,"value":168},"Depending on the variant used, you can display:",{"type":17,"tag":73,"props":170,"children":171},{},[172,177,182,187],{"type":17,"tag":77,"props":173,"children":174},{},[175],{"type":23,"value":176},"a caption",{"type":17,"tag":77,"props":178,"children":179},{},[180],{"type":23,"value":181},"metadata",{"type":17,"tag":77,"props":183,"children":184},{},[185],{"type":23,"value":186},"a transcript link",{"type":17,"tag":77,"props":188,"children":189},{},[190],{"type":23,"value":191},"accompanying data.",{"type":17,"tag":66,"props":193,"children":194},{"id":153},[195],{"type":23,"value":196},"Image",{"type":17,"tag":26,"props":198,"children":199},{},[200],{"type":23,"value":201},"The image variant has 4 display options:",{"type":17,"tag":73,"props":203,"children":204},{},[205,210,215,220],{"type":17,"tag":77,"props":206,"children":207},{},[208],{"type":23,"value":209},"landscape / 16:9 ratio",{"type":17,"tag":77,"props":211,"children":212},{},[213],{"type":23,"value":214},"portrait / 3:4 ratio",{"type":17,"tag":77,"props":216,"children":217},{},[218],{"type":23,"value":219},"square / 1:1 ratio",{"type":17,"tag":77,"props":221,"children":222},{},[223],{"type":23,"value":224},"avatar / circle.",{"type":17,"tag":26,"props":226,"children":227},{},[228],{"type":23,"value":229},"You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium.",{"type":17,"tag":26,"props":231,"children":232},{},[233],{"type":23,"value":234},"The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item.",{"type":17,"tag":236,"props":237,"children":239},"h4",{"id":238},"landscape",[240],{"type":23,"value":241},"Landscape",{"type":17,"tag":61,"props":243,"children":244},{"id":63},[],{"type":17,"tag":236,"props":246,"children":248},{"id":247},"portrait",[249],{"type":23,"value":250},"Portrait",{"type":17,"tag":61,"props":252,"children":254},{"id":253},"core-containers-media-embed--image-portrait",[],{"type":17,"tag":236,"props":256,"children":258},{"id":257},"square",[259],{"type":23,"value":260},"Square",{"type":17,"tag":61,"props":262,"children":264},{"id":263},"core-containers-media-embed--image-square",[],{"type":17,"tag":236,"props":266,"children":268},{"id":267},"avatar",[269],{"type":23,"value":270},"Avatar",{"type":17,"tag":61,"props":272,"children":274},{"id":273},"core-containers-media-embed--image-avatar",[],{"type":17,"tag":66,"props":276,"children":277},{"id":158},[278],{"type":23,"value":279},"Video",{"type":17,"tag":26,"props":281,"children":282},{},[283],{"type":23,"value":284},"Videos will always display at a 16:9 ratio.",{"type":17,"tag":26,"props":286,"children":287},{},[288],{"type":23,"value":289},"A 'view transcript' link displays by default. Videos must have both closed captions and a transcript.",{"type":17,"tag":26,"props":291,"children":292},{},[293],{"type":23,"value":294},"Include a supporting caption to give extra context to the user.",{"type":17,"tag":61,"props":296,"children":298},{"id":297},"core-containers-media-embed--video",[],{"type":17,"tag":66,"props":300,"children":302},{"id":301},"complex-media",[303],{"type":23,"value":304},"Complex media",{"type":17,"tag":26,"props":306,"children":307},{},[308],{"type":23,"value":309},"Complex media items contain detail. They include:",{"type":17,"tag":73,"props":311,"children":312},{},[313,318,323,328],{"type":17,"tag":77,"props":314,"children":315},{},[316],{"type":23,"value":317},"infographics",{"type":17,"tag":77,"props":319,"children":320},{},[321],{"type":23,"value":322},"graphs",{"type":17,"tag":77,"props":324,"children":325},{},[326],{"type":23,"value":327},"flowchart",{"type":17,"tag":77,"props":329,"children":330},{},[331],{"type":23,"value":332},"maps.",{"type":17,"tag":26,"props":334,"children":335},{},[336],{"type":23,"value":337},"You can support media by including:",{"type":17,"tag":73,"props":339,"children":340},{},[341,346,351],{"type":17,"tag":77,"props":342,"children":343},{},[344],{"type":23,"value":345},"optional supporting data such as content or tables",{"type":17,"tag":77,"props":347,"children":348},{},[349],{"type":23,"value":350},"a view fullscreen link",{"type":17,"tag":77,"props":352,"children":353},{},[354],{"type":23,"value":355},"a download media link.",{"type":17,"tag":26,"props":357,"children":358},{},[359],{"type":23,"value":360},"Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text.",{"type":17,"tag":26,"props":362,"children":363},{},[364],{"type":23,"value":365},"Complex media will always display the full image. The media item will display at a predefined max height or width.",{"type":17,"tag":26,"props":367,"children":368},{},[369],{"type":23,"value":370},"When the media is fullscreen, it displays in the media fullscreen component.",{"type":17,"tag":61,"props":372,"children":374},{"id":373},"core-containers-media-embed--complex-image",[],{"type":17,"tag":132,"props":376,"children":377},{},[],{"type":17,"tag":18,"props":379,"children":381},{"id":380},"theming",[382],{"type":23,"value":383},"Theming",{"type":17,"tag":26,"props":385,"children":386},{},[387],{"type":23,"value":388},"Media embed uses colour for:",{"type":17,"tag":73,"props":390,"children":391},{},[392,397],{"type":17,"tag":77,"props":393,"children":394},{},[395],{"type":23,"value":396},"icons",{"type":17,"tag":77,"props":398,"children":399},{},[400],{"type":23,"value":401},"interactive states.",{"type":17,"tag":403,"props":404,"children":405},"docs-theme-chooser",{},[406],{"type":17,"tag":61,"props":407,"children":408},{"id":373},[],{"type":17,"tag":26,"props":410,"children":411},{},[412,414,420,422,428],{"type":23,"value":413},"To create your own theme see ",{"type":17,"tag":52,"props":415,"children":417},{"href":416},"/design-system/design/theming-guidance-for-designers",[418],{"type":23,"value":419},"theming guidance for designers",{"type":23,"value":421}," or ",{"type":17,"tag":52,"props":423,"children":425},{"href":424},"/design-system/develop/theming",[426],{"type":23,"value":427},"theming guidance for developers",{"type":23,"value":429},".",{"title":8,"searchDepth":431,"depth":431,"links":432},2,[433,438,443],{"id":20,"depth":431,"text":24,"children":434},[435,437],{"id":68,"depth":436,"text":71},3,{"id":109,"depth":436,"text":112},{"id":137,"depth":431,"text":140,"children":439},[440,441,442],{"id":153,"depth":436,"text":196},{"id":158,"depth":436,"text":279},{"id":301,"depth":436,"text":304},{"id":380,"depth":431,"text":383},"markdown","content:design-system:5.components:media-embed.md","content","design-system/5.components/media-embed.md","md",{"/design-system/components/media-embed":450},[451,457],{"_path":452,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":453,"description":454,"layout":11,"label":12,"_type":444,"_id":455,"_source":446,"_file":456,"_extension":448},"/design-system/components/key-dates","Key dates","The Key dates component shows users a card promoting key dates or events.","content:design-system:5.components:key-dates.md","design-system/5.components/key-dates.md",{"_path":458,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":459,"description":460,"layout":11,"label":12,"_type":444,"_id":461,"_source":446,"_file":462,"_extension":448},"/design-system/components/media-fullscreen","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","content:design-system:5.components:media-fullscreen.md","design-system/5.components/media-fullscreen.md",{},[465,470,709],{"title":466,"_path":467,"icon":468,"layout":469},"Ripple Design System","/","carbon:home","home",{"title":471,"_path":472,"children":473},"Design System","/design-system",[474,490,505,533,567],{"title":475,"_path":476,"children":477},"About","/design-system/about",[478,481,484,487],{"title":479,"_path":480,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":482,"_path":483,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":485,"_path":486,"layout":11},"Support","/design-system/about/getting-support",{"title":488,"_path":489,"layout":11},"Contributing","/design-system/about/contributing",{"title":491,"_path":492,"children":493},"Design","/design-system/design",[494,497,500,503],{"title":495,"_path":496,"layout":11},"Getting started","/design-system/design/getting-started",{"title":498,"_path":499,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":501,"_path":502,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":504,"_path":416,"layout":11},"Theming guidance for designers",{"title":506,"_path":507,"children":508},"Develop","/design-system/develop",[509,511,513,515],{"title":495,"_path":510,"layout":11},"/design-system/develop/getting-started",{"title":488,"_path":512,"layout":11},"/design-system/develop/contributing",{"title":514,"_path":424,"layout":11},"Theme and brand application",{"title":24,"_path":516,"children":517,"layout":11},"/design-system/develop/usage",[518,521,524,527,530],{"title":519,"_path":520,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":522,"_path":523,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":525,"_path":526,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":528,"_path":529,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":531,"_path":532,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":534,"_path":535,"children":536},"Styles","/design-system/styles",[537,540,543,546,549,552,555,558,561,564],{"title":538,"_path":539,"layout":11},"Colour","/design-system/styles/colour",{"title":541,"_path":542,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":544,"_path":545,"layout":11},"Grid","/design-system/styles/grid",{"title":547,"_path":548,"layout":11},"Icons","/design-system/styles/icons",{"title":550,"_path":551,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":553,"_path":554,"layout":11},"Layout","/design-system/styles/layout",{"title":556,"_path":557,"layout":11},"Logo","/design-system/styles/logo",{"title":559,"_path":560,"layout":11},"Motion","/design-system/styles/motion",{"title":562,"_path":563,"layout":11},"Spacing","/design-system/styles/spacing",{"title":565,"_path":566,"layout":11},"Typography","/design-system/styles/typography",{"title":568,"_path":569,"children":570},"Components","/design-system/components",[571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,647,648,649,652,655,658,661,664,667,670,673,676,679,682,685,688,691,694,697,700,703,706],{"title":572,"_path":573,"layout":11},"Accordion","/design-system/components/accordion",{"title":575,"_path":576,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":578,"_path":579,"layout":11},"Alert","/design-system/components/alert",{"title":581,"_path":582,"layout":11},"Block quote","/design-system/components/block-quote",{"title":584,"_path":585,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":587,"_path":588,"layout":11},"Button","/design-system/components/button",{"title":590,"_path":591,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":593,"_path":594,"layout":11},"Callout","/design-system/components/callout",{"title":596,"_path":597,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":599,"_path":600,"layout":11},"Card","/design-system/components/card",{"title":602,"_path":603,"layout":11},"Carousel","/design-system/components/carousel",{"title":605,"_path":606,"layout":11},"Category grid","/design-system/components/category-grid",{"title":608,"_path":609,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":611,"_path":612,"layout":11},"Chip","/design-system/components/chip",{"title":614,"_path":615,"layout":11},"Contact us","/design-system/components/contact-us",{"title":617,"_path":618,"layout":11},"Date input","/design-system/components/date-input",{"title":620,"_path":621,"layout":11},"Detail list","/design-system/components/detail-list",{"title":623,"_path":624,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":626,"_path":627,"layout":11},"File","/design-system/components/file",{"title":629,"_path":630,"layout":11},"Footer","/design-system/components/footer",{"title":632,"_path":633,"layout":11},"Form alert","/design-system/components/form-alert",{"title":635,"_path":636,"layout":11},"Form","/design-system/components/form",{"title":638,"_path":639,"layout":11},"Header","/design-system/components/header",{"title":641,"_path":642,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":644,"_path":645,"layout":11},"Input field","/design-system/components/input-field",{"title":453,"_path":452,"layout":11},{"title":9,"_path":5,"layout":11},{"title":459,"_path":458,"layout":11},{"title":650,"_path":651,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":653,"_path":654,"layout":11},"Media","/design-system/components/media",{"title":656,"_path":657,"layout":11},"Option button","/design-system/components/option-button",{"title":659,"_path":660,"layout":11},"Page action","/design-system/components/page-action",{"title":662,"_path":663,"layout":11},"Pagination","/design-system/components/pagination",{"title":665,"_path":666,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":668,"_path":669,"layout":11},"Profile","/design-system/components/profile",{"title":671,"_path":672,"layout":11},"Radio button","/design-system/components/radio-button",{"title":674,"_path":675,"layout":11},"Related links","/design-system/components/related-links",{"title":677,"_path":678,"layout":11},"Results listing","/design-system/components/results-listing",{"title":680,"_path":681,"layout":11},"Search bar","/design-system/components/search-bar",{"title":683,"_path":684,"layout":11},"Skip link","/design-system/components/skip-link",{"title":686,"_path":687,"layout":11},"Social share","/design-system/components/social-share",{"title":689,"_path":690,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":692,"_path":693,"layout":11},"Table","/design-system/components/table",{"title":695,"_path":696,"layout":11},"Tabs","/design-system/components/tabs",{"title":698,"_path":699,"layout":11},"Tag","/design-system/components/tag",{"title":701,"_path":702,"layout":11},"Text area","/design-system/components/text-area",{"title":704,"_path":705,"layout":11},"Timeline","/design-system/components/timeline",{"title":707,"_path":708,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":710,"_path":711,"children":712,"layout":11},"Ripple Framework","/framework",[713,714,732,754],{"title":710,"_path":711,"layout":11},{"title":715,"_path":716,"children":717},"Key Concepts","/framework/key-concepts",[718,720,723,726,729],{"title":525,"_path":719,"layout":11},"/framework/key-concepts/nuxt",{"title":721,"_path":722,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":724,"_path":725,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":727,"_path":728,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":730,"_path":731,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":733,"_path":734,"children":735},"Guides","/framework/guides",[736,739,742,745,748,751],{"title":737,"_path":738,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":740,"_path":741,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":743,"_path":744,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":746,"_path":747,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":749,"_path":750,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":752,"_path":753,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":755,"_path":756,"layout":11},"Core modules","/framework/core-modules",["Reactive",758],{"module-navigation":759},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media embed</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media embed component shows an image or video within the page content, with optional text to give context.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content.<!--]--></p><p><!--[-->Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data.<!--]--></p><p><!--[-->Media can be an image or video. Images can display as small, medium or large.<!--]--></p><p><!--[-->When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-landscape&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-landscape&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use it with videos, images or complex images.<!--]--></li><li><!--[-->Add data when using the complex image variant.<!--]--></li><li><!--[-->Ensure the media is the right size so that it displays without error.<!--]--></li><li><!--[-->Only add it to the content section of a page.<!--]--></li><li><!--[-->Add an optional image caption and metadata.<!--]--></li><li><!--[-->Always include alt text.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't include media unrelated to the page.<!--]--></li><li><!--[-->Avoid adding interactive elements, like links, to the caption or metadata sections.<!--]--></li><li><!--[-->Never use a video without closed captions and a transcript.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Media embed has 3 variants:<!--]--></p><ul><!--[--><li><!--[-->image<!--]--></li><li><!--[-->video<!--]--></li><li><!--[-->complex media.<!--]--></li><!--]--></ul><p><!--[-->Depending on the variant used, you can display:<!--]--></p><ul><!--[--><li><!--[-->a caption<!--]--></li><li><!--[-->metadata<!--]--></li><li><!--[-->a transcript link<!--]--></li><li><!--[-->accompanying data.<!--]--></li><!--]--></ul><h3 id="image"><a href="#image"><!--[-->Image<!--]--></a></h3><p><!--[-->The image variant has 4 display options:<!--]--></p><ul><!--[--><li><!--[-->landscape / 16:9 ratio<!--]--></li><li><!--[-->portrait / 3:4 ratio<!--]--></li><li><!--[-->square / 1:1 ratio<!--]--></li><li><!--[-->avatar / circle.<!--]--></li><!--]--></ul><p><!--[-->You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium.<!--]--></p><p><!--[-->The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item.<!--]--></p><h4 id="landscape"><a href="#landscape"><!--[-->Landscape<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-landscape&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-landscape&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="portrait"><a href="#portrait"><!--[-->Portrait<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-portrait&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-portrait&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="square"><a href="#square"><!--[-->Square<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-square&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-square&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="avatar"><a href="#avatar"><!--[-->Avatar<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--image-avatar&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-avatar&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="video"><a href="#video"><!--[-->Video<!--]--></a></h3><p><!--[-->Videos will always display at a 16:9 ratio.<!--]--></p><p><!--[-->A 'view transcript' link displays by default. Videos must have both closed captions and a transcript.<!--]--></p><p><!--[-->Include a supporting caption to give extra context to the user.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--video&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--video&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="complex-media"><a href="#complex-media"><!--[-->Complex media<!--]--></a></h3><p><!--[-->Complex media items contain detail. They include:<!--]--></p><ul><!--[--><li><!--[-->infographics<!--]--></li><li><!--[-->graphs<!--]--></li><li><!--[-->flowchart<!--]--></li><li><!--[-->maps.<!--]--></li><!--]--></ul><p><!--[-->You can support media by including:<!--]--></p><ul><!--[--><li><!--[-->optional supporting data such as content or tables<!--]--></li><li><!--[-->a view fullscreen link<!--]--></li><li><!--[-->a download media link.<!--]--></li><!--]--></ul><p><!--[-->Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text.<!--]--></p><p><!--[-->Complex media will always display the full image. The media item will display at a predefined max height or width.<!--]--></p><p><!--[-->When the media is fullscreen, it displays in the media fullscreen component.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--complex-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--complex-image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Media embed uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-embed--complex-image&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--complex-image&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-embed.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-embed/_payload.json">[{"state":1,"_errors":757,"serverRendered":760,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":449,"$sdd-globals":463,"$sdd-navigation":464},{"/design-system/components/media-embed":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":444,"_id":445,"_source":446,"_file":447,"_extension":448},"/design-system/components/media-embed","components",false,"","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","page","Core",{"type":14,"children":15,"toc":430},"root",[16,25,31,36,41,46,60,65,72,107,113,131,135,141,146,164,169,192,197,202,225,230,235,242,245,251,255,261,265,271,275,280,285,290,295,299,305,310,333,338,356,361,366,371,375,378,384,389,402,409],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Media can be an image or video. Images can display as small, medium or large.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image.",{"type":17,"tag":26,"props":47,"children":48},{},[49,51,58],{"type":23,"value":50},"See ",{"type":17,"tag":52,"props":53,"children":55},"a",{"href":54},"/design-system/components/media/",[56],{"type":23,"value":57},"media",{"type":23,"value":59}," for information relating to file type, ratios and focal point.",{"type":17,"tag":61,"props":62,"children":64},"docs-example",{"id":63},"core-containers-media-embed--image-landscape",[],{"type":17,"tag":66,"props":67,"children":69},"h3",{"id":68},"when-and-how-to-use",[70],{"type":23,"value":71},"When and how to use",{"type":17,"tag":73,"props":74,"children":75},"ul",{},[76,82,87,92,97,102],{"type":17,"tag":77,"props":78,"children":79},"li",{},[80],{"type":23,"value":81},"Use it with videos, images or complex images.",{"type":17,"tag":77,"props":83,"children":84},{},[85],{"type":23,"value":86},"Add data when using the complex image variant.",{"type":17,"tag":77,"props":88,"children":89},{},[90],{"type":23,"value":91},"Ensure the media is the right size so that it displays without error.",{"type":17,"tag":77,"props":93,"children":94},{},[95],{"type":23,"value":96},"Only add it to the content section of a page.",{"type":17,"tag":77,"props":98,"children":99},{},[100],{"type":23,"value":101},"Add an optional image caption and metadata.",{"type":17,"tag":77,"props":103,"children":104},{},[105],{"type":23,"value":106},"Always include alt text.",{"type":17,"tag":66,"props":108,"children":110},{"id":109},"when-and-how-not-to-use",[111],{"type":23,"value":112},"When and how not to use",{"type":17,"tag":73,"props":114,"children":115},{},[116,121,126],{"type":17,"tag":77,"props":117,"children":118},{},[119],{"type":23,"value":120},"Don't include media unrelated to the page.",{"type":17,"tag":77,"props":122,"children":123},{},[124],{"type":23,"value":125},"Avoid adding interactive elements, like links, to the caption or metadata sections.",{"type":17,"tag":77,"props":127,"children":128},{},[129],{"type":23,"value":130},"Never use a video without closed captions and a transcript.",{"type":17,"tag":132,"props":133,"children":134},"hr",{},[],{"type":17,"tag":18,"props":136,"children":138},{"id":137},"variants",[139],{"type":23,"value":140},"Variants",{"type":17,"tag":26,"props":142,"children":143},{},[144],{"type":23,"value":145},"Media embed has 3 variants:",{"type":17,"tag":73,"props":147,"children":148},{},[149,154,159],{"type":17,"tag":77,"props":150,"children":151},{},[152],{"type":23,"value":153},"image",{"type":17,"tag":77,"props":155,"children":156},{},[157],{"type":23,"value":158},"video",{"type":17,"tag":77,"props":160,"children":161},{},[162],{"type":23,"value":163},"complex media.",{"type":17,"tag":26,"props":165,"children":166},{},[167],{"type":23,"value":168},"Depending on the variant used, you can display:",{"type":17,"tag":73,"props":170,"children":171},{},[172,177,182,187],{"type":17,"tag":77,"props":173,"children":174},{},[175],{"type":23,"value":176},"a caption",{"type":17,"tag":77,"props":178,"children":179},{},[180],{"type":23,"value":181},"metadata",{"type":17,"tag":77,"props":183,"children":184},{},[185],{"type":23,"value":186},"a transcript link",{"type":17,"tag":77,"props":188,"children":189},{},[190],{"type":23,"value":191},"accompanying data.",{"type":17,"tag":66,"props":193,"children":194},{"id":153},[195],{"type":23,"value":196},"Image",{"type":17,"tag":26,"props":198,"children":199},{},[200],{"type":23,"value":201},"The image variant has 4 display options:",{"type":17,"tag":73,"props":203,"children":204},{},[205,210,215,220],{"type":17,"tag":77,"props":206,"children":207},{},[208],{"type":23,"value":209},"landscape / 16:9 ratio",{"type":17,"tag":77,"props":211,"children":212},{},[213],{"type":23,"value":214},"portrait / 3:4 ratio",{"type":17,"tag":77,"props":216,"children":217},{},[218],{"type":23,"value":219},"square / 1:1 ratio",{"type":17,"tag":77,"props":221,"children":222},{},[223],{"type":23,"value":224},"avatar / circle.",{"type":17,"tag":26,"props":226,"children":227},{},[228],{"type":23,"value":229},"You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium.",{"type":17,"tag":26,"props":231,"children":232},{},[233],{"type":23,"value":234},"The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item.",{"type":17,"tag":236,"props":237,"children":239},"h4",{"id":238},"landscape",[240],{"type":23,"value":241},"Landscape",{"type":17,"tag":61,"props":243,"children":244},{"id":63},[],{"type":17,"tag":236,"props":246,"children":248},{"id":247},"portrait",[249],{"type":23,"value":250},"Portrait",{"type":17,"tag":61,"props":252,"children":254},{"id":253},"core-containers-media-embed--image-portrait",[],{"type":17,"tag":236,"props":256,"children":258},{"id":257},"square",[259],{"type":23,"value":260},"Square",{"type":17,"tag":61,"props":262,"children":264},{"id":263},"core-containers-media-embed--image-square",[],{"type":17,"tag":236,"props":266,"children":268},{"id":267},"avatar",[269],{"type":23,"value":270},"Avatar",{"type":17,"tag":61,"props":272,"children":274},{"id":273},"core-containers-media-embed--image-avatar",[],{"type":17,"tag":66,"props":276,"children":277},{"id":158},[278],{"type":23,"value":279},"Video",{"type":17,"tag":26,"props":281,"children":282},{},[283],{"type":23,"value":284},"Videos will always display at a 16:9 ratio.",{"type":17,"tag":26,"props":286,"children":287},{},[288],{"type":23,"value":289},"A 'view transcript' link displays by default. Videos must have both closed captions and a transcript.",{"type":17,"tag":26,"props":291,"children":292},{},[293],{"type":23,"value":294},"Include a supporting caption to give extra context to the user.",{"type":17,"tag":61,"props":296,"children":298},{"id":297},"core-containers-media-embed--video",[],{"type":17,"tag":66,"props":300,"children":302},{"id":301},"complex-media",[303],{"type":23,"value":304},"Complex media",{"type":17,"tag":26,"props":306,"children":307},{},[308],{"type":23,"value":309},"Complex media items contain detail. They include:",{"type":17,"tag":73,"props":311,"children":312},{},[313,318,323,328],{"type":17,"tag":77,"props":314,"children":315},{},[316],{"type":23,"value":317},"infographics",{"type":17,"tag":77,"props":319,"children":320},{},[321],{"type":23,"value":322},"graphs",{"type":17,"tag":77,"props":324,"children":325},{},[326],{"type":23,"value":327},"flowchart",{"type":17,"tag":77,"props":329,"children":330},{},[331],{"type":23,"value":332},"maps.",{"type":17,"tag":26,"props":334,"children":335},{},[336],{"type":23,"value":337},"You can support media by including:",{"type":17,"tag":73,"props":339,"children":340},{},[341,346,351],{"type":17,"tag":77,"props":342,"children":343},{},[344],{"type":23,"value":345},"optional supporting data such as content or tables",{"type":17,"tag":77,"props":347,"children":348},{},[349],{"type":23,"value":350},"a view fullscreen link",{"type":17,"tag":77,"props":352,"children":353},{},[354],{"type":23,"value":355},"a download media link.",{"type":17,"tag":26,"props":357,"children":358},{},[359],{"type":23,"value":360},"Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text.",{"type":17,"tag":26,"props":362,"children":363},{},[364],{"type":23,"value":365},"Complex media will always display the full image. The media item will display at a predefined max height or width.",{"type":17,"tag":26,"props":367,"children":368},{},[369],{"type":23,"value":370},"When the media is fullscreen, it displays in the media fullscreen component.",{"type":17,"tag":61,"props":372,"children":374},{"id":373},"core-containers-media-embed--complex-image",[],{"type":17,"tag":132,"props":376,"children":377},{},[],{"type":17,"tag":18,"props":379,"children":381},{"id":380},"theming",[382],{"type":23,"value":383},"Theming",{"type":17,"tag":26,"props":385,"children":386},{},[387],{"type":23,"value":388},"Media embed uses colour for:",{"type":17,"tag":73,"props":390,"children":391},{},[392,397],{"type":17,"tag":77,"props":393,"children":394},{},[395],{"type":23,"value":396},"icons",{"type":17,"tag":77,"props":398,"children":399},{},[400],{"type":23,"value":401},"interactive states.",{"type":17,"tag":403,"props":404,"children":405},"docs-theme-chooser",{},[406],{"type":17,"tag":61,"props":407,"children":408},{"id":373},[],{"type":17,"tag":26,"props":410,"children":411},{},[412,414,420,422,428],{"type":23,"value":413},"To create your own theme see ",{"type":17,"tag":52,"props":415,"children":417},{"href":416},"/design-system/design/theming-guidance-for-designers",[418],{"type":23,"value":419},"theming guidance for designers",{"type":23,"value":421}," or ",{"type":17,"tag":52,"props":423,"children":425},{"href":424},"/design-system/develop/theming",[426],{"type":23,"value":427},"theming guidance for developers",{"type":23,"value":429},".",{"title":8,"searchDepth":431,"depth":431,"links":432},2,[433,438,443],{"id":20,"depth":431,"text":24,"children":434},[435,437],{"id":68,"depth":436,"text":71},3,{"id":109,"depth":436,"text":112},{"id":137,"depth":431,"text":140,"children":439},[440,441,442],{"id":153,"depth":436,"text":196},{"id":158,"depth":436,"text":279},{"id":301,"depth":436,"text":304},{"id":380,"depth":431,"text":383},"markdown","content:design-system:5.components:media-embed.md","content","design-system/5.components/media-embed.md","md",{"/design-system/components/media-embed":450},[451,457],{"_path":452,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":453,"description":454,"layout":11,"label":12,"_type":444,"_id":455,"_source":446,"_file":456,"_extension":448},"/design-system/components/key-dates","Key dates","The Key dates component shows users a card promoting key dates or events.","content:design-system:5.components:key-dates.md","design-system/5.components/key-dates.md",{"_path":458,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":459,"description":460,"layout":11,"label":12,"_type":444,"_id":461,"_source":446,"_file":462,"_extension":448},"/design-system/components/media-fullscreen","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","content:design-system:5.components:media-fullscreen.md","design-system/5.components/media-fullscreen.md",{},[465,470,709],{"title":466,"_path":467,"icon":468,"layout":469},"Ripple Design System","/","carbon:home","home",{"title":471,"_path":472,"children":473},"Design System","/design-system",[474,490,505,533,567],{"title":475,"_path":476,"children":477},"About","/design-system/about",[478,481,484,487],{"title":479,"_path":480,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":482,"_path":483,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":485,"_path":486,"layout":11},"Support","/design-system/about/getting-support",{"title":488,"_path":489,"layout":11},"Contributing","/design-system/about/contributing",{"title":491,"_path":492,"children":493},"Design","/design-system/design",[494,497,500,503],{"title":495,"_path":496,"layout":11},"Getting started","/design-system/design/getting-started",{"title":498,"_path":499,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":501,"_path":502,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":504,"_path":416,"layout":11},"Theming guidance for designers",{"title":506,"_path":507,"children":508},"Develop","/design-system/develop",[509,511,513,515],{"title":495,"_path":510,"layout":11},"/design-system/develop/getting-started",{"title":488,"_path":512,"layout":11},"/design-system/develop/contributing",{"title":514,"_path":424,"layout":11},"Theme and brand application",{"title":24,"_path":516,"children":517,"layout":11},"/design-system/develop/usage",[518,521,524,527,530],{"title":519,"_path":520,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":522,"_path":523,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":525,"_path":526,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":528,"_path":529,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":531,"_path":532,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":534,"_path":535,"children":536},"Styles","/design-system/styles",[537,540,543,546,549,552,555,558,561,564],{"title":538,"_path":539,"layout":11},"Colour","/design-system/styles/colour",{"title":541,"_path":542,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":544,"_path":545,"layout":11},"Grid","/design-system/styles/grid",{"title":547,"_path":548,"layout":11},"Icons","/design-system/styles/icons",{"title":550,"_path":551,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":553,"_path":554,"layout":11},"Layout","/design-system/styles/layout",{"title":556,"_path":557,"layout":11},"Logo","/design-system/styles/logo",{"title":559,"_path":560,"layout":11},"Motion","/design-system/styles/motion",{"title":562,"_path":563,"layout":11},"Spacing","/design-system/styles/spacing",{"title":565,"_path":566,"layout":11},"Typography","/design-system/styles/typography",{"title":568,"_path":569,"children":570},"Components","/design-system/components",[571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,647,648,649,652,655,658,661,664,667,670,673,676,679,682,685,688,691,694,697,700,703,706],{"title":572,"_path":573,"layout":11},"Accordion","/design-system/components/accordion",{"title":575,"_path":576,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":578,"_path":579,"layout":11},"Alert","/design-system/components/alert",{"title":581,"_path":582,"layout":11},"Block quote","/design-system/components/block-quote",{"title":584,"_path":585,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":587,"_path":588,"layout":11},"Button","/design-system/components/button",{"title":590,"_path":591,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":593,"_path":594,"layout":11},"Callout","/design-system/components/callout",{"title":596,"_path":597,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":599,"_path":600,"layout":11},"Card","/design-system/components/card",{"title":602,"_path":603,"layout":11},"Carousel","/design-system/components/carousel",{"title":605,"_path":606,"layout":11},"Category grid","/design-system/components/category-grid",{"title":608,"_path":609,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":611,"_path":612,"layout":11},"Chip","/design-system/components/chip",{"title":614,"_path":615,"layout":11},"Contact us","/design-system/components/contact-us",{"title":617,"_path":618,"layout":11},"Date input","/design-system/components/date-input",{"title":620,"_path":621,"layout":11},"Detail list","/design-system/components/detail-list",{"title":623,"_path":624,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":626,"_path":627,"layout":11},"File","/design-system/components/file",{"title":629,"_path":630,"layout":11},"Footer","/design-system/components/footer",{"title":632,"_path":633,"layout":11},"Form alert","/design-system/components/form-alert",{"title":635,"_path":636,"layout":11},"Form","/design-system/components/form",{"title":638,"_path":639,"layout":11},"Header","/design-system/components/header",{"title":641,"_path":642,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":644,"_path":645,"layout":11},"Input field","/design-system/components/input-field",{"title":453,"_path":452,"layout":11},{"title":9,"_path":5,"layout":11},{"title":459,"_path":458,"layout":11},{"title":650,"_path":651,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":653,"_path":654,"layout":11},"Media","/design-system/components/media",{"title":656,"_path":657,"layout":11},"Option button","/design-system/components/option-button",{"title":659,"_path":660,"layout":11},"Page action","/design-system/components/page-action",{"title":662,"_path":663,"layout":11},"Pagination","/design-system/components/pagination",{"title":665,"_path":666,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":668,"_path":669,"layout":11},"Profile","/design-system/components/profile",{"title":671,"_path":672,"layout":11},"Radio button","/design-system/components/radio-button",{"title":674,"_path":675,"layout":11},"Related links","/design-system/components/related-links",{"title":677,"_path":678,"layout":11},"Results listing","/design-system/components/results-listing",{"title":680,"_path":681,"layout":11},"Search bar","/design-system/components/search-bar",{"title":683,"_path":684,"layout":11},"Skip link","/design-system/components/skip-link",{"title":686,"_path":687,"layout":11},"Social share","/design-system/components/social-share",{"title":689,"_path":690,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":692,"_path":693,"layout":11},"Table","/design-system/components/table",{"title":695,"_path":696,"layout":11},"Tabs","/design-system/components/tabs",{"title":698,"_path":699,"layout":11},"Tag","/design-system/components/tag",{"title":701,"_path":702,"layout":11},"Text area","/design-system/components/text-area",{"title":704,"_path":705,"layout":11},"Timeline","/design-system/components/timeline",{"title":707,"_path":708,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":710,"_path":711,"children":712,"layout":11},"Ripple Framework","/framework",[713,714,732,754],{"title":710,"_path":711,"layout":11},{"title":715,"_path":716,"children":717},"Key Concepts","/framework/key-concepts",[718,720,723,726,729],{"title":525,"_path":719,"layout":11},"/framework/key-concepts/nuxt",{"title":721,"_path":722,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":724,"_path":725,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":727,"_path":728,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":730,"_path":731,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":733,"_path":734,"children":735},"Guides","/framework/guides",[736,739,742,745,748,751],{"title":737,"_path":738,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":740,"_path":741,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":743,"_path":744,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":746,"_path":747,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":749,"_path":750,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":752,"_path":753,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":755,"_path":756,"layout":11},"Core modules","/framework/core-modules",["Reactive",758],{"module-navigation":759},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/media-fullscreen/index.html b/design-system/components/media-fullscreen/index.html index e0f50dbe7b..b9a2b6362c 100644 --- a/design-system/components/media-fullscreen/index.html +++ b/design-system/components/media-fullscreen/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media fullscreen</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area.<!--]--></p><p><!--[-->Fullscreen view includes the media item's title and caption.<!--]--></p><p><!--[-->Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always display the media item max height or width of the content area.<!--]--></li><li><!--[-->Always include a title for the media item.<!--]--></li><li><!--[-->Always include alt text.<!--]--></li><li><!--[-->Display the media title and caption if used in the base component.<!--]--></li><li><!--[-->Use when you need to display a media item fullscreen.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use with items that aren't media.<!--]--></li><li><!--[-->Don't use with a completely opaque background.<!--]--></li><li><!--[-->Don't use pagination for one media item only.<!--]--></li><li><!--[-->Don't crop or hide the media item.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Media fullscreen adopts its theming from the pagination component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-fullscreen.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-fullscreen/_payload.json">[{"state":1,"_errors":491,"serverRendered":494,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":183,"$sdd-globals":197,"$sdd-navigation":198},{"/design-system/components/media-fullscreen":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":178,"_id":179,"_source":180,"_file":181,"_extension":182},"/design-system/components/media-fullscreen","components",false,"","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","page","Core",{"type":14,"children":15,"toc":169},"root",[16,25,31,36,41,55,60,67,97,103,126,130,136,141,148],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Fullscreen view includes the media item's title and caption.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery.",{"type":17,"tag":26,"props":42,"children":43},{},[44,46,53],{"type":23,"value":45},"See ",{"type":17,"tag":47,"props":48,"children":50},"a",{"href":49},"/design-system/components/media/",[51],{"type":23,"value":52},"media",{"type":23,"value":54}," for information relating to file type, ratios and focal point.",{"type":17,"tag":56,"props":57,"children":59},"docs-example",{"id":58},"core-containers-media-gallery--default-story",[],{"type":17,"tag":61,"props":62,"children":64},"h3",{"id":63},"when-and-how-to-use",[65],{"type":23,"value":66},"When and how to use",{"type":17,"tag":68,"props":69,"children":70},"ul",{},[71,77,82,87,92],{"type":17,"tag":72,"props":73,"children":74},"li",{},[75],{"type":23,"value":76},"Always display the media item max height or width of the content area.",{"type":17,"tag":72,"props":78,"children":79},{},[80],{"type":23,"value":81},"Always include a title for the media item.",{"type":17,"tag":72,"props":83,"children":84},{},[85],{"type":23,"value":86},"Always include alt text.",{"type":17,"tag":72,"props":88,"children":89},{},[90],{"type":23,"value":91},"Display the media title and caption if used in the base component.",{"type":17,"tag":72,"props":93,"children":94},{},[95],{"type":23,"value":96},"Use when you need to display a media item fullscreen.",{"type":17,"tag":61,"props":98,"children":100},{"id":99},"when-and-how-not-to-use",[101],{"type":23,"value":102},"When and how not to use",{"type":17,"tag":68,"props":104,"children":105},{},[106,111,116,121],{"type":17,"tag":72,"props":107,"children":108},{},[109],{"type":23,"value":110},"Don't use with items that aren't media.",{"type":17,"tag":72,"props":112,"children":113},{},[114],{"type":23,"value":115},"Don't use with a completely opaque background.",{"type":17,"tag":72,"props":117,"children":118},{},[119],{"type":23,"value":120},"Don't use pagination for one media item only.",{"type":17,"tag":72,"props":122,"children":123},{},[124],{"type":23,"value":125},"Don't crop or hide the media item.",{"type":17,"tag":127,"props":128,"children":129},"hr",{},[],{"type":17,"tag":18,"props":131,"children":133},{"id":132},"theming",[134],{"type":23,"value":135},"Theming",{"type":17,"tag":26,"props":137,"children":138},{},[139],{"type":23,"value":140},"Media fullscreen adopts its theming from the pagination component.",{"type":17,"tag":142,"props":143,"children":144},"docs-theme-chooser",{},[145],{"type":17,"tag":56,"props":146,"children":147},{"id":58},[],{"type":17,"tag":26,"props":149,"children":150},{},[151,153,159,161,167],{"type":23,"value":152},"To create your own theme see ",{"type":17,"tag":47,"props":154,"children":156},{"href":155},"/design-system/design/theming-guidance-for-designers",[157],{"type":23,"value":158},"theming guidance for designers",{"type":23,"value":160}," or ",{"type":17,"tag":47,"props":162,"children":164},{"href":163},"/design-system/develop/theming",[165],{"type":23,"value":166},"theming guidance for developers",{"type":23,"value":168},".",{"title":8,"searchDepth":170,"depth":170,"links":171},2,[172,177],{"id":20,"depth":170,"text":24,"children":173},[174,176],{"id":63,"depth":175,"text":66},3,{"id":99,"depth":175,"text":102},{"id":132,"depth":170,"text":135},"markdown","content:design-system:5.components:media-fullscreen.md","content","design-system/5.components/media-fullscreen.md","md",{"/design-system/components/media-fullscreen":184},[185,191],{"_path":186,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":187,"description":188,"layout":11,"label":12,"_type":178,"_id":189,"_source":180,"_file":190,"_extension":182},"/design-system/components/media-embed","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","content:design-system:5.components:media-embed.md","design-system/5.components/media-embed.md",{"_path":192,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":193,"description":194,"layout":11,"label":12,"_type":178,"_id":195,"_source":180,"_file":196,"_extension":182},"/design-system/components/media-gallery","Media gallery","The Media gallery component is a series of images users can side-scroll through.","content:design-system:5.components:media-gallery.md","design-system/5.components/media-gallery.md",{},[199,204,443],{"title":200,"_path":201,"icon":202,"layout":203},"Ripple Design System","/","carbon:home","home",{"title":205,"_path":206,"children":207},"Design System","/design-system",[208,224,239,267,301],{"title":209,"_path":210,"children":211},"About","/design-system/about",[212,215,218,221],{"title":213,"_path":214,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":216,"_path":217,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":219,"_path":220,"layout":11},"Support","/design-system/about/getting-support",{"title":222,"_path":223,"layout":11},"Contributing","/design-system/about/contributing",{"title":225,"_path":226,"children":227},"Design","/design-system/design",[228,231,234,237],{"title":229,"_path":230,"layout":11},"Getting started","/design-system/design/getting-started",{"title":232,"_path":233,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":235,"_path":236,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":238,"_path":155,"layout":11},"Theming guidance for designers",{"title":240,"_path":241,"children":242},"Develop","/design-system/develop",[243,245,247,249],{"title":229,"_path":244,"layout":11},"/design-system/develop/getting-started",{"title":222,"_path":246,"layout":11},"/design-system/develop/contributing",{"title":248,"_path":163,"layout":11},"Theme and brand application",{"title":24,"_path":250,"children":251,"layout":11},"/design-system/develop/usage",[252,255,258,261,264],{"title":253,"_path":254,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":256,"_path":257,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":259,"_path":260,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":262,"_path":263,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":265,"_path":266,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":268,"_path":269,"children":270},"Styles","/design-system/styles",[271,274,277,280,283,286,289,292,295,298],{"title":272,"_path":273,"layout":11},"Colour","/design-system/styles/colour",{"title":275,"_path":276,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":278,"_path":279,"layout":11},"Grid","/design-system/styles/grid",{"title":281,"_path":282,"layout":11},"Icons","/design-system/styles/icons",{"title":284,"_path":285,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":287,"_path":288,"layout":11},"Layout","/design-system/styles/layout",{"title":290,"_path":291,"layout":11},"Logo","/design-system/styles/logo",{"title":293,"_path":294,"layout":11},"Motion","/design-system/styles/motion",{"title":296,"_path":297,"layout":11},"Spacing","/design-system/styles/spacing",{"title":299,"_path":300,"layout":11},"Typography","/design-system/styles/typography",{"title":302,"_path":303,"children":304},"Components","/design-system/components",[305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,384,385,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440],{"title":306,"_path":307,"layout":11},"Accordion","/design-system/components/accordion",{"title":309,"_path":310,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":312,"_path":313,"layout":11},"Alert","/design-system/components/alert",{"title":315,"_path":316,"layout":11},"Block quote","/design-system/components/block-quote",{"title":318,"_path":319,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":321,"_path":322,"layout":11},"Button","/design-system/components/button",{"title":324,"_path":325,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":327,"_path":328,"layout":11},"Callout","/design-system/components/callout",{"title":330,"_path":331,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":333,"_path":334,"layout":11},"Card","/design-system/components/card",{"title":336,"_path":337,"layout":11},"Carousel","/design-system/components/carousel",{"title":339,"_path":340,"layout":11},"Category grid","/design-system/components/category-grid",{"title":342,"_path":343,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":345,"_path":346,"layout":11},"Chip","/design-system/components/chip",{"title":348,"_path":349,"layout":11},"Contact us","/design-system/components/contact-us",{"title":351,"_path":352,"layout":11},"Date input","/design-system/components/date-input",{"title":354,"_path":355,"layout":11},"Detail list","/design-system/components/detail-list",{"title":357,"_path":358,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":360,"_path":361,"layout":11},"File","/design-system/components/file",{"title":363,"_path":364,"layout":11},"Footer","/design-system/components/footer",{"title":366,"_path":367,"layout":11},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":11},"Form","/design-system/components/form",{"title":372,"_path":373,"layout":11},"Header","/design-system/components/header",{"title":375,"_path":376,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":378,"_path":379,"layout":11},"Input field","/design-system/components/input-field",{"title":381,"_path":382,"layout":11},"Key dates","/design-system/components/key-dates",{"title":187,"_path":186,"layout":11},{"title":9,"_path":5,"layout":11},{"title":193,"_path":192,"layout":11},{"title":387,"_path":388,"layout":11},"Media","/design-system/components/media",{"title":390,"_path":391,"layout":11},"Option button","/design-system/components/option-button",{"title":393,"_path":394,"layout":11},"Page action","/design-system/components/page-action",{"title":396,"_path":397,"layout":11},"Pagination","/design-system/components/pagination",{"title":399,"_path":400,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":402,"_path":403,"layout":11},"Profile","/design-system/components/profile",{"title":405,"_path":406,"layout":11},"Radio button","/design-system/components/radio-button",{"title":408,"_path":409,"layout":11},"Related links","/design-system/components/related-links",{"title":411,"_path":412,"layout":11},"Results listing","/design-system/components/results-listing",{"title":414,"_path":415,"layout":11},"Search bar","/design-system/components/search-bar",{"title":417,"_path":418,"layout":11},"Skip link","/design-system/components/skip-link",{"title":420,"_path":421,"layout":11},"Social share","/design-system/components/social-share",{"title":423,"_path":424,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":426,"_path":427,"layout":11},"Table","/design-system/components/table",{"title":429,"_path":430,"layout":11},"Tabs","/design-system/components/tabs",{"title":432,"_path":433,"layout":11},"Tag","/design-system/components/tag",{"title":435,"_path":436,"layout":11},"Text area","/design-system/components/text-area",{"title":438,"_path":439,"layout":11},"Timeline","/design-system/components/timeline",{"title":441,"_path":442,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":444,"_path":445,"children":446,"layout":11},"Ripple Framework","/framework",[447,448,466,488],{"title":444,"_path":445,"layout":11},{"title":449,"_path":450,"children":451},"Key Concepts","/framework/key-concepts",[452,454,457,460,463],{"title":259,"_path":453,"layout":11},"/framework/key-concepts/nuxt",{"title":455,"_path":456,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":458,"_path":459,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":461,"_path":462,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":464,"_path":465,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":467,"_path":468,"children":469},"Guides","/framework/guides",[470,473,476,479,482,485],{"title":471,"_path":472,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":474,"_path":475,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":477,"_path":478,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":480,"_path":481,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":483,"_path":484,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":486,"_path":487,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":489,"_path":490,"layout":11},"Core modules","/framework/core-modules",["Reactive",492],{"module-navigation":493},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media fullscreen</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area.<!--]--></p><p><!--[-->Fullscreen view includes the media item's title and caption.<!--]--></p><p><!--[-->Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always display the media item max height or width of the content area.<!--]--></li><li><!--[-->Always include a title for the media item.<!--]--></li><li><!--[-->Always include alt text.<!--]--></li><li><!--[-->Display the media title and caption if used in the base component.<!--]--></li><li><!--[-->Use when you need to display a media item fullscreen.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use with items that aren't media.<!--]--></li><li><!--[-->Don't use with a completely opaque background.<!--]--></li><li><!--[-->Don't use pagination for one media item only.<!--]--></li><li><!--[-->Don't crop or hide the media item.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Media fullscreen adopts its theming from the pagination component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-fullscreen.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-fullscreen/_payload.json">[{"state":1,"_errors":491,"serverRendered":494,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":183,"$sdd-globals":197,"$sdd-navigation":198},{"/design-system/components/media-fullscreen":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":178,"_id":179,"_source":180,"_file":181,"_extension":182},"/design-system/components/media-fullscreen","components",false,"","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","page","Core",{"type":14,"children":15,"toc":169},"root",[16,25,31,36,41,55,60,67,97,103,126,130,136,141,148],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Fullscreen view includes the media item's title and caption.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery.",{"type":17,"tag":26,"props":42,"children":43},{},[44,46,53],{"type":23,"value":45},"See ",{"type":17,"tag":47,"props":48,"children":50},"a",{"href":49},"/design-system/components/media/",[51],{"type":23,"value":52},"media",{"type":23,"value":54}," for information relating to file type, ratios and focal point.",{"type":17,"tag":56,"props":57,"children":59},"docs-example",{"id":58},"core-containers-media-gallery--default-story",[],{"type":17,"tag":61,"props":62,"children":64},"h3",{"id":63},"when-and-how-to-use",[65],{"type":23,"value":66},"When and how to use",{"type":17,"tag":68,"props":69,"children":70},"ul",{},[71,77,82,87,92],{"type":17,"tag":72,"props":73,"children":74},"li",{},[75],{"type":23,"value":76},"Always display the media item max height or width of the content area.",{"type":17,"tag":72,"props":78,"children":79},{},[80],{"type":23,"value":81},"Always include a title for the media item.",{"type":17,"tag":72,"props":83,"children":84},{},[85],{"type":23,"value":86},"Always include alt text.",{"type":17,"tag":72,"props":88,"children":89},{},[90],{"type":23,"value":91},"Display the media title and caption if used in the base component.",{"type":17,"tag":72,"props":93,"children":94},{},[95],{"type":23,"value":96},"Use when you need to display a media item fullscreen.",{"type":17,"tag":61,"props":98,"children":100},{"id":99},"when-and-how-not-to-use",[101],{"type":23,"value":102},"When and how not to use",{"type":17,"tag":68,"props":104,"children":105},{},[106,111,116,121],{"type":17,"tag":72,"props":107,"children":108},{},[109],{"type":23,"value":110},"Don't use with items that aren't media.",{"type":17,"tag":72,"props":112,"children":113},{},[114],{"type":23,"value":115},"Don't use with a completely opaque background.",{"type":17,"tag":72,"props":117,"children":118},{},[119],{"type":23,"value":120},"Don't use pagination for one media item only.",{"type":17,"tag":72,"props":122,"children":123},{},[124],{"type":23,"value":125},"Don't crop or hide the media item.",{"type":17,"tag":127,"props":128,"children":129},"hr",{},[],{"type":17,"tag":18,"props":131,"children":133},{"id":132},"theming",[134],{"type":23,"value":135},"Theming",{"type":17,"tag":26,"props":137,"children":138},{},[139],{"type":23,"value":140},"Media fullscreen adopts its theming from the pagination component.",{"type":17,"tag":142,"props":143,"children":144},"docs-theme-chooser",{},[145],{"type":17,"tag":56,"props":146,"children":147},{"id":58},[],{"type":17,"tag":26,"props":149,"children":150},{},[151,153,159,161,167],{"type":23,"value":152},"To create your own theme see ",{"type":17,"tag":47,"props":154,"children":156},{"href":155},"/design-system/design/theming-guidance-for-designers",[157],{"type":23,"value":158},"theming guidance for designers",{"type":23,"value":160}," or ",{"type":17,"tag":47,"props":162,"children":164},{"href":163},"/design-system/develop/theming",[165],{"type":23,"value":166},"theming guidance for developers",{"type":23,"value":168},".",{"title":8,"searchDepth":170,"depth":170,"links":171},2,[172,177],{"id":20,"depth":170,"text":24,"children":173},[174,176],{"id":63,"depth":175,"text":66},3,{"id":99,"depth":175,"text":102},{"id":132,"depth":170,"text":135},"markdown","content:design-system:5.components:media-fullscreen.md","content","design-system/5.components/media-fullscreen.md","md",{"/design-system/components/media-fullscreen":184},[185,191],{"_path":186,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":187,"description":188,"layout":11,"label":12,"_type":178,"_id":189,"_source":180,"_file":190,"_extension":182},"/design-system/components/media-embed","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","content:design-system:5.components:media-embed.md","design-system/5.components/media-embed.md",{"_path":192,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":193,"description":194,"layout":11,"label":12,"_type":178,"_id":195,"_source":180,"_file":196,"_extension":182},"/design-system/components/media-gallery","Media gallery","The Media gallery component is a series of images users can side-scroll through.","content:design-system:5.components:media-gallery.md","design-system/5.components/media-gallery.md",{},[199,204,443],{"title":200,"_path":201,"icon":202,"layout":203},"Ripple Design System","/","carbon:home","home",{"title":205,"_path":206,"children":207},"Design System","/design-system",[208,224,239,267,301],{"title":209,"_path":210,"children":211},"About","/design-system/about",[212,215,218,221],{"title":213,"_path":214,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":216,"_path":217,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":219,"_path":220,"layout":11},"Support","/design-system/about/getting-support",{"title":222,"_path":223,"layout":11},"Contributing","/design-system/about/contributing",{"title":225,"_path":226,"children":227},"Design","/design-system/design",[228,231,234,237],{"title":229,"_path":230,"layout":11},"Getting started","/design-system/design/getting-started",{"title":232,"_path":233,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":235,"_path":236,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":238,"_path":155,"layout":11},"Theming guidance for designers",{"title":240,"_path":241,"children":242},"Develop","/design-system/develop",[243,245,247,249],{"title":229,"_path":244,"layout":11},"/design-system/develop/getting-started",{"title":222,"_path":246,"layout":11},"/design-system/develop/contributing",{"title":248,"_path":163,"layout":11},"Theme and brand application",{"title":24,"_path":250,"children":251,"layout":11},"/design-system/develop/usage",[252,255,258,261,264],{"title":253,"_path":254,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":256,"_path":257,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":259,"_path":260,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":262,"_path":263,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":265,"_path":266,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":268,"_path":269,"children":270},"Styles","/design-system/styles",[271,274,277,280,283,286,289,292,295,298],{"title":272,"_path":273,"layout":11},"Colour","/design-system/styles/colour",{"title":275,"_path":276,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":278,"_path":279,"layout":11},"Grid","/design-system/styles/grid",{"title":281,"_path":282,"layout":11},"Icons","/design-system/styles/icons",{"title":284,"_path":285,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":287,"_path":288,"layout":11},"Layout","/design-system/styles/layout",{"title":290,"_path":291,"layout":11},"Logo","/design-system/styles/logo",{"title":293,"_path":294,"layout":11},"Motion","/design-system/styles/motion",{"title":296,"_path":297,"layout":11},"Spacing","/design-system/styles/spacing",{"title":299,"_path":300,"layout":11},"Typography","/design-system/styles/typography",{"title":302,"_path":303,"children":304},"Components","/design-system/components",[305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,384,385,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440],{"title":306,"_path":307,"layout":11},"Accordion","/design-system/components/accordion",{"title":309,"_path":310,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":312,"_path":313,"layout":11},"Alert","/design-system/components/alert",{"title":315,"_path":316,"layout":11},"Block quote","/design-system/components/block-quote",{"title":318,"_path":319,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":321,"_path":322,"layout":11},"Button","/design-system/components/button",{"title":324,"_path":325,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":327,"_path":328,"layout":11},"Callout","/design-system/components/callout",{"title":330,"_path":331,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":333,"_path":334,"layout":11},"Card","/design-system/components/card",{"title":336,"_path":337,"layout":11},"Carousel","/design-system/components/carousel",{"title":339,"_path":340,"layout":11},"Category grid","/design-system/components/category-grid",{"title":342,"_path":343,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":345,"_path":346,"layout":11},"Chip","/design-system/components/chip",{"title":348,"_path":349,"layout":11},"Contact us","/design-system/components/contact-us",{"title":351,"_path":352,"layout":11},"Date input","/design-system/components/date-input",{"title":354,"_path":355,"layout":11},"Detail list","/design-system/components/detail-list",{"title":357,"_path":358,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":360,"_path":361,"layout":11},"File","/design-system/components/file",{"title":363,"_path":364,"layout":11},"Footer","/design-system/components/footer",{"title":366,"_path":367,"layout":11},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":11},"Form","/design-system/components/form",{"title":372,"_path":373,"layout":11},"Header","/design-system/components/header",{"title":375,"_path":376,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":378,"_path":379,"layout":11},"Input field","/design-system/components/input-field",{"title":381,"_path":382,"layout":11},"Key dates","/design-system/components/key-dates",{"title":187,"_path":186,"layout":11},{"title":9,"_path":5,"layout":11},{"title":193,"_path":192,"layout":11},{"title":387,"_path":388,"layout":11},"Media","/design-system/components/media",{"title":390,"_path":391,"layout":11},"Option button","/design-system/components/option-button",{"title":393,"_path":394,"layout":11},"Page action","/design-system/components/page-action",{"title":396,"_path":397,"layout":11},"Pagination","/design-system/components/pagination",{"title":399,"_path":400,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":402,"_path":403,"layout":11},"Profile","/design-system/components/profile",{"title":405,"_path":406,"layout":11},"Radio button","/design-system/components/radio-button",{"title":408,"_path":409,"layout":11},"Related links","/design-system/components/related-links",{"title":411,"_path":412,"layout":11},"Results listing","/design-system/components/results-listing",{"title":414,"_path":415,"layout":11},"Search bar","/design-system/components/search-bar",{"title":417,"_path":418,"layout":11},"Skip link","/design-system/components/skip-link",{"title":420,"_path":421,"layout":11},"Social share","/design-system/components/social-share",{"title":423,"_path":424,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":426,"_path":427,"layout":11},"Table","/design-system/components/table",{"title":429,"_path":430,"layout":11},"Tabs","/design-system/components/tabs",{"title":432,"_path":433,"layout":11},"Tag","/design-system/components/tag",{"title":435,"_path":436,"layout":11},"Text area","/design-system/components/text-area",{"title":438,"_path":439,"layout":11},"Timeline","/design-system/components/timeline",{"title":441,"_path":442,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":444,"_path":445,"children":446,"layout":11},"Ripple Framework","/framework",[447,448,466,488],{"title":444,"_path":445,"layout":11},{"title":449,"_path":450,"children":451},"Key Concepts","/framework/key-concepts",[452,454,457,460,463],{"title":259,"_path":453,"layout":11},"/framework/key-concepts/nuxt",{"title":455,"_path":456,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":458,"_path":459,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":461,"_path":462,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":464,"_path":465,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":467,"_path":468,"children":469},"Guides","/framework/guides",[470,473,476,479,482,485],{"title":471,"_path":472,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":474,"_path":475,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":477,"_path":478,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":480,"_path":481,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":483,"_path":484,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":486,"_path":487,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":489,"_path":490,"layout":11},"Core modules","/framework/core-modules",["Reactive",492],{"module-navigation":493},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/media-gallery/index.html b/design-system/components/media-gallery/index.html index 0ab45ad845..d0f0a7b820 100644 --- a/design-system/components/media-gallery/index.html +++ b/design-system/components/media-gallery/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media gallery</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media gallery component is a series of images users can side-scroll through.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images.<!--]--></p><p><!--[-->Media gallery combines images and text to give users context within the content.<!--]--></p><p><!--[-->Media items inside a media gallery will display as either landscape or portrait, at predefined ratios.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Include related images only.<!--]--></li><li><!--[-->Use at least 2 images.<!--]--></li><li><!--[-->Always use a media title.<!--]--></li><li><!--[-->Include an optional caption to help users understand images' context and relevance to the page content.<!--]--></li><li><!--[-->Use on any page type.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use for decorative purposes.<!--]--></li><li><!--[-->Don't use sensory images.<!--]--></li><li><!--[-->Don't use for a single image, instead use the media embed component.<!--]--></li><li><!--[-->Don't use with media unrelated to page content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Media embed uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->indicating an interaction to users<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->It also adopts its theming from the pagination component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-gallery.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-gallery/_payload.json">[{"state":1,"_errors":518,"serverRendered":521,"path":522,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":208,"$sdd-globals":222,"$sdd-navigation":223},{"/design-system/components/media-gallery":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":203,"_id":204,"_source":205,"_file":206,"_extension":207},"/design-system/components/media-gallery","components",false,"","Media gallery","The Media gallery component is a series of images users can side-scroll through.","page","Core",{"type":14,"children":15,"toc":194},"root",[16,25,31,36,41,55,60,67,97,103,126,130,136,141,159,164,171],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Media gallery combines images and text to give users context within the content.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Media items inside a media gallery will display as either landscape or portrait, at predefined ratios.",{"type":17,"tag":26,"props":42,"children":43},{},[44,46,53],{"type":23,"value":45},"See ",{"type":17,"tag":47,"props":48,"children":50},"a",{"href":49},"/design-system/components/media/",[51],{"type":23,"value":52},"media",{"type":23,"value":54}," for information relating to file type, ratios and focal point.",{"type":17,"tag":56,"props":57,"children":59},"docs-example",{"id":58},"core-containers-media-gallery--default-story",[],{"type":17,"tag":61,"props":62,"children":64},"h3",{"id":63},"when-and-how-to-use",[65],{"type":23,"value":66},"When and how to use",{"type":17,"tag":68,"props":69,"children":70},"ul",{},[71,77,82,87,92],{"type":17,"tag":72,"props":73,"children":74},"li",{},[75],{"type":23,"value":76},"Include related images only.",{"type":17,"tag":72,"props":78,"children":79},{},[80],{"type":23,"value":81},"Use at least 2 images.",{"type":17,"tag":72,"props":83,"children":84},{},[85],{"type":23,"value":86},"Always use a media title.",{"type":17,"tag":72,"props":88,"children":89},{},[90],{"type":23,"value":91},"Include an optional caption to help users understand images' context and relevance to the page content.",{"type":17,"tag":72,"props":93,"children":94},{},[95],{"type":23,"value":96},"Use on any page type.",{"type":17,"tag":61,"props":98,"children":100},{"id":99},"when-and-how-not-to-use",[101],{"type":23,"value":102},"When and how not to use",{"type":17,"tag":68,"props":104,"children":105},{},[106,111,116,121],{"type":17,"tag":72,"props":107,"children":108},{},[109],{"type":23,"value":110},"Don't use for decorative purposes.",{"type":17,"tag":72,"props":112,"children":113},{},[114],{"type":23,"value":115},"Don't use sensory images.",{"type":17,"tag":72,"props":117,"children":118},{},[119],{"type":23,"value":120},"Don't use for a single image, instead use the media embed component.",{"type":17,"tag":72,"props":122,"children":123},{},[124],{"type":23,"value":125},"Don't use with media unrelated to page content.",{"type":17,"tag":127,"props":128,"children":129},"hr",{},[],{"type":17,"tag":18,"props":131,"children":133},{"id":132},"theming",[134],{"type":23,"value":135},"Theming",{"type":17,"tag":26,"props":137,"children":138},{},[139],{"type":23,"value":140},"Media embed uses colour for:",{"type":17,"tag":68,"props":142,"children":143},{},[144,149,154],{"type":17,"tag":72,"props":145,"children":146},{},[147],{"type":23,"value":148},"icons",{"type":17,"tag":72,"props":150,"children":151},{},[152],{"type":23,"value":153},"indicating an interaction to users",{"type":17,"tag":72,"props":155,"children":156},{},[157],{"type":23,"value":158},"interactive states.",{"type":17,"tag":26,"props":160,"children":161},{},[162],{"type":23,"value":163},"It also adopts its theming from the pagination component.",{"type":17,"tag":165,"props":166,"children":167},"docs-theme-chooser",{},[168],{"type":17,"tag":56,"props":169,"children":170},{"id":58},[],{"type":17,"tag":26,"props":172,"children":173},{},[174,176,184,186,192],{"type":23,"value":175},"To create your own theme, see ",{"type":17,"tag":47,"props":177,"children":181},{"href":178,"rel":179},"https://www.vic.gov.au",[180],"nofollow",[182],{"type":23,"value":183},"theming guidance for designers",{"type":23,"value":185}," or ",{"type":17,"tag":47,"props":187,"children":189},{"href":178,"rel":188},[180],[190],{"type":23,"value":191},"theming guidance for developers",{"type":23,"value":193},".",{"title":8,"searchDepth":195,"depth":195,"links":196},2,[197,202],{"id":20,"depth":195,"text":24,"children":198},[199,201],{"id":63,"depth":200,"text":66},3,{"id":99,"depth":200,"text":102},{"id":132,"depth":195,"text":135},"markdown","content:design-system:5.components:media-gallery.md","content","design-system/5.components/media-gallery.md","md",{"/design-system/components/media-gallery":209},[210,216],{"_path":211,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":212,"description":213,"layout":11,"label":12,"_type":203,"_id":214,"_source":205,"_file":215,"_extension":207},"/design-system/components/media-fullscreen","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","content:design-system:5.components:media-fullscreen.md","design-system/5.components/media-fullscreen.md",{"_path":217,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":218,"description":219,"layout":11,"label":12,"_type":203,"_id":220,"_source":205,"_file":221,"_extension":207},"/design-system/components/media","Media","The Media component is a container that houses media items to use in other components on a page.","content:design-system:5.components:media.md","design-system/5.components/media.md",{},[224,229,470],{"title":225,"_path":226,"icon":227,"layout":228},"Ripple Design System","/","carbon:home","home",{"title":230,"_path":231,"children":232},"Design System","/design-system",[233,249,265,294,328],{"title":234,"_path":235,"children":236},"About","/design-system/about",[237,240,243,246],{"title":238,"_path":239,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":241,"_path":242,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":244,"_path":245,"layout":11},"Support","/design-system/about/getting-support",{"title":247,"_path":248,"layout":11},"Contributing","/design-system/about/contributing",{"title":250,"_path":251,"children":252},"Design","/design-system/design",[253,256,259,262],{"title":254,"_path":255,"layout":11},"Getting started","/design-system/design/getting-started",{"title":257,"_path":258,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":260,"_path":261,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":263,"_path":264,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":266,"_path":267,"children":268},"Develop","/design-system/develop",[269,271,273,276],{"title":254,"_path":270,"layout":11},"/design-system/develop/getting-started",{"title":247,"_path":272,"layout":11},"/design-system/develop/contributing",{"title":274,"_path":275,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":277,"children":278,"layout":11},"/design-system/develop/usage",[279,282,285,288,291],{"title":280,"_path":281,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":283,"_path":284,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":286,"_path":287,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":289,"_path":290,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":292,"_path":293,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":295,"_path":296,"children":297},"Styles","/design-system/styles",[298,301,304,307,310,313,316,319,322,325],{"title":299,"_path":300,"layout":11},"Colour","/design-system/styles/colour",{"title":302,"_path":303,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":305,"_path":306,"layout":11},"Grid","/design-system/styles/grid",{"title":308,"_path":309,"layout":11},"Icons","/design-system/styles/icons",{"title":311,"_path":312,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":314,"_path":315,"layout":11},"Layout","/design-system/styles/layout",{"title":317,"_path":318,"layout":11},"Logo","/design-system/styles/logo",{"title":320,"_path":321,"layout":11},"Motion","/design-system/styles/motion",{"title":323,"_path":324,"layout":11},"Spacing","/design-system/styles/spacing",{"title":326,"_path":327,"layout":11},"Typography","/design-system/styles/typography",{"title":329,"_path":330,"children":331},"Components","/design-system/components",[332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,414,415,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467],{"title":333,"_path":334,"layout":11},"Accordion","/design-system/components/accordion",{"title":336,"_path":337,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":339,"_path":340,"layout":11},"Alert","/design-system/components/alert",{"title":342,"_path":343,"layout":11},"Block quote","/design-system/components/block-quote",{"title":345,"_path":346,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":348,"_path":349,"layout":11},"Button","/design-system/components/button",{"title":351,"_path":352,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":354,"_path":355,"layout":11},"Callout","/design-system/components/callout",{"title":357,"_path":358,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":360,"_path":361,"layout":11},"Card","/design-system/components/card",{"title":363,"_path":364,"layout":11},"Carousel","/design-system/components/carousel",{"title":366,"_path":367,"layout":11},"Category grid","/design-system/components/category-grid",{"title":369,"_path":370,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":372,"_path":373,"layout":11},"Chip","/design-system/components/chip",{"title":375,"_path":376,"layout":11},"Contact us","/design-system/components/contact-us",{"title":378,"_path":379,"layout":11},"Date input","/design-system/components/date-input",{"title":381,"_path":382,"layout":11},"Detail list","/design-system/components/detail-list",{"title":384,"_path":385,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":387,"_path":388,"layout":11},"File","/design-system/components/file",{"title":390,"_path":391,"layout":11},"Footer","/design-system/components/footer",{"title":393,"_path":394,"layout":11},"Form alert","/design-system/components/form-alert",{"title":396,"_path":397,"layout":11},"Form","/design-system/components/form",{"title":399,"_path":400,"layout":11},"Header","/design-system/components/header",{"title":402,"_path":403,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":405,"_path":406,"layout":11},"Input field","/design-system/components/input-field",{"title":408,"_path":409,"layout":11},"Key dates","/design-system/components/key-dates",{"title":411,"_path":412,"layout":11},"Media embed","/design-system/components/media-embed",{"title":212,"_path":211,"layout":11},{"title":9,"_path":5,"layout":11},{"title":218,"_path":217,"layout":11},{"title":417,"_path":418,"layout":11},"Option button","/design-system/components/option-button",{"title":420,"_path":421,"layout":11},"Page action","/design-system/components/page-action",{"title":423,"_path":424,"layout":11},"Pagination","/design-system/components/pagination",{"title":426,"_path":427,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":429,"_path":430,"layout":11},"Profile","/design-system/components/profile",{"title":432,"_path":433,"layout":11},"Radio button","/design-system/components/radio-button",{"title":435,"_path":436,"layout":11},"Related links","/design-system/components/related-links",{"title":438,"_path":439,"layout":11},"Results listing","/design-system/components/results-listing",{"title":441,"_path":442,"layout":11},"Search bar","/design-system/components/search-bar",{"title":444,"_path":445,"layout":11},"Skip link","/design-system/components/skip-link",{"title":447,"_path":448,"layout":11},"Social share","/design-system/components/social-share",{"title":450,"_path":451,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":453,"_path":454,"layout":11},"Table","/design-system/components/table",{"title":456,"_path":457,"layout":11},"Tabs","/design-system/components/tabs",{"title":459,"_path":460,"layout":11},"Tag","/design-system/components/tag",{"title":462,"_path":463,"layout":11},"Text area","/design-system/components/text-area",{"title":465,"_path":466,"layout":11},"Timeline","/design-system/components/timeline",{"title":468,"_path":469,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":471,"_path":472,"children":473,"layout":11},"Ripple Framework","/framework",[474,475,493,515],{"title":471,"_path":472,"layout":11},{"title":476,"_path":477,"children":478},"Key Concepts","/framework/key-concepts",[479,481,484,487,490],{"title":286,"_path":480,"layout":11},"/framework/key-concepts/nuxt",{"title":482,"_path":483,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":485,"_path":486,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":488,"_path":489,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":491,"_path":492,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":494,"_path":495,"children":496},"Guides","/framework/guides",[497,500,503,506,509,512],{"title":498,"_path":499,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":501,"_path":502,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":504,"_path":505,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":507,"_path":508,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":510,"_path":511,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":513,"_path":514,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":516,"_path":517,"layout":11},"Core modules","/framework/core-modules",["Reactive",519],{"module-navigation":520},null,true,"/design-system/components/media-gallery/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media gallery</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media gallery component is a series of images users can side-scroll through.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images.<!--]--></p><p><!--[-->Media gallery combines images and text to give users context within the content.<!--]--></p><p><!--[-->Media items inside a media gallery will display as either landscape or portrait, at predefined ratios.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Include related images only.<!--]--></li><li><!--[-->Use at least 2 images.<!--]--></li><li><!--[-->Always use a media title.<!--]--></li><li><!--[-->Include an optional caption to help users understand images' context and relevance to the page content.<!--]--></li><li><!--[-->Use on any page type.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use for decorative purposes.<!--]--></li><li><!--[-->Don't use sensory images.<!--]--></li><li><!--[-->Don't use for a single image, instead use the media embed component.<!--]--></li><li><!--[-->Don't use with media unrelated to page content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Media embed uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->indicating an interaction to users<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->It also adopts its theming from the pagination component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-gallery.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-gallery/_payload.json">[{"state":1,"_errors":518,"serverRendered":521,"path":522,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":208,"$sdd-globals":222,"$sdd-navigation":223},{"/design-system/components/media-gallery":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":203,"_id":204,"_source":205,"_file":206,"_extension":207},"/design-system/components/media-gallery","components",false,"","Media gallery","The Media gallery component is a series of images users can side-scroll through.","page","Core",{"type":14,"children":15,"toc":194},"root",[16,25,31,36,41,55,60,67,97,103,126,130,136,141,159,164,171],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Media gallery combines images and text to give users context within the content.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Media items inside a media gallery will display as either landscape or portrait, at predefined ratios.",{"type":17,"tag":26,"props":42,"children":43},{},[44,46,53],{"type":23,"value":45},"See ",{"type":17,"tag":47,"props":48,"children":50},"a",{"href":49},"/design-system/components/media/",[51],{"type":23,"value":52},"media",{"type":23,"value":54}," for information relating to file type, ratios and focal point.",{"type":17,"tag":56,"props":57,"children":59},"docs-example",{"id":58},"core-containers-media-gallery--default-story",[],{"type":17,"tag":61,"props":62,"children":64},"h3",{"id":63},"when-and-how-to-use",[65],{"type":23,"value":66},"When and how to use",{"type":17,"tag":68,"props":69,"children":70},"ul",{},[71,77,82,87,92],{"type":17,"tag":72,"props":73,"children":74},"li",{},[75],{"type":23,"value":76},"Include related images only.",{"type":17,"tag":72,"props":78,"children":79},{},[80],{"type":23,"value":81},"Use at least 2 images.",{"type":17,"tag":72,"props":83,"children":84},{},[85],{"type":23,"value":86},"Always use a media title.",{"type":17,"tag":72,"props":88,"children":89},{},[90],{"type":23,"value":91},"Include an optional caption to help users understand images' context and relevance to the page content.",{"type":17,"tag":72,"props":93,"children":94},{},[95],{"type":23,"value":96},"Use on any page type.",{"type":17,"tag":61,"props":98,"children":100},{"id":99},"when-and-how-not-to-use",[101],{"type":23,"value":102},"When and how not to use",{"type":17,"tag":68,"props":104,"children":105},{},[106,111,116,121],{"type":17,"tag":72,"props":107,"children":108},{},[109],{"type":23,"value":110},"Don't use for decorative purposes.",{"type":17,"tag":72,"props":112,"children":113},{},[114],{"type":23,"value":115},"Don't use sensory images.",{"type":17,"tag":72,"props":117,"children":118},{},[119],{"type":23,"value":120},"Don't use for a single image, instead use the media embed component.",{"type":17,"tag":72,"props":122,"children":123},{},[124],{"type":23,"value":125},"Don't use with media unrelated to page content.",{"type":17,"tag":127,"props":128,"children":129},"hr",{},[],{"type":17,"tag":18,"props":131,"children":133},{"id":132},"theming",[134],{"type":23,"value":135},"Theming",{"type":17,"tag":26,"props":137,"children":138},{},[139],{"type":23,"value":140},"Media embed uses colour for:",{"type":17,"tag":68,"props":142,"children":143},{},[144,149,154],{"type":17,"tag":72,"props":145,"children":146},{},[147],{"type":23,"value":148},"icons",{"type":17,"tag":72,"props":150,"children":151},{},[152],{"type":23,"value":153},"indicating an interaction to users",{"type":17,"tag":72,"props":155,"children":156},{},[157],{"type":23,"value":158},"interactive states.",{"type":17,"tag":26,"props":160,"children":161},{},[162],{"type":23,"value":163},"It also adopts its theming from the pagination component.",{"type":17,"tag":165,"props":166,"children":167},"docs-theme-chooser",{},[168],{"type":17,"tag":56,"props":169,"children":170},{"id":58},[],{"type":17,"tag":26,"props":172,"children":173},{},[174,176,184,186,192],{"type":23,"value":175},"To create your own theme, see ",{"type":17,"tag":47,"props":177,"children":181},{"href":178,"rel":179},"https://www.vic.gov.au",[180],"nofollow",[182],{"type":23,"value":183},"theming guidance for designers",{"type":23,"value":185}," or ",{"type":17,"tag":47,"props":187,"children":189},{"href":178,"rel":188},[180],[190],{"type":23,"value":191},"theming guidance for developers",{"type":23,"value":193},".",{"title":8,"searchDepth":195,"depth":195,"links":196},2,[197,202],{"id":20,"depth":195,"text":24,"children":198},[199,201],{"id":63,"depth":200,"text":66},3,{"id":99,"depth":200,"text":102},{"id":132,"depth":195,"text":135},"markdown","content:design-system:5.components:media-gallery.md","content","design-system/5.components/media-gallery.md","md",{"/design-system/components/media-gallery":209},[210,216],{"_path":211,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":212,"description":213,"layout":11,"label":12,"_type":203,"_id":214,"_source":205,"_file":215,"_extension":207},"/design-system/components/media-fullscreen","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","content:design-system:5.components:media-fullscreen.md","design-system/5.components/media-fullscreen.md",{"_path":217,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":218,"description":219,"layout":11,"label":12,"_type":203,"_id":220,"_source":205,"_file":221,"_extension":207},"/design-system/components/media","Media","The Media component is a container that houses media items to use in other components on a page.","content:design-system:5.components:media.md","design-system/5.components/media.md",{},[224,229,470],{"title":225,"_path":226,"icon":227,"layout":228},"Ripple Design System","/","carbon:home","home",{"title":230,"_path":231,"children":232},"Design System","/design-system",[233,249,265,294,328],{"title":234,"_path":235,"children":236},"About","/design-system/about",[237,240,243,246],{"title":238,"_path":239,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":241,"_path":242,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":244,"_path":245,"layout":11},"Support","/design-system/about/getting-support",{"title":247,"_path":248,"layout":11},"Contributing","/design-system/about/contributing",{"title":250,"_path":251,"children":252},"Design","/design-system/design",[253,256,259,262],{"title":254,"_path":255,"layout":11},"Getting started","/design-system/design/getting-started",{"title":257,"_path":258,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":260,"_path":261,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":263,"_path":264,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":266,"_path":267,"children":268},"Develop","/design-system/develop",[269,271,273,276],{"title":254,"_path":270,"layout":11},"/design-system/develop/getting-started",{"title":247,"_path":272,"layout":11},"/design-system/develop/contributing",{"title":274,"_path":275,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":277,"children":278,"layout":11},"/design-system/develop/usage",[279,282,285,288,291],{"title":280,"_path":281,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":283,"_path":284,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":286,"_path":287,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":289,"_path":290,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":292,"_path":293,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":295,"_path":296,"children":297},"Styles","/design-system/styles",[298,301,304,307,310,313,316,319,322,325],{"title":299,"_path":300,"layout":11},"Colour","/design-system/styles/colour",{"title":302,"_path":303,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":305,"_path":306,"layout":11},"Grid","/design-system/styles/grid",{"title":308,"_path":309,"layout":11},"Icons","/design-system/styles/icons",{"title":311,"_path":312,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":314,"_path":315,"layout":11},"Layout","/design-system/styles/layout",{"title":317,"_path":318,"layout":11},"Logo","/design-system/styles/logo",{"title":320,"_path":321,"layout":11},"Motion","/design-system/styles/motion",{"title":323,"_path":324,"layout":11},"Spacing","/design-system/styles/spacing",{"title":326,"_path":327,"layout":11},"Typography","/design-system/styles/typography",{"title":329,"_path":330,"children":331},"Components","/design-system/components",[332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,414,415,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467],{"title":333,"_path":334,"layout":11},"Accordion","/design-system/components/accordion",{"title":336,"_path":337,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":339,"_path":340,"layout":11},"Alert","/design-system/components/alert",{"title":342,"_path":343,"layout":11},"Block quote","/design-system/components/block-quote",{"title":345,"_path":346,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":348,"_path":349,"layout":11},"Button","/design-system/components/button",{"title":351,"_path":352,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":354,"_path":355,"layout":11},"Callout","/design-system/components/callout",{"title":357,"_path":358,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":360,"_path":361,"layout":11},"Card","/design-system/components/card",{"title":363,"_path":364,"layout":11},"Carousel","/design-system/components/carousel",{"title":366,"_path":367,"layout":11},"Category grid","/design-system/components/category-grid",{"title":369,"_path":370,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":372,"_path":373,"layout":11},"Chip","/design-system/components/chip",{"title":375,"_path":376,"layout":11},"Contact us","/design-system/components/contact-us",{"title":378,"_path":379,"layout":11},"Date input","/design-system/components/date-input",{"title":381,"_path":382,"layout":11},"Detail list","/design-system/components/detail-list",{"title":384,"_path":385,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":387,"_path":388,"layout":11},"File","/design-system/components/file",{"title":390,"_path":391,"layout":11},"Footer","/design-system/components/footer",{"title":393,"_path":394,"layout":11},"Form alert","/design-system/components/form-alert",{"title":396,"_path":397,"layout":11},"Form","/design-system/components/form",{"title":399,"_path":400,"layout":11},"Header","/design-system/components/header",{"title":402,"_path":403,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":405,"_path":406,"layout":11},"Input field","/design-system/components/input-field",{"title":408,"_path":409,"layout":11},"Key dates","/design-system/components/key-dates",{"title":411,"_path":412,"layout":11},"Media embed","/design-system/components/media-embed",{"title":212,"_path":211,"layout":11},{"title":9,"_path":5,"layout":11},{"title":218,"_path":217,"layout":11},{"title":417,"_path":418,"layout":11},"Option button","/design-system/components/option-button",{"title":420,"_path":421,"layout":11},"Page action","/design-system/components/page-action",{"title":423,"_path":424,"layout":11},"Pagination","/design-system/components/pagination",{"title":426,"_path":427,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":429,"_path":430,"layout":11},"Profile","/design-system/components/profile",{"title":432,"_path":433,"layout":11},"Radio button","/design-system/components/radio-button",{"title":435,"_path":436,"layout":11},"Related links","/design-system/components/related-links",{"title":438,"_path":439,"layout":11},"Results listing","/design-system/components/results-listing",{"title":441,"_path":442,"layout":11},"Search bar","/design-system/components/search-bar",{"title":444,"_path":445,"layout":11},"Skip link","/design-system/components/skip-link",{"title":447,"_path":448,"layout":11},"Social share","/design-system/components/social-share",{"title":450,"_path":451,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":453,"_path":454,"layout":11},"Table","/design-system/components/table",{"title":456,"_path":457,"layout":11},"Tabs","/design-system/components/tabs",{"title":459,"_path":460,"layout":11},"Tag","/design-system/components/tag",{"title":462,"_path":463,"layout":11},"Text area","/design-system/components/text-area",{"title":465,"_path":466,"layout":11},"Timeline","/design-system/components/timeline",{"title":468,"_path":469,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":471,"_path":472,"children":473,"layout":11},"Ripple Framework","/framework",[474,475,493,515],{"title":471,"_path":472,"layout":11},{"title":476,"_path":477,"children":478},"Key Concepts","/framework/key-concepts",[479,481,484,487,490],{"title":286,"_path":480,"layout":11},"/framework/key-concepts/nuxt",{"title":482,"_path":483,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":485,"_path":486,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":488,"_path":489,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":491,"_path":492,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":494,"_path":495,"children":496},"Guides","/framework/guides",[497,500,503,506,509,512],{"title":498,"_path":499,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":501,"_path":502,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":504,"_path":505,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":507,"_path":508,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":510,"_path":511,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":513,"_path":514,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":516,"_path":517,"layout":11},"Core modules","/framework/core-modules",["Reactive",519],{"module-navigation":520},null,true,"/design-system/components/media-gallery/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/media/index.html b/design-system/components/media/index.html index c85d6fdbe7..7f8c017e71 100644 --- a/design-system/components/media/index.html +++ b/design-system/components/media/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media component is a container that houses media items to use in other components on a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media to communicate and differentiate specific information through visuals.<!--]--></p><p><!--[-->Media items sit within other components such as cards, or a media gallery.<!--]--></p><p><!--[-->Use images if they help users complete a task. Images can make it easier for some people to understand information.<!--]--></p><p><!--[-->Use media to combine visual elements with text. This gives your content context and alignment.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-image--image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-image--image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always get copyright for all media used.<!--]--></li><li><!--[-->Nest media in other components.<!--]--></li><li><!--[-->Choose diverse images that reflect and support the diversity of Victoria.<!--]--></li><li><!--[-->Only media that's relevant to the content.<!--]--></li><li><!--[-->Always include alt text for each media item.<!--]--></li><li><!--[-->Use appropriate resolution for the content.<!--]--></li><li><!--[-->Always include a transcription for all audio content.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use a media item without alt text.<!--]--></li><li><!--[-->Don't use video content without captions.<!--]--></li><li><!--[-->Don't crop an image without a clear focal point.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The ratios you can use for media include:<!--]--></p><ul><!--[--><li><!--[-->1:1<!--]--></li><li><!--[-->4:3<!--]--></li><li><!--[-->16:9<!--]--></li><li><!--[-->21:9<!--]--></li><li><!--[-->3:1<!--]--></li><li><!--[-->avatar (circle).<!--]--></li><!--]--></ul><h3 id="copyright-requirements"><a href="#copyright-requirements"><!--[-->Copyright requirements<!--]--></a></h3><p><!--[-->You must get permission (a licence) to use copyright material. This includes images and text.<!--]--></p><p><!--[-->Some images are available under an open access licence, such as <a href="https://au.creativecommons.net/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Creative Commons<!--]--><!--]--><!----><!--]--></a>. Alt text is also licensed under copyright.<!--]--></p><h3 id="file-resolution"><a href="#file-resolution"><!--[-->File resolution<!--]--></a></h3><p><!--[-->Image resolution must be appropriate for the content.<!--]--></p><p><!--[-->Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information.<!--]--></p><p><!--[-->Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it.<!--]--></p><h3 id="focal-point"><a href="#focal-point"><!--[-->Focal point<!--]--></a></h3><p><!--[-->Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area.<!--]--></p><p><!--[-->Consider cropping smaller images more to keep the impact of the original image.<!--]--></p><h3 id="media-types"><a href="#media-types"><!--[-->Media types<!--]--></a></h3><p><!--[-->Multiple types of media can are supported and used to add meaning to content. These include:<!--]--></p><ul><!--[--><li><!--[-->photographs<!--]--></li><li><!--[-->decorative images<!--]--></li><li><!--[-->charts<!--]--></li><li><!--[-->graphs<!--]--></li><li><!--[-->maps<!--]--></li><li><!--[-->illustrations or drawings<!--]--></li><li><!--[-->icons<!--]--></li><li><!--[-->video<!--]--></li><li><!--[-->audio.<!--]--></li><!--]--></ul><p><!--[-->Make sure you use the correct media type for the content it is supporting.<!--]--></p><h3 id="file-types"><a href="#file-types"><!--[-->File types<!--]--></a></h3><p><!--[-->There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format.<!--]--></p><p><!--[-->The following file types are recommended:<!--]--></p><ul><!--[--><li><!--[-->photographs<ul><!--[--><li><!--[-->jpeg<!--]--></li><li><!--[-->png<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->icons<ul><!--[--><li><!--[-->svg<!--]--></li><li><!--[-->png<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->charts/graphs<ul><!--[--><li><!--[-->svg<!--]--></li><li><!--[-->png<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->video<ul><!--[--><li><!--[-->mp4<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->audio<ul><!--[--><li><!--[-->wav.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><h3 id="alternative-text"><a href="#alternative-text"><!--[-->Alternative text<!--]--></a></h3><p><!--[-->All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG 2.0 Criterion 1.1.1<!--]--><!--]--><!----><!--]--></a> or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the <a href="https://www.vic.gov.au/brand-victoria-guidelines-logos" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Brand Victoria guidelines<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->The <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Web Accessibility initiative alt decision tree<!--]--><!--]--><!----><!--]--></a> also guides you on whether your image needs alt text or not.<!--]--></p><p><!--[-->For purely descriptive images, the alt text attribute instead reads: alt=””.<!--]--></p><h4 id="what-alt-text-does"><a href="#what-alt-text-does"><!--[-->What alt text does<!--]--></a></h4><p><!--[-->Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:<!--]--></p><ul><!--[--><li><!--[-->a screen reader can read the alt text aloud<!--]--></li><li><!--[-->alt text is shown in the place of ‘broken’ or unloaded images on the page.<!--]--></li><!--]--></ul><h4 id="how-to-write-alt-text"><a href="#how-to-write-alt-text"><!--[-->How to write alt text<!--]--></a></h4><p><!--[-->Alt text must serve the equivalent purpose of the image itself, by:<!--]--></p><ul><!--[--><li><!--[-->being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)<!--]--></li><li><!--[-->explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)<!--]--></li><li><!--[-->using normal punctuation that helps users understand the text<!--]--></li><li><!--[-->including the image text in the alt text (for images with text).<!--]--></li><!--]--></ul><p><!--[-->For more guidance on writing alt text, refer to <a href="https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Alt text, captions and titles for images<!--]--><!--]--><!----><!--]--></a> in the Australian Government Style Manual.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media/_payload.json">[{"state":1,"_errors":843,"serverRendered":846,"path":847,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":533,"$sdd-globals":547,"$sdd-navigation":548},{"/design-system/components/media":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":528,"_id":529,"_source":530,"_file":531,"_extension":532},"/design-system/components/media","components",false,"","Media","The Media component is a container that houses media items to use in other components on a page.","page","Core",{"type":14,"children":15,"toc":512},"root",[16,25,31,36,41,46,51,58,98,104,122,126,132,137,170,176,181,197,203,208,213,218,224,229,234,240,245,293,298,304,309,314,391,397,420,434,439,446,451,464,470,475,498],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use media to communicate and differentiate specific information through visuals.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Media items sit within other components such as cards, or a media gallery.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Use images if they help users complete a task. Images can make it easier for some people to understand information.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Use media to combine visual elements with text. This gives your content context and alignment.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"core-containers-image--image",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"when-and-how-to-use",[56],{"type":23,"value":57},"When and how to use",{"type":17,"tag":59,"props":60,"children":61},"ul",{},[62,68,73,78,83,88,93],{"type":17,"tag":63,"props":64,"children":65},"li",{},[66],{"type":23,"value":67},"Always get copyright for all media used.",{"type":17,"tag":63,"props":69,"children":70},{},[71],{"type":23,"value":72},"Nest media in other components.",{"type":17,"tag":63,"props":74,"children":75},{},[76],{"type":23,"value":77},"Choose diverse images that reflect and support the diversity of Victoria.",{"type":17,"tag":63,"props":79,"children":80},{},[81],{"type":23,"value":82},"Only media that's relevant to the content.",{"type":17,"tag":63,"props":84,"children":85},{},[86],{"type":23,"value":87},"Always include alt text for each media item.",{"type":17,"tag":63,"props":89,"children":90},{},[91],{"type":23,"value":92},"Use appropriate resolution for the content.",{"type":17,"tag":63,"props":94,"children":95},{},[96],{"type":23,"value":97},"Always include a transcription for all audio content.",{"type":17,"tag":52,"props":99,"children":101},{"id":100},"when-and-how-not-to-use",[102],{"type":23,"value":103},"When and how not to use",{"type":17,"tag":59,"props":105,"children":106},{},[107,112,117],{"type":17,"tag":63,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don't use a media item without alt text.",{"type":17,"tag":63,"props":113,"children":114},{},[115],{"type":23,"value":116},"Don't use video content without captions.",{"type":17,"tag":63,"props":118,"children":119},{},[120],{"type":23,"value":121},"Don't crop an image without a clear focal point.",{"type":17,"tag":123,"props":124,"children":125},"hr",{},[],{"type":17,"tag":18,"props":127,"children":129},{"id":128},"variants",[130],{"type":23,"value":131},"Variants",{"type":17,"tag":26,"props":133,"children":134},{},[135],{"type":23,"value":136},"The ratios you can use for media include:",{"type":17,"tag":59,"props":138,"children":139},{},[140,145,150,155,160,165],{"type":17,"tag":63,"props":141,"children":142},{},[143],{"type":23,"value":144},"1:1",{"type":17,"tag":63,"props":146,"children":147},{},[148],{"type":23,"value":149},"4:3",{"type":17,"tag":63,"props":151,"children":152},{},[153],{"type":23,"value":154},"16:9",{"type":17,"tag":63,"props":156,"children":157},{},[158],{"type":23,"value":159},"21:9",{"type":17,"tag":63,"props":161,"children":162},{},[163],{"type":23,"value":164},"3:1",{"type":17,"tag":63,"props":166,"children":167},{},[168],{"type":23,"value":169},"avatar (circle).",{"type":17,"tag":52,"props":171,"children":173},{"id":172},"copyright-requirements",[174],{"type":23,"value":175},"Copyright requirements",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"You must get permission (a licence) to use copyright material. This includes images and text.",{"type":17,"tag":26,"props":182,"children":183},{},[184,186,195],{"type":23,"value":185},"Some images are available under an open access licence, such as ",{"type":17,"tag":187,"props":188,"children":192},"a",{"href":189,"rel":190},"https://au.creativecommons.net/",[191],"nofollow",[193],{"type":23,"value":194},"Creative Commons",{"type":23,"value":196},". Alt text is also licensed under copyright.",{"type":17,"tag":52,"props":198,"children":200},{"id":199},"file-resolution",[201],{"type":23,"value":202},"File resolution",{"type":17,"tag":26,"props":204,"children":205},{},[206],{"type":23,"value":207},"Image resolution must be appropriate for the content.",{"type":17,"tag":26,"props":209,"children":210},{},[211],{"type":23,"value":212},"Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information.",{"type":17,"tag":26,"props":214,"children":215},{},[216],{"type":23,"value":217},"Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it.",{"type":17,"tag":52,"props":219,"children":221},{"id":220},"focal-point",[222],{"type":23,"value":223},"Focal point",{"type":17,"tag":26,"props":225,"children":226},{},[227],{"type":23,"value":228},"Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area.",{"type":17,"tag":26,"props":230,"children":231},{},[232],{"type":23,"value":233},"Consider cropping smaller images more to keep the impact of the original image.",{"type":17,"tag":52,"props":235,"children":237},{"id":236},"media-types",[238],{"type":23,"value":239},"Media types",{"type":17,"tag":26,"props":241,"children":242},{},[243],{"type":23,"value":244},"Multiple types of media can are supported and used to add meaning to content. These include:",{"type":17,"tag":59,"props":246,"children":247},{},[248,253,258,263,268,273,278,283,288],{"type":17,"tag":63,"props":249,"children":250},{},[251],{"type":23,"value":252},"photographs",{"type":17,"tag":63,"props":254,"children":255},{},[256],{"type":23,"value":257},"decorative images",{"type":17,"tag":63,"props":259,"children":260},{},[261],{"type":23,"value":262},"charts",{"type":17,"tag":63,"props":264,"children":265},{},[266],{"type":23,"value":267},"graphs",{"type":17,"tag":63,"props":269,"children":270},{},[271],{"type":23,"value":272},"maps",{"type":17,"tag":63,"props":274,"children":275},{},[276],{"type":23,"value":277},"illustrations or drawings",{"type":17,"tag":63,"props":279,"children":280},{},[281],{"type":23,"value":282},"icons",{"type":17,"tag":63,"props":284,"children":285},{},[286],{"type":23,"value":287},"video",{"type":17,"tag":63,"props":289,"children":290},{},[291],{"type":23,"value":292},"audio.",{"type":17,"tag":26,"props":294,"children":295},{},[296],{"type":23,"value":297},"Make sure you use the correct media type for the content it is supporting.",{"type":17,"tag":52,"props":299,"children":301},{"id":300},"file-types",[302],{"type":23,"value":303},"File types",{"type":17,"tag":26,"props":305,"children":306},{},[307],{"type":23,"value":308},"There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format.",{"type":17,"tag":26,"props":310,"children":311},{},[312],{"type":23,"value":313},"The following file types are recommended:",{"type":17,"tag":59,"props":315,"children":316},{},[317,334,350,366,378],{"type":17,"tag":63,"props":318,"children":319},{},[320,321],{"type":23,"value":252},{"type":17,"tag":59,"props":322,"children":323},{},[324,329],{"type":17,"tag":63,"props":325,"children":326},{},[327],{"type":23,"value":328},"jpeg",{"type":17,"tag":63,"props":330,"children":331},{},[332],{"type":23,"value":333},"png",{"type":17,"tag":63,"props":335,"children":336},{},[337,338],{"type":23,"value":282},{"type":17,"tag":59,"props":339,"children":340},{},[341,346],{"type":17,"tag":63,"props":342,"children":343},{},[344],{"type":23,"value":345},"svg",{"type":17,"tag":63,"props":347,"children":348},{},[349],{"type":23,"value":333},{"type":17,"tag":63,"props":351,"children":352},{},[353,355],{"type":23,"value":354},"charts/graphs",{"type":17,"tag":59,"props":356,"children":357},{},[358,362],{"type":17,"tag":63,"props":359,"children":360},{},[361],{"type":23,"value":345},{"type":17,"tag":63,"props":363,"children":364},{},[365],{"type":23,"value":333},{"type":17,"tag":63,"props":367,"children":368},{},[369,370],{"type":23,"value":287},{"type":17,"tag":59,"props":371,"children":372},{},[373],{"type":17,"tag":63,"props":374,"children":375},{},[376],{"type":23,"value":377},"mp4",{"type":17,"tag":63,"props":379,"children":380},{},[381,383],{"type":23,"value":382},"audio",{"type":17,"tag":59,"props":384,"children":385},{},[386],{"type":17,"tag":63,"props":387,"children":388},{},[389],{"type":23,"value":390},"wav.",{"type":17,"tag":52,"props":392,"children":394},{"id":393},"alternative-text",[395],{"type":23,"value":396},"Alternative text",{"type":17,"tag":26,"props":398,"children":399},{},[400,402,409,411,418],{"type":23,"value":401},"All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address ",{"type":17,"tag":187,"props":403,"children":406},{"href":404,"rel":405},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html",[191],[407],{"type":23,"value":408},"WCAG 2.0 Criterion 1.1.1",{"type":23,"value":410}," or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the ",{"type":17,"tag":187,"props":412,"children":415},{"href":413,"rel":414},"https://www.vic.gov.au/brand-victoria-guidelines-logos",[191],[416],{"type":23,"value":417},"Brand Victoria guidelines",{"type":23,"value":419},".",{"type":17,"tag":26,"props":421,"children":422},{},[423,425,432],{"type":23,"value":424},"The ",{"type":17,"tag":187,"props":426,"children":429},{"href":427,"rel":428},"https://www.w3.org/WAI/tutorials/images/decision-tree/",[191],[430],{"type":23,"value":431},"Web Accessibility initiative alt decision tree",{"type":23,"value":433}," also guides you on whether your image needs alt text or not.",{"type":17,"tag":26,"props":435,"children":436},{},[437],{"type":23,"value":438},"For purely descriptive images, the alt text attribute instead reads: alt=””.",{"type":17,"tag":440,"props":441,"children":443},"h4",{"id":442},"what-alt-text-does",[444],{"type":23,"value":445},"What alt text does",{"type":17,"tag":26,"props":447,"children":448},{},[449],{"type":23,"value":450},"Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:",{"type":17,"tag":59,"props":452,"children":453},{},[454,459],{"type":17,"tag":63,"props":455,"children":456},{},[457],{"type":23,"value":458},"a screen reader can read the alt text aloud",{"type":17,"tag":63,"props":460,"children":461},{},[462],{"type":23,"value":463},"alt text is shown in the place of ‘broken’ or unloaded images on the page.",{"type":17,"tag":440,"props":465,"children":467},{"id":466},"how-to-write-alt-text",[468],{"type":23,"value":469},"How to write alt text",{"type":17,"tag":26,"props":471,"children":472},{},[473],{"type":23,"value":474},"Alt text must serve the equivalent purpose of the image itself, by:",{"type":17,"tag":59,"props":476,"children":477},{},[478,483,488,493],{"type":17,"tag":63,"props":479,"children":480},{},[481],{"type":23,"value":482},"being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)",{"type":17,"tag":63,"props":484,"children":485},{},[486],{"type":23,"value":487},"explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)",{"type":17,"tag":63,"props":489,"children":490},{},[491],{"type":23,"value":492},"using normal punctuation that helps users understand the text",{"type":17,"tag":63,"props":494,"children":495},{},[496],{"type":23,"value":497},"including the image text in the alt text (for images with text).",{"type":17,"tag":26,"props":499,"children":500},{},[501,503,510],{"type":23,"value":502},"For more guidance on writing alt text, refer to ",{"type":17,"tag":187,"props":504,"children":507},{"href":505,"rel":506},"https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images",[191],[508],{"type":23,"value":509},"Alt text, captions and titles for images",{"type":23,"value":511}," in the Australian Government Style Manual.",{"title":8,"searchDepth":513,"depth":513,"links":514},2,[515,520],{"id":20,"depth":513,"text":24,"children":516},[517,519],{"id":54,"depth":518,"text":57},3,{"id":100,"depth":518,"text":103},{"id":128,"depth":513,"text":131,"children":521},[522,523,524,525,526,527],{"id":172,"depth":518,"text":175},{"id":199,"depth":518,"text":202},{"id":220,"depth":518,"text":223},{"id":236,"depth":518,"text":239},{"id":300,"depth":518,"text":303},{"id":393,"depth":518,"text":396},"markdown","content:design-system:5.components:media.md","content","design-system/5.components/media.md","md",{"/design-system/components/media":534},[535,541],{"_path":536,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":537,"description":538,"layout":11,"label":12,"_type":528,"_id":539,"_source":530,"_file":540,"_extension":532},"/design-system/components/media-gallery","Media gallery","The Media gallery component is a series of images users can side-scroll through.","content:design-system:5.components:media-gallery.md","design-system/5.components/media-gallery.md",{"_path":542,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":543,"description":544,"layout":11,"label":12,"_type":528,"_id":545,"_source":530,"_file":546,"_extension":532},"/design-system/components/option-button","Option button","The Option button component is a set of buttons to help users filter content.","content:design-system:5.components:option-button.md","design-system/5.components/option-button.md",{},[549,554,795],{"title":550,"_path":551,"icon":552,"layout":553},"Ripple Design System","/","carbon:home","home",{"title":555,"_path":556,"children":557},"Design System","/design-system",[558,574,590,619,653],{"title":559,"_path":560,"children":561},"About","/design-system/about",[562,565,568,571],{"title":563,"_path":564,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":566,"_path":567,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":569,"_path":570,"layout":11},"Support","/design-system/about/getting-support",{"title":572,"_path":573,"layout":11},"Contributing","/design-system/about/contributing",{"title":575,"_path":576,"children":577},"Design","/design-system/design",[578,581,584,587],{"title":579,"_path":580,"layout":11},"Getting started","/design-system/design/getting-started",{"title":582,"_path":583,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":585,"_path":586,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":588,"_path":589,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":591,"_path":592,"children":593},"Develop","/design-system/develop",[594,596,598,601],{"title":579,"_path":595,"layout":11},"/design-system/develop/getting-started",{"title":572,"_path":597,"layout":11},"/design-system/develop/contributing",{"title":599,"_path":600,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":602,"children":603,"layout":11},"/design-system/develop/usage",[604,607,610,613,616],{"title":605,"_path":606,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":608,"_path":609,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":611,"_path":612,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":614,"_path":615,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":617,"_path":618,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":620,"_path":621,"children":622},"Styles","/design-system/styles",[623,626,629,632,635,638,641,644,647,650],{"title":624,"_path":625,"layout":11},"Colour","/design-system/styles/colour",{"title":627,"_path":628,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":630,"_path":631,"layout":11},"Grid","/design-system/styles/grid",{"title":633,"_path":634,"layout":11},"Icons","/design-system/styles/icons",{"title":636,"_path":637,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":639,"_path":640,"layout":11},"Layout","/design-system/styles/layout",{"title":642,"_path":643,"layout":11},"Logo","/design-system/styles/logo",{"title":645,"_path":646,"layout":11},"Motion","/design-system/styles/motion",{"title":648,"_path":649,"layout":11},"Spacing","/design-system/styles/spacing",{"title":651,"_path":652,"layout":11},"Typography","/design-system/styles/typography",{"title":654,"_path":655,"children":656},"Components","/design-system/components",[657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,742,743,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,789,792],{"title":658,"_path":659,"layout":11},"Accordion","/design-system/components/accordion",{"title":661,"_path":662,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":664,"_path":665,"layout":11},"Alert","/design-system/components/alert",{"title":667,"_path":668,"layout":11},"Block quote","/design-system/components/block-quote",{"title":670,"_path":671,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":673,"_path":674,"layout":11},"Button","/design-system/components/button",{"title":676,"_path":677,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":679,"_path":680,"layout":11},"Callout","/design-system/components/callout",{"title":682,"_path":683,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":685,"_path":686,"layout":11},"Card","/design-system/components/card",{"title":688,"_path":689,"layout":11},"Carousel","/design-system/components/carousel",{"title":691,"_path":692,"layout":11},"Category grid","/design-system/components/category-grid",{"title":694,"_path":695,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":697,"_path":698,"layout":11},"Chip","/design-system/components/chip",{"title":700,"_path":701,"layout":11},"Contact us","/design-system/components/contact-us",{"title":703,"_path":704,"layout":11},"Date input","/design-system/components/date-input",{"title":706,"_path":707,"layout":11},"Detail list","/design-system/components/detail-list",{"title":709,"_path":710,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":712,"_path":713,"layout":11},"File","/design-system/components/file",{"title":715,"_path":716,"layout":11},"Footer","/design-system/components/footer",{"title":718,"_path":719,"layout":11},"Form alert","/design-system/components/form-alert",{"title":721,"_path":722,"layout":11},"Form","/design-system/components/form",{"title":724,"_path":725,"layout":11},"Header","/design-system/components/header",{"title":727,"_path":728,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":730,"_path":731,"layout":11},"Input field","/design-system/components/input-field",{"title":733,"_path":734,"layout":11},"Key dates","/design-system/components/key-dates",{"title":736,"_path":737,"layout":11},"Media embed","/design-system/components/media-embed",{"title":739,"_path":740,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":537,"_path":536,"layout":11},{"title":9,"_path":5,"layout":11},{"title":543,"_path":542,"layout":11},{"title":745,"_path":746,"layout":11},"Page action","/design-system/components/page-action",{"title":748,"_path":749,"layout":11},"Pagination","/design-system/components/pagination",{"title":751,"_path":752,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":754,"_path":755,"layout":11},"Profile","/design-system/components/profile",{"title":757,"_path":758,"layout":11},"Radio button","/design-system/components/radio-button",{"title":760,"_path":761,"layout":11},"Related links","/design-system/components/related-links",{"title":763,"_path":764,"layout":11},"Results listing","/design-system/components/results-listing",{"title":766,"_path":767,"layout":11},"Search bar","/design-system/components/search-bar",{"title":769,"_path":770,"layout":11},"Skip link","/design-system/components/skip-link",{"title":772,"_path":773,"layout":11},"Social share","/design-system/components/social-share",{"title":775,"_path":776,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":778,"_path":779,"layout":11},"Table","/design-system/components/table",{"title":781,"_path":782,"layout":11},"Tabs","/design-system/components/tabs",{"title":784,"_path":785,"layout":11},"Tag","/design-system/components/tag",{"title":787,"_path":788,"layout":11},"Text area","/design-system/components/text-area",{"title":790,"_path":791,"layout":11},"Timeline","/design-system/components/timeline",{"title":793,"_path":794,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":796,"_path":797,"children":798,"layout":11},"Ripple Framework","/framework",[799,800,818,840],{"title":796,"_path":797,"layout":11},{"title":801,"_path":802,"children":803},"Key Concepts","/framework/key-concepts",[804,806,809,812,815],{"title":611,"_path":805,"layout":11},"/framework/key-concepts/nuxt",{"title":807,"_path":808,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":810,"_path":811,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":813,"_path":814,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":816,"_path":817,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":819,"_path":820,"children":821},"Guides","/framework/guides",[822,825,828,831,834,837],{"title":823,"_path":824,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":826,"_path":827,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":829,"_path":830,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":832,"_path":833,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":835,"_path":836,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":838,"_path":839,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":841,"_path":842,"layout":11},"Core modules","/framework/core-modules",["Reactive",844],{"module-navigation":845},null,true,"/design-system/components/media/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media component is a container that houses media items to use in other components on a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media to communicate and differentiate specific information through visuals.<!--]--></p><p><!--[-->Media items sit within other components such as cards, or a media gallery.<!--]--></p><p><!--[-->Use images if they help users complete a task. Images can make it easier for some people to understand information.<!--]--></p><p><!--[-->Use media to combine visual elements with text. This gives your content context and alignment.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-image--image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-image--image&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always get copyright for all media used.<!--]--></li><li><!--[-->Nest media in other components.<!--]--></li><li><!--[-->Choose diverse images that reflect and support the diversity of Victoria.<!--]--></li><li><!--[-->Only media that's relevant to the content.<!--]--></li><li><!--[-->Always include alt text for each media item.<!--]--></li><li><!--[-->Use appropriate resolution for the content.<!--]--></li><li><!--[-->Always include a transcription for all audio content.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use a media item without alt text.<!--]--></li><li><!--[-->Don't use video content without captions.<!--]--></li><li><!--[-->Don't crop an image without a clear focal point.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The ratios you can use for media include:<!--]--></p><ul><!--[--><li><!--[-->1:1<!--]--></li><li><!--[-->4:3<!--]--></li><li><!--[-->16:9<!--]--></li><li><!--[-->21:9<!--]--></li><li><!--[-->3:1<!--]--></li><li><!--[-->avatar (circle).<!--]--></li><!--]--></ul><h3 id="copyright-requirements"><a href="#copyright-requirements"><!--[-->Copyright requirements<!--]--></a></h3><p><!--[-->You must get permission (a licence) to use copyright material. This includes images and text.<!--]--></p><p><!--[-->Some images are available under an open access licence, such as <a href="https://au.creativecommons.net/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Creative Commons<!--]--><!--]--><!----><!--]--></a>. Alt text is also licensed under copyright.<!--]--></p><h3 id="file-resolution"><a href="#file-resolution"><!--[-->File resolution<!--]--></a></h3><p><!--[-->Image resolution must be appropriate for the content.<!--]--></p><p><!--[-->Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information.<!--]--></p><p><!--[-->Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it.<!--]--></p><h3 id="focal-point"><a href="#focal-point"><!--[-->Focal point<!--]--></a></h3><p><!--[-->Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area.<!--]--></p><p><!--[-->Consider cropping smaller images more to keep the impact of the original image.<!--]--></p><h3 id="media-types"><a href="#media-types"><!--[-->Media types<!--]--></a></h3><p><!--[-->Multiple types of media can are supported and used to add meaning to content. These include:<!--]--></p><ul><!--[--><li><!--[-->photographs<!--]--></li><li><!--[-->decorative images<!--]--></li><li><!--[-->charts<!--]--></li><li><!--[-->graphs<!--]--></li><li><!--[-->maps<!--]--></li><li><!--[-->illustrations or drawings<!--]--></li><li><!--[-->icons<!--]--></li><li><!--[-->video<!--]--></li><li><!--[-->audio.<!--]--></li><!--]--></ul><p><!--[-->Make sure you use the correct media type for the content it is supporting.<!--]--></p><h3 id="file-types"><a href="#file-types"><!--[-->File types<!--]--></a></h3><p><!--[-->There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format.<!--]--></p><p><!--[-->The following file types are recommended:<!--]--></p><ul><!--[--><li><!--[-->photographs<ul><!--[--><li><!--[-->jpeg<!--]--></li><li><!--[-->png<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->icons<ul><!--[--><li><!--[-->svg<!--]--></li><li><!--[-->png<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->charts/graphs<ul><!--[--><li><!--[-->svg<!--]--></li><li><!--[-->png<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->video<ul><!--[--><li><!--[-->mp4<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->audio<ul><!--[--><li><!--[-->wav.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><h3 id="alternative-text"><a href="#alternative-text"><!--[-->Alternative text<!--]--></a></h3><p><!--[-->All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG 2.0 Criterion 1.1.1<!--]--><!--]--><!----><!--]--></a> or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the <a href="https://www.vic.gov.au/brand-victoria-guidelines-logos" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Brand Victoria guidelines<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->The <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Web Accessibility initiative alt decision tree<!--]--><!--]--><!----><!--]--></a> also guides you on whether your image needs alt text or not.<!--]--></p><p><!--[-->For purely descriptive images, the alt text attribute instead reads: alt=””.<!--]--></p><h4 id="what-alt-text-does"><a href="#what-alt-text-does"><!--[-->What alt text does<!--]--></a></h4><p><!--[-->Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:<!--]--></p><ul><!--[--><li><!--[-->a screen reader can read the alt text aloud<!--]--></li><li><!--[-->alt text is shown in the place of ‘broken’ or unloaded images on the page.<!--]--></li><!--]--></ul><h4 id="how-to-write-alt-text"><a href="#how-to-write-alt-text"><!--[-->How to write alt text<!--]--></a></h4><p><!--[-->Alt text must serve the equivalent purpose of the image itself, by:<!--]--></p><ul><!--[--><li><!--[-->being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)<!--]--></li><li><!--[-->explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)<!--]--></li><li><!--[-->using normal punctuation that helps users understand the text<!--]--></li><li><!--[-->including the image text in the alt text (for images with text).<!--]--></li><!--]--></ul><p><!--[-->For more guidance on writing alt text, refer to <a href="https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Alt text, captions and titles for images<!--]--><!--]--><!----><!--]--></a> in the Australian Government Style Manual.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media/_payload.json">[{"state":1,"_errors":843,"serverRendered":846,"path":847,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":533,"$sdd-globals":547,"$sdd-navigation":548},{"/design-system/components/media":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":528,"_id":529,"_source":530,"_file":531,"_extension":532},"/design-system/components/media","components",false,"","Media","The Media component is a container that houses media items to use in other components on a page.","page","Core",{"type":14,"children":15,"toc":512},"root",[16,25,31,36,41,46,51,58,98,104,122,126,132,137,170,176,181,197,203,208,213,218,224,229,234,240,245,293,298,304,309,314,391,397,420,434,439,446,451,464,470,475,498],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use media to communicate and differentiate specific information through visuals.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Media items sit within other components such as cards, or a media gallery.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Use images if they help users complete a task. Images can make it easier for some people to understand information.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Use media to combine visual elements with text. This gives your content context and alignment.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"core-containers-image--image",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"when-and-how-to-use",[56],{"type":23,"value":57},"When and how to use",{"type":17,"tag":59,"props":60,"children":61},"ul",{},[62,68,73,78,83,88,93],{"type":17,"tag":63,"props":64,"children":65},"li",{},[66],{"type":23,"value":67},"Always get copyright for all media used.",{"type":17,"tag":63,"props":69,"children":70},{},[71],{"type":23,"value":72},"Nest media in other components.",{"type":17,"tag":63,"props":74,"children":75},{},[76],{"type":23,"value":77},"Choose diverse images that reflect and support the diversity of Victoria.",{"type":17,"tag":63,"props":79,"children":80},{},[81],{"type":23,"value":82},"Only media that's relevant to the content.",{"type":17,"tag":63,"props":84,"children":85},{},[86],{"type":23,"value":87},"Always include alt text for each media item.",{"type":17,"tag":63,"props":89,"children":90},{},[91],{"type":23,"value":92},"Use appropriate resolution for the content.",{"type":17,"tag":63,"props":94,"children":95},{},[96],{"type":23,"value":97},"Always include a transcription for all audio content.",{"type":17,"tag":52,"props":99,"children":101},{"id":100},"when-and-how-not-to-use",[102],{"type":23,"value":103},"When and how not to use",{"type":17,"tag":59,"props":105,"children":106},{},[107,112,117],{"type":17,"tag":63,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don't use a media item without alt text.",{"type":17,"tag":63,"props":113,"children":114},{},[115],{"type":23,"value":116},"Don't use video content without captions.",{"type":17,"tag":63,"props":118,"children":119},{},[120],{"type":23,"value":121},"Don't crop an image without a clear focal point.",{"type":17,"tag":123,"props":124,"children":125},"hr",{},[],{"type":17,"tag":18,"props":127,"children":129},{"id":128},"variants",[130],{"type":23,"value":131},"Variants",{"type":17,"tag":26,"props":133,"children":134},{},[135],{"type":23,"value":136},"The ratios you can use for media include:",{"type":17,"tag":59,"props":138,"children":139},{},[140,145,150,155,160,165],{"type":17,"tag":63,"props":141,"children":142},{},[143],{"type":23,"value":144},"1:1",{"type":17,"tag":63,"props":146,"children":147},{},[148],{"type":23,"value":149},"4:3",{"type":17,"tag":63,"props":151,"children":152},{},[153],{"type":23,"value":154},"16:9",{"type":17,"tag":63,"props":156,"children":157},{},[158],{"type":23,"value":159},"21:9",{"type":17,"tag":63,"props":161,"children":162},{},[163],{"type":23,"value":164},"3:1",{"type":17,"tag":63,"props":166,"children":167},{},[168],{"type":23,"value":169},"avatar (circle).",{"type":17,"tag":52,"props":171,"children":173},{"id":172},"copyright-requirements",[174],{"type":23,"value":175},"Copyright requirements",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"You must get permission (a licence) to use copyright material. This includes images and text.",{"type":17,"tag":26,"props":182,"children":183},{},[184,186,195],{"type":23,"value":185},"Some images are available under an open access licence, such as ",{"type":17,"tag":187,"props":188,"children":192},"a",{"href":189,"rel":190},"https://au.creativecommons.net/",[191],"nofollow",[193],{"type":23,"value":194},"Creative Commons",{"type":23,"value":196},". Alt text is also licensed under copyright.",{"type":17,"tag":52,"props":198,"children":200},{"id":199},"file-resolution",[201],{"type":23,"value":202},"File resolution",{"type":17,"tag":26,"props":204,"children":205},{},[206],{"type":23,"value":207},"Image resolution must be appropriate for the content.",{"type":17,"tag":26,"props":209,"children":210},{},[211],{"type":23,"value":212},"Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information.",{"type":17,"tag":26,"props":214,"children":215},{},[216],{"type":23,"value":217},"Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it.",{"type":17,"tag":52,"props":219,"children":221},{"id":220},"focal-point",[222],{"type":23,"value":223},"Focal point",{"type":17,"tag":26,"props":225,"children":226},{},[227],{"type":23,"value":228},"Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area.",{"type":17,"tag":26,"props":230,"children":231},{},[232],{"type":23,"value":233},"Consider cropping smaller images more to keep the impact of the original image.",{"type":17,"tag":52,"props":235,"children":237},{"id":236},"media-types",[238],{"type":23,"value":239},"Media types",{"type":17,"tag":26,"props":241,"children":242},{},[243],{"type":23,"value":244},"Multiple types of media can are supported and used to add meaning to content. These include:",{"type":17,"tag":59,"props":246,"children":247},{},[248,253,258,263,268,273,278,283,288],{"type":17,"tag":63,"props":249,"children":250},{},[251],{"type":23,"value":252},"photographs",{"type":17,"tag":63,"props":254,"children":255},{},[256],{"type":23,"value":257},"decorative images",{"type":17,"tag":63,"props":259,"children":260},{},[261],{"type":23,"value":262},"charts",{"type":17,"tag":63,"props":264,"children":265},{},[266],{"type":23,"value":267},"graphs",{"type":17,"tag":63,"props":269,"children":270},{},[271],{"type":23,"value":272},"maps",{"type":17,"tag":63,"props":274,"children":275},{},[276],{"type":23,"value":277},"illustrations or drawings",{"type":17,"tag":63,"props":279,"children":280},{},[281],{"type":23,"value":282},"icons",{"type":17,"tag":63,"props":284,"children":285},{},[286],{"type":23,"value":287},"video",{"type":17,"tag":63,"props":289,"children":290},{},[291],{"type":23,"value":292},"audio.",{"type":17,"tag":26,"props":294,"children":295},{},[296],{"type":23,"value":297},"Make sure you use the correct media type for the content it is supporting.",{"type":17,"tag":52,"props":299,"children":301},{"id":300},"file-types",[302],{"type":23,"value":303},"File types",{"type":17,"tag":26,"props":305,"children":306},{},[307],{"type":23,"value":308},"There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format.",{"type":17,"tag":26,"props":310,"children":311},{},[312],{"type":23,"value":313},"The following file types are recommended:",{"type":17,"tag":59,"props":315,"children":316},{},[317,334,350,366,378],{"type":17,"tag":63,"props":318,"children":319},{},[320,321],{"type":23,"value":252},{"type":17,"tag":59,"props":322,"children":323},{},[324,329],{"type":17,"tag":63,"props":325,"children":326},{},[327],{"type":23,"value":328},"jpeg",{"type":17,"tag":63,"props":330,"children":331},{},[332],{"type":23,"value":333},"png",{"type":17,"tag":63,"props":335,"children":336},{},[337,338],{"type":23,"value":282},{"type":17,"tag":59,"props":339,"children":340},{},[341,346],{"type":17,"tag":63,"props":342,"children":343},{},[344],{"type":23,"value":345},"svg",{"type":17,"tag":63,"props":347,"children":348},{},[349],{"type":23,"value":333},{"type":17,"tag":63,"props":351,"children":352},{},[353,355],{"type":23,"value":354},"charts/graphs",{"type":17,"tag":59,"props":356,"children":357},{},[358,362],{"type":17,"tag":63,"props":359,"children":360},{},[361],{"type":23,"value":345},{"type":17,"tag":63,"props":363,"children":364},{},[365],{"type":23,"value":333},{"type":17,"tag":63,"props":367,"children":368},{},[369,370],{"type":23,"value":287},{"type":17,"tag":59,"props":371,"children":372},{},[373],{"type":17,"tag":63,"props":374,"children":375},{},[376],{"type":23,"value":377},"mp4",{"type":17,"tag":63,"props":379,"children":380},{},[381,383],{"type":23,"value":382},"audio",{"type":17,"tag":59,"props":384,"children":385},{},[386],{"type":17,"tag":63,"props":387,"children":388},{},[389],{"type":23,"value":390},"wav.",{"type":17,"tag":52,"props":392,"children":394},{"id":393},"alternative-text",[395],{"type":23,"value":396},"Alternative text",{"type":17,"tag":26,"props":398,"children":399},{},[400,402,409,411,418],{"type":23,"value":401},"All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address ",{"type":17,"tag":187,"props":403,"children":406},{"href":404,"rel":405},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html",[191],[407],{"type":23,"value":408},"WCAG 2.0 Criterion 1.1.1",{"type":23,"value":410}," or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the ",{"type":17,"tag":187,"props":412,"children":415},{"href":413,"rel":414},"https://www.vic.gov.au/brand-victoria-guidelines-logos",[191],[416],{"type":23,"value":417},"Brand Victoria guidelines",{"type":23,"value":419},".",{"type":17,"tag":26,"props":421,"children":422},{},[423,425,432],{"type":23,"value":424},"The ",{"type":17,"tag":187,"props":426,"children":429},{"href":427,"rel":428},"https://www.w3.org/WAI/tutorials/images/decision-tree/",[191],[430],{"type":23,"value":431},"Web Accessibility initiative alt decision tree",{"type":23,"value":433}," also guides you on whether your image needs alt text or not.",{"type":17,"tag":26,"props":435,"children":436},{},[437],{"type":23,"value":438},"For purely descriptive images, the alt text attribute instead reads: alt=””.",{"type":17,"tag":440,"props":441,"children":443},"h4",{"id":442},"what-alt-text-does",[444],{"type":23,"value":445},"What alt text does",{"type":17,"tag":26,"props":447,"children":448},{},[449],{"type":23,"value":450},"Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:",{"type":17,"tag":59,"props":452,"children":453},{},[454,459],{"type":17,"tag":63,"props":455,"children":456},{},[457],{"type":23,"value":458},"a screen reader can read the alt text aloud",{"type":17,"tag":63,"props":460,"children":461},{},[462],{"type":23,"value":463},"alt text is shown in the place of ‘broken’ or unloaded images on the page.",{"type":17,"tag":440,"props":465,"children":467},{"id":466},"how-to-write-alt-text",[468],{"type":23,"value":469},"How to write alt text",{"type":17,"tag":26,"props":471,"children":472},{},[473],{"type":23,"value":474},"Alt text must serve the equivalent purpose of the image itself, by:",{"type":17,"tag":59,"props":476,"children":477},{},[478,483,488,493],{"type":17,"tag":63,"props":479,"children":480},{},[481],{"type":23,"value":482},"being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)",{"type":17,"tag":63,"props":484,"children":485},{},[486],{"type":23,"value":487},"explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)",{"type":17,"tag":63,"props":489,"children":490},{},[491],{"type":23,"value":492},"using normal punctuation that helps users understand the text",{"type":17,"tag":63,"props":494,"children":495},{},[496],{"type":23,"value":497},"including the image text in the alt text (for images with text).",{"type":17,"tag":26,"props":499,"children":500},{},[501,503,510],{"type":23,"value":502},"For more guidance on writing alt text, refer to ",{"type":17,"tag":187,"props":504,"children":507},{"href":505,"rel":506},"https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images",[191],[508],{"type":23,"value":509},"Alt text, captions and titles for images",{"type":23,"value":511}," in the Australian Government Style Manual.",{"title":8,"searchDepth":513,"depth":513,"links":514},2,[515,520],{"id":20,"depth":513,"text":24,"children":516},[517,519],{"id":54,"depth":518,"text":57},3,{"id":100,"depth":518,"text":103},{"id":128,"depth":513,"text":131,"children":521},[522,523,524,525,526,527],{"id":172,"depth":518,"text":175},{"id":199,"depth":518,"text":202},{"id":220,"depth":518,"text":223},{"id":236,"depth":518,"text":239},{"id":300,"depth":518,"text":303},{"id":393,"depth":518,"text":396},"markdown","content:design-system:5.components:media.md","content","design-system/5.components/media.md","md",{"/design-system/components/media":534},[535,541],{"_path":536,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":537,"description":538,"layout":11,"label":12,"_type":528,"_id":539,"_source":530,"_file":540,"_extension":532},"/design-system/components/media-gallery","Media gallery","The Media gallery component is a series of images users can side-scroll through.","content:design-system:5.components:media-gallery.md","design-system/5.components/media-gallery.md",{"_path":542,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":543,"description":544,"layout":11,"label":12,"_type":528,"_id":545,"_source":530,"_file":546,"_extension":532},"/design-system/components/option-button","Option button","The Option button component is a set of buttons to help users filter content.","content:design-system:5.components:option-button.md","design-system/5.components/option-button.md",{},[549,554,795],{"title":550,"_path":551,"icon":552,"layout":553},"Ripple Design System","/","carbon:home","home",{"title":555,"_path":556,"children":557},"Design System","/design-system",[558,574,590,619,653],{"title":559,"_path":560,"children":561},"About","/design-system/about",[562,565,568,571],{"title":563,"_path":564,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":566,"_path":567,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":569,"_path":570,"layout":11},"Support","/design-system/about/getting-support",{"title":572,"_path":573,"layout":11},"Contributing","/design-system/about/contributing",{"title":575,"_path":576,"children":577},"Design","/design-system/design",[578,581,584,587],{"title":579,"_path":580,"layout":11},"Getting started","/design-system/design/getting-started",{"title":582,"_path":583,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":585,"_path":586,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":588,"_path":589,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":591,"_path":592,"children":593},"Develop","/design-system/develop",[594,596,598,601],{"title":579,"_path":595,"layout":11},"/design-system/develop/getting-started",{"title":572,"_path":597,"layout":11},"/design-system/develop/contributing",{"title":599,"_path":600,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":602,"children":603,"layout":11},"/design-system/develop/usage",[604,607,610,613,616],{"title":605,"_path":606,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":608,"_path":609,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":611,"_path":612,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":614,"_path":615,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":617,"_path":618,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":620,"_path":621,"children":622},"Styles","/design-system/styles",[623,626,629,632,635,638,641,644,647,650],{"title":624,"_path":625,"layout":11},"Colour","/design-system/styles/colour",{"title":627,"_path":628,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":630,"_path":631,"layout":11},"Grid","/design-system/styles/grid",{"title":633,"_path":634,"layout":11},"Icons","/design-system/styles/icons",{"title":636,"_path":637,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":639,"_path":640,"layout":11},"Layout","/design-system/styles/layout",{"title":642,"_path":643,"layout":11},"Logo","/design-system/styles/logo",{"title":645,"_path":646,"layout":11},"Motion","/design-system/styles/motion",{"title":648,"_path":649,"layout":11},"Spacing","/design-system/styles/spacing",{"title":651,"_path":652,"layout":11},"Typography","/design-system/styles/typography",{"title":654,"_path":655,"children":656},"Components","/design-system/components",[657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,742,743,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,789,792],{"title":658,"_path":659,"layout":11},"Accordion","/design-system/components/accordion",{"title":661,"_path":662,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":664,"_path":665,"layout":11},"Alert","/design-system/components/alert",{"title":667,"_path":668,"layout":11},"Block quote","/design-system/components/block-quote",{"title":670,"_path":671,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":673,"_path":674,"layout":11},"Button","/design-system/components/button",{"title":676,"_path":677,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":679,"_path":680,"layout":11},"Callout","/design-system/components/callout",{"title":682,"_path":683,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":685,"_path":686,"layout":11},"Card","/design-system/components/card",{"title":688,"_path":689,"layout":11},"Carousel","/design-system/components/carousel",{"title":691,"_path":692,"layout":11},"Category grid","/design-system/components/category-grid",{"title":694,"_path":695,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":697,"_path":698,"layout":11},"Chip","/design-system/components/chip",{"title":700,"_path":701,"layout":11},"Contact us","/design-system/components/contact-us",{"title":703,"_path":704,"layout":11},"Date input","/design-system/components/date-input",{"title":706,"_path":707,"layout":11},"Detail list","/design-system/components/detail-list",{"title":709,"_path":710,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":712,"_path":713,"layout":11},"File","/design-system/components/file",{"title":715,"_path":716,"layout":11},"Footer","/design-system/components/footer",{"title":718,"_path":719,"layout":11},"Form alert","/design-system/components/form-alert",{"title":721,"_path":722,"layout":11},"Form","/design-system/components/form",{"title":724,"_path":725,"layout":11},"Header","/design-system/components/header",{"title":727,"_path":728,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":730,"_path":731,"layout":11},"Input field","/design-system/components/input-field",{"title":733,"_path":734,"layout":11},"Key dates","/design-system/components/key-dates",{"title":736,"_path":737,"layout":11},"Media embed","/design-system/components/media-embed",{"title":739,"_path":740,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":537,"_path":536,"layout":11},{"title":9,"_path":5,"layout":11},{"title":543,"_path":542,"layout":11},{"title":745,"_path":746,"layout":11},"Page action","/design-system/components/page-action",{"title":748,"_path":749,"layout":11},"Pagination","/design-system/components/pagination",{"title":751,"_path":752,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":754,"_path":755,"layout":11},"Profile","/design-system/components/profile",{"title":757,"_path":758,"layout":11},"Radio button","/design-system/components/radio-button",{"title":760,"_path":761,"layout":11},"Related links","/design-system/components/related-links",{"title":763,"_path":764,"layout":11},"Results listing","/design-system/components/results-listing",{"title":766,"_path":767,"layout":11},"Search bar","/design-system/components/search-bar",{"title":769,"_path":770,"layout":11},"Skip link","/design-system/components/skip-link",{"title":772,"_path":773,"layout":11},"Social share","/design-system/components/social-share",{"title":775,"_path":776,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":778,"_path":779,"layout":11},"Table","/design-system/components/table",{"title":781,"_path":782,"layout":11},"Tabs","/design-system/components/tabs",{"title":784,"_path":785,"layout":11},"Tag","/design-system/components/tag",{"title":787,"_path":788,"layout":11},"Text area","/design-system/components/text-area",{"title":790,"_path":791,"layout":11},"Timeline","/design-system/components/timeline",{"title":793,"_path":794,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":796,"_path":797,"children":798,"layout":11},"Ripple Framework","/framework",[799,800,818,840],{"title":796,"_path":797,"layout":11},{"title":801,"_path":802,"children":803},"Key Concepts","/framework/key-concepts",[804,806,809,812,815],{"title":611,"_path":805,"layout":11},"/framework/key-concepts/nuxt",{"title":807,"_path":808,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":810,"_path":811,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":813,"_path":814,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":816,"_path":817,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":819,"_path":820,"children":821},"Guides","/framework/guides",[822,825,828,831,834,837],{"title":823,"_path":824,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":826,"_path":827,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":829,"_path":830,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":832,"_path":833,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":835,"_path":836,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":838,"_path":839,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":841,"_path":842,"layout":11},"Core modules","/framework/core-modules",["Reactive",844],{"module-navigation":845},null,true,"/design-system/components/media/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/option-button/index.html b/design-system/components/option-button/index.html index ed6b7a87ac..de4be19281 100644 --- a/design-system/components/option-button/index.html +++ b/design-system/components/option-button/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Option button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Option button component is a set of buttons to help users filter content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use option buttons to show a set of options a user can choose from to filter content or results.<!--]--></p><p><!--[-->The option button component contains labels showing a user how the filter will work.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-option-buttons--squares&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’.<!--]--></p><p><!--[-->Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label.<!--]--></p><p><!--[-->Never preselect an option button on default. Users might miss that a filter has been automatically applied.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Help users filter content or results.<!--]--></li><li><!--[-->Use short labels only.<!--]--></li><li><!--[-->Order labels in alphabetical order to help users scan quickly.<!--]--></li><li><!--[-->Add an ‘apply filter’ button if the option button will be used together with other form elements.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use for a call to action.<!--]--></li><li><!--[-->Don’t use with long content.<!--]--></li><li><!--[-->Never use without a form label.<!--]--></li><li><!--[-->Never preselect an individual option button.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Option buttons have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->custom.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->Default uses the alphabet as a filter in the option buttons.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-option-buttons--squares&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="custom"><a href="#custom"><!--[-->Custom<!--]--></a></h3><p><!--[-->The custom variant lets you create your own button labels as a filter.<!--]--></p><p><!--[-->These labels must clearly tell the user what filter will be applied.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-option-buttons--fluid-widths&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--fluid-widths&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-option-buttons--squares&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/option-button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/option-button/_payload.json">[{"state":1,"_errors":574,"serverRendered":577,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":266,"$sdd-globals":280,"$sdd-navigation":281},{"/design-system/components/option-button":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":261,"_id":262,"_source":263,"_file":264,"_extension":265},"/design-system/components/option-button","components",false,"","Option button","The Option button component is a set of buttons to help users filter content.","page","Core",{"type":14,"children":15,"toc":246},"root",[16,25,31,36,41,48,53,58,63,69,94,100,123,127,133,138,151,156,161,164,170,175,180,184,187,193,198,205,227,230,236,241],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use option buttons to show a set of options a user can choose from to filter content or results.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"The option button component contains labels showing a user how the filter will work.",{"type":17,"tag":37,"props":38,"children":40},"docs-example",{"id":39},"forms-option-buttons--squares",[],{"type":17,"tag":42,"props":43,"children":45},"h3",{"id":44},"how-this-component-works",[46],{"type":23,"value":47},"How this component works",{"type":17,"tag":26,"props":49,"children":50},{},[51],{"type":23,"value":52},"You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’.",{"type":17,"tag":26,"props":54,"children":55},{},[56],{"type":23,"value":57},"Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label.",{"type":17,"tag":26,"props":59,"children":60},{},[61],{"type":23,"value":62},"Never preselect an option button on default. Users might miss that a filter has been automatically applied.",{"type":17,"tag":42,"props":64,"children":66},{"id":65},"when-and-how-to-use",[67],{"type":23,"value":68},"When and how to use",{"type":17,"tag":70,"props":71,"children":72},"ul",{},[73,79,84,89],{"type":17,"tag":74,"props":75,"children":76},"li",{},[77],{"type":23,"value":78},"Help users filter content or results.",{"type":17,"tag":74,"props":80,"children":81},{},[82],{"type":23,"value":83},"Use short labels only.",{"type":17,"tag":74,"props":85,"children":86},{},[87],{"type":23,"value":88},"Order labels in alphabetical order to help users scan quickly.",{"type":17,"tag":74,"props":90,"children":91},{},[92],{"type":23,"value":93},"Add an ‘apply filter’ button if the option button will be used together with other form elements.",{"type":17,"tag":42,"props":95,"children":97},{"id":96},"when-and-how-not-to-use",[98],{"type":23,"value":99},"When and how not to use",{"type":17,"tag":70,"props":101,"children":102},{},[103,108,113,118],{"type":17,"tag":74,"props":104,"children":105},{},[106],{"type":23,"value":107},"Don’t use for a call to action.",{"type":17,"tag":74,"props":109,"children":110},{},[111],{"type":23,"value":112},"Don’t use with long content.",{"type":17,"tag":74,"props":114,"children":115},{},[116],{"type":23,"value":117},"Never use without a form label.",{"type":17,"tag":74,"props":119,"children":120},{},[121],{"type":23,"value":122},"Never preselect an individual option button.",{"type":17,"tag":124,"props":125,"children":126},"hr",{},[],{"type":17,"tag":18,"props":128,"children":130},{"id":129},"variants",[131],{"type":23,"value":132},"Variants",{"type":17,"tag":26,"props":134,"children":135},{},[136],{"type":23,"value":137},"Option buttons have 2 variants:",{"type":17,"tag":70,"props":139,"children":140},{},[141,146],{"type":17,"tag":74,"props":142,"children":143},{},[144],{"type":23,"value":145},"default",{"type":17,"tag":74,"props":147,"children":148},{},[149],{"type":23,"value":150},"custom.",{"type":17,"tag":42,"props":152,"children":153},{"id":145},[154],{"type":23,"value":155},"Default",{"type":17,"tag":26,"props":157,"children":158},{},[159],{"type":23,"value":160},"Default uses the alphabet as a filter in the option buttons.",{"type":17,"tag":37,"props":162,"children":163},{"id":39},[],{"type":17,"tag":42,"props":165,"children":167},{"id":166},"custom",[168],{"type":23,"value":169},"Custom",{"type":17,"tag":26,"props":171,"children":172},{},[173],{"type":23,"value":174},"The custom variant lets you create your own button labels as a filter.",{"type":17,"tag":26,"props":176,"children":177},{},[178],{"type":23,"value":179},"These labels must clearly tell the user what filter will be applied.",{"type":17,"tag":37,"props":181,"children":183},{"id":182},"forms-option-buttons--fluid-widths",[],{"type":17,"tag":124,"props":185,"children":186},{},[],{"type":17,"tag":18,"props":188,"children":190},{"id":189},"theming",[191],{"type":23,"value":192},"Theming",{"type":17,"tag":26,"props":194,"children":195},{},[196],{"type":23,"value":197},"Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":199,"props":200,"children":201},"docs-theme-chooser",{},[202],{"type":17,"tag":37,"props":203,"children":204},{"id":39},[],{"type":17,"tag":26,"props":206,"children":207},{},[208,210,217,219,225],{"type":23,"value":209},"To create your own theme see ",{"type":17,"tag":211,"props":212,"children":214},"a",{"href":213},"/design-system/design/theming-guidance-for-designers",[215],{"type":23,"value":216},"theming guidance for designers",{"type":23,"value":218}," or ",{"type":17,"tag":211,"props":220,"children":222},{"href":221},"/design-system/develop/theming",[223],{"type":23,"value":224},"theming guidance for developers",{"type":23,"value":226},".",{"type":17,"tag":124,"props":228,"children":229},{},[],{"type":17,"tag":18,"props":231,"children":233},{"id":232},"rationale",[234],{"type":23,"value":235},"Rationale",{"type":17,"tag":26,"props":237,"children":238},{},[239],{"type":23,"value":240},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":242,"children":243},{},[244],{"type":23,"value":245},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":247,"depth":247,"links":248},2,[249,255,259,260],{"id":20,"depth":247,"text":24,"children":250},[251,253,254],{"id":44,"depth":252,"text":47},3,{"id":65,"depth":252,"text":68},{"id":96,"depth":252,"text":99},{"id":129,"depth":247,"text":132,"children":256},[257,258],{"id":145,"depth":252,"text":155},{"id":166,"depth":252,"text":169},{"id":189,"depth":247,"text":192},{"id":232,"depth":247,"text":235},"markdown","content:design-system:5.components:option-button.md","content","design-system/5.components/option-button.md","md",{"/design-system/components/option-button":267},[268,274],{"_path":269,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":270,"description":271,"layout":11,"label":12,"_type":261,"_id":272,"_source":263,"_file":273,"_extension":265},"/design-system/components/media","Media","The Media component is a container that houses media items to use in other components on a page.","content:design-system:5.components:media.md","design-system/5.components/media.md",{"_path":275,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":276,"description":277,"layout":11,"label":12,"_type":261,"_id":278,"_source":263,"_file":279,"_extension":265},"/design-system/components/page-action","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","content:design-system:5.components:page-action.md","design-system/5.components/page-action.md",{},[282,287,526],{"title":283,"_path":284,"icon":285,"layout":286},"Ripple Design System","/","carbon:home","home",{"title":288,"_path":289,"children":290},"Design System","/design-system",[291,307,322,350,384],{"title":292,"_path":293,"children":294},"About","/design-system/about",[295,298,301,304],{"title":296,"_path":297,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":299,"_path":300,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":302,"_path":303,"layout":11},"Support","/design-system/about/getting-support",{"title":305,"_path":306,"layout":11},"Contributing","/design-system/about/contributing",{"title":308,"_path":309,"children":310},"Design","/design-system/design",[311,314,317,320],{"title":312,"_path":313,"layout":11},"Getting started","/design-system/design/getting-started",{"title":315,"_path":316,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":318,"_path":319,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":321,"_path":213,"layout":11},"Theming guidance for designers",{"title":323,"_path":324,"children":325},"Develop","/design-system/develop",[326,328,330,332],{"title":312,"_path":327,"layout":11},"/design-system/develop/getting-started",{"title":305,"_path":329,"layout":11},"/design-system/develop/contributing",{"title":331,"_path":221,"layout":11},"Theme and brand application",{"title":24,"_path":333,"children":334,"layout":11},"/design-system/develop/usage",[335,338,341,344,347],{"title":336,"_path":337,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":339,"_path":340,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":342,"_path":343,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":345,"_path":346,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":348,"_path":349,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":351,"_path":352,"children":353},"Styles","/design-system/styles",[354,357,360,363,366,369,372,375,378,381],{"title":355,"_path":356,"layout":11},"Colour","/design-system/styles/colour",{"title":358,"_path":359,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":361,"_path":362,"layout":11},"Grid","/design-system/styles/grid",{"title":364,"_path":365,"layout":11},"Icons","/design-system/styles/icons",{"title":367,"_path":368,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":370,"_path":371,"layout":11},"Layout","/design-system/styles/layout",{"title":373,"_path":374,"layout":11},"Logo","/design-system/styles/logo",{"title":376,"_path":377,"layout":11},"Motion","/design-system/styles/motion",{"title":379,"_path":380,"layout":11},"Spacing","/design-system/styles/spacing",{"title":382,"_path":383,"layout":11},"Typography","/design-system/styles/typography",{"title":385,"_path":386,"children":387},"Components","/design-system/components",[388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,476,477,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523],{"title":389,"_path":390,"layout":11},"Accordion","/design-system/components/accordion",{"title":392,"_path":393,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":395,"_path":396,"layout":11},"Alert","/design-system/components/alert",{"title":398,"_path":399,"layout":11},"Block quote","/design-system/components/block-quote",{"title":401,"_path":402,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":404,"_path":405,"layout":11},"Button","/design-system/components/button",{"title":407,"_path":408,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":410,"_path":411,"layout":11},"Callout","/design-system/components/callout",{"title":413,"_path":414,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":416,"_path":417,"layout":11},"Card","/design-system/components/card",{"title":419,"_path":420,"layout":11},"Carousel","/design-system/components/carousel",{"title":422,"_path":423,"layout":11},"Category grid","/design-system/components/category-grid",{"title":425,"_path":426,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":428,"_path":429,"layout":11},"Chip","/design-system/components/chip",{"title":431,"_path":432,"layout":11},"Contact us","/design-system/components/contact-us",{"title":434,"_path":435,"layout":11},"Date input","/design-system/components/date-input",{"title":437,"_path":438,"layout":11},"Detail list","/design-system/components/detail-list",{"title":440,"_path":441,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":443,"_path":444,"layout":11},"File","/design-system/components/file",{"title":446,"_path":447,"layout":11},"Footer","/design-system/components/footer",{"title":449,"_path":450,"layout":11},"Form alert","/design-system/components/form-alert",{"title":452,"_path":453,"layout":11},"Form","/design-system/components/form",{"title":455,"_path":456,"layout":11},"Header","/design-system/components/header",{"title":458,"_path":459,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":461,"_path":462,"layout":11},"Input field","/design-system/components/input-field",{"title":464,"_path":465,"layout":11},"Key dates","/design-system/components/key-dates",{"title":467,"_path":468,"layout":11},"Media embed","/design-system/components/media-embed",{"title":470,"_path":471,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":473,"_path":474,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":270,"_path":269,"layout":11},{"title":9,"_path":5,"layout":11},{"title":276,"_path":275,"layout":11},{"title":479,"_path":480,"layout":11},"Pagination","/design-system/components/pagination",{"title":482,"_path":483,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":485,"_path":486,"layout":11},"Profile","/design-system/components/profile",{"title":488,"_path":489,"layout":11},"Radio button","/design-system/components/radio-button",{"title":491,"_path":492,"layout":11},"Related links","/design-system/components/related-links",{"title":494,"_path":495,"layout":11},"Results listing","/design-system/components/results-listing",{"title":497,"_path":498,"layout":11},"Search bar","/design-system/components/search-bar",{"title":500,"_path":501,"layout":11},"Skip link","/design-system/components/skip-link",{"title":503,"_path":504,"layout":11},"Social share","/design-system/components/social-share",{"title":506,"_path":507,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":509,"_path":510,"layout":11},"Table","/design-system/components/table",{"title":512,"_path":513,"layout":11},"Tabs","/design-system/components/tabs",{"title":515,"_path":516,"layout":11},"Tag","/design-system/components/tag",{"title":518,"_path":519,"layout":11},"Text area","/design-system/components/text-area",{"title":521,"_path":522,"layout":11},"Timeline","/design-system/components/timeline",{"title":524,"_path":525,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":527,"_path":528,"children":529,"layout":11},"Ripple Framework","/framework",[530,531,549,571],{"title":527,"_path":528,"layout":11},{"title":532,"_path":533,"children":534},"Key Concepts","/framework/key-concepts",[535,537,540,543,546],{"title":342,"_path":536,"layout":11},"/framework/key-concepts/nuxt",{"title":538,"_path":539,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":541,"_path":542,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":544,"_path":545,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":547,"_path":548,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":550,"_path":551,"children":552},"Guides","/framework/guides",[553,556,559,562,565,568],{"title":554,"_path":555,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":557,"_path":558,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":560,"_path":561,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":563,"_path":564,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":566,"_path":567,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":569,"_path":570,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":572,"_path":573,"layout":11},"Core modules","/framework/core-modules",["Reactive",575],{"module-navigation":576},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Option button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Option button component is a set of buttons to help users filter content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use option buttons to show a set of options a user can choose from to filter content or results.<!--]--></p><p><!--[-->The option button component contains labels showing a user how the filter will work.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-option-buttons--squares&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’.<!--]--></p><p><!--[-->Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label.<!--]--></p><p><!--[-->Never preselect an option button on default. Users might miss that a filter has been automatically applied.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Help users filter content or results.<!--]--></li><li><!--[-->Use short labels only.<!--]--></li><li><!--[-->Order labels in alphabetical order to help users scan quickly.<!--]--></li><li><!--[-->Add an ‘apply filter’ button if the option button will be used together with other form elements.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t use for a call to action.<!--]--></li><li><!--[-->Don’t use with long content.<!--]--></li><li><!--[-->Never use without a form label.<!--]--></li><li><!--[-->Never preselect an individual option button.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Option buttons have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->custom.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->Default uses the alphabet as a filter in the option buttons.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-option-buttons--squares&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="custom"><a href="#custom"><!--[-->Custom<!--]--></a></h3><p><!--[-->The custom variant lets you create your own button labels as a filter.<!--]--></p><p><!--[-->These labels must clearly tell the user what filter will be applied.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-option-buttons--fluid-widths&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--fluid-widths&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-option-buttons--squares&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/option-button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/option-button/_payload.json">[{"state":1,"_errors":574,"serverRendered":577,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":266,"$sdd-globals":280,"$sdd-navigation":281},{"/design-system/components/option-button":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":261,"_id":262,"_source":263,"_file":264,"_extension":265},"/design-system/components/option-button","components",false,"","Option button","The Option button component is a set of buttons to help users filter content.","page","Core",{"type":14,"children":15,"toc":246},"root",[16,25,31,36,41,48,53,58,63,69,94,100,123,127,133,138,151,156,161,164,170,175,180,184,187,193,198,205,227,230,236,241],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use option buttons to show a set of options a user can choose from to filter content or results.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"The option button component contains labels showing a user how the filter will work.",{"type":17,"tag":37,"props":38,"children":40},"docs-example",{"id":39},"forms-option-buttons--squares",[],{"type":17,"tag":42,"props":43,"children":45},"h3",{"id":44},"how-this-component-works",[46],{"type":23,"value":47},"How this component works",{"type":17,"tag":26,"props":49,"children":50},{},[51],{"type":23,"value":52},"You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’.",{"type":17,"tag":26,"props":54,"children":55},{},[56],{"type":23,"value":57},"Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label.",{"type":17,"tag":26,"props":59,"children":60},{},[61],{"type":23,"value":62},"Never preselect an option button on default. Users might miss that a filter has been automatically applied.",{"type":17,"tag":42,"props":64,"children":66},{"id":65},"when-and-how-to-use",[67],{"type":23,"value":68},"When and how to use",{"type":17,"tag":70,"props":71,"children":72},"ul",{},[73,79,84,89],{"type":17,"tag":74,"props":75,"children":76},"li",{},[77],{"type":23,"value":78},"Help users filter content or results.",{"type":17,"tag":74,"props":80,"children":81},{},[82],{"type":23,"value":83},"Use short labels only.",{"type":17,"tag":74,"props":85,"children":86},{},[87],{"type":23,"value":88},"Order labels in alphabetical order to help users scan quickly.",{"type":17,"tag":74,"props":90,"children":91},{},[92],{"type":23,"value":93},"Add an ‘apply filter’ button if the option button will be used together with other form elements.",{"type":17,"tag":42,"props":95,"children":97},{"id":96},"when-and-how-not-to-use",[98],{"type":23,"value":99},"When and how not to use",{"type":17,"tag":70,"props":101,"children":102},{},[103,108,113,118],{"type":17,"tag":74,"props":104,"children":105},{},[106],{"type":23,"value":107},"Don’t use for a call to action.",{"type":17,"tag":74,"props":109,"children":110},{},[111],{"type":23,"value":112},"Don’t use with long content.",{"type":17,"tag":74,"props":114,"children":115},{},[116],{"type":23,"value":117},"Never use without a form label.",{"type":17,"tag":74,"props":119,"children":120},{},[121],{"type":23,"value":122},"Never preselect an individual option button.",{"type":17,"tag":124,"props":125,"children":126},"hr",{},[],{"type":17,"tag":18,"props":128,"children":130},{"id":129},"variants",[131],{"type":23,"value":132},"Variants",{"type":17,"tag":26,"props":134,"children":135},{},[136],{"type":23,"value":137},"Option buttons have 2 variants:",{"type":17,"tag":70,"props":139,"children":140},{},[141,146],{"type":17,"tag":74,"props":142,"children":143},{},[144],{"type":23,"value":145},"default",{"type":17,"tag":74,"props":147,"children":148},{},[149],{"type":23,"value":150},"custom.",{"type":17,"tag":42,"props":152,"children":153},{"id":145},[154],{"type":23,"value":155},"Default",{"type":17,"tag":26,"props":157,"children":158},{},[159],{"type":23,"value":160},"Default uses the alphabet as a filter in the option buttons.",{"type":17,"tag":37,"props":162,"children":163},{"id":39},[],{"type":17,"tag":42,"props":165,"children":167},{"id":166},"custom",[168],{"type":23,"value":169},"Custom",{"type":17,"tag":26,"props":171,"children":172},{},[173],{"type":23,"value":174},"The custom variant lets you create your own button labels as a filter.",{"type":17,"tag":26,"props":176,"children":177},{},[178],{"type":23,"value":179},"These labels must clearly tell the user what filter will be applied.",{"type":17,"tag":37,"props":181,"children":183},{"id":182},"forms-option-buttons--fluid-widths",[],{"type":17,"tag":124,"props":185,"children":186},{},[],{"type":17,"tag":18,"props":188,"children":190},{"id":189},"theming",[191],{"type":23,"value":192},"Theming",{"type":17,"tag":26,"props":194,"children":195},{},[196],{"type":23,"value":197},"Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":199,"props":200,"children":201},"docs-theme-chooser",{},[202],{"type":17,"tag":37,"props":203,"children":204},{"id":39},[],{"type":17,"tag":26,"props":206,"children":207},{},[208,210,217,219,225],{"type":23,"value":209},"To create your own theme see ",{"type":17,"tag":211,"props":212,"children":214},"a",{"href":213},"/design-system/design/theming-guidance-for-designers",[215],{"type":23,"value":216},"theming guidance for designers",{"type":23,"value":218}," or ",{"type":17,"tag":211,"props":220,"children":222},{"href":221},"/design-system/develop/theming",[223],{"type":23,"value":224},"theming guidance for developers",{"type":23,"value":226},".",{"type":17,"tag":124,"props":228,"children":229},{},[],{"type":17,"tag":18,"props":231,"children":233},{"id":232},"rationale",[234],{"type":23,"value":235},"Rationale",{"type":17,"tag":26,"props":237,"children":238},{},[239],{"type":23,"value":240},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":242,"children":243},{},[244],{"type":23,"value":245},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":247,"depth":247,"links":248},2,[249,255,259,260],{"id":20,"depth":247,"text":24,"children":250},[251,253,254],{"id":44,"depth":252,"text":47},3,{"id":65,"depth":252,"text":68},{"id":96,"depth":252,"text":99},{"id":129,"depth":247,"text":132,"children":256},[257,258],{"id":145,"depth":252,"text":155},{"id":166,"depth":252,"text":169},{"id":189,"depth":247,"text":192},{"id":232,"depth":247,"text":235},"markdown","content:design-system:5.components:option-button.md","content","design-system/5.components/option-button.md","md",{"/design-system/components/option-button":267},[268,274],{"_path":269,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":270,"description":271,"layout":11,"label":12,"_type":261,"_id":272,"_source":263,"_file":273,"_extension":265},"/design-system/components/media","Media","The Media component is a container that houses media items to use in other components on a page.","content:design-system:5.components:media.md","design-system/5.components/media.md",{"_path":275,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":276,"description":277,"layout":11,"label":12,"_type":261,"_id":278,"_source":263,"_file":279,"_extension":265},"/design-system/components/page-action","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","content:design-system:5.components:page-action.md","design-system/5.components/page-action.md",{},[282,287,526],{"title":283,"_path":284,"icon":285,"layout":286},"Ripple Design System","/","carbon:home","home",{"title":288,"_path":289,"children":290},"Design System","/design-system",[291,307,322,350,384],{"title":292,"_path":293,"children":294},"About","/design-system/about",[295,298,301,304],{"title":296,"_path":297,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":299,"_path":300,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":302,"_path":303,"layout":11},"Support","/design-system/about/getting-support",{"title":305,"_path":306,"layout":11},"Contributing","/design-system/about/contributing",{"title":308,"_path":309,"children":310},"Design","/design-system/design",[311,314,317,320],{"title":312,"_path":313,"layout":11},"Getting started","/design-system/design/getting-started",{"title":315,"_path":316,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":318,"_path":319,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":321,"_path":213,"layout":11},"Theming guidance for designers",{"title":323,"_path":324,"children":325},"Develop","/design-system/develop",[326,328,330,332],{"title":312,"_path":327,"layout":11},"/design-system/develop/getting-started",{"title":305,"_path":329,"layout":11},"/design-system/develop/contributing",{"title":331,"_path":221,"layout":11},"Theme and brand application",{"title":24,"_path":333,"children":334,"layout":11},"/design-system/develop/usage",[335,338,341,344,347],{"title":336,"_path":337,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":339,"_path":340,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":342,"_path":343,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":345,"_path":346,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":348,"_path":349,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":351,"_path":352,"children":353},"Styles","/design-system/styles",[354,357,360,363,366,369,372,375,378,381],{"title":355,"_path":356,"layout":11},"Colour","/design-system/styles/colour",{"title":358,"_path":359,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":361,"_path":362,"layout":11},"Grid","/design-system/styles/grid",{"title":364,"_path":365,"layout":11},"Icons","/design-system/styles/icons",{"title":367,"_path":368,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":370,"_path":371,"layout":11},"Layout","/design-system/styles/layout",{"title":373,"_path":374,"layout":11},"Logo","/design-system/styles/logo",{"title":376,"_path":377,"layout":11},"Motion","/design-system/styles/motion",{"title":379,"_path":380,"layout":11},"Spacing","/design-system/styles/spacing",{"title":382,"_path":383,"layout":11},"Typography","/design-system/styles/typography",{"title":385,"_path":386,"children":387},"Components","/design-system/components",[388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,476,477,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523],{"title":389,"_path":390,"layout":11},"Accordion","/design-system/components/accordion",{"title":392,"_path":393,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":395,"_path":396,"layout":11},"Alert","/design-system/components/alert",{"title":398,"_path":399,"layout":11},"Block quote","/design-system/components/block-quote",{"title":401,"_path":402,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":404,"_path":405,"layout":11},"Button","/design-system/components/button",{"title":407,"_path":408,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":410,"_path":411,"layout":11},"Callout","/design-system/components/callout",{"title":413,"_path":414,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":416,"_path":417,"layout":11},"Card","/design-system/components/card",{"title":419,"_path":420,"layout":11},"Carousel","/design-system/components/carousel",{"title":422,"_path":423,"layout":11},"Category grid","/design-system/components/category-grid",{"title":425,"_path":426,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":428,"_path":429,"layout":11},"Chip","/design-system/components/chip",{"title":431,"_path":432,"layout":11},"Contact us","/design-system/components/contact-us",{"title":434,"_path":435,"layout":11},"Date input","/design-system/components/date-input",{"title":437,"_path":438,"layout":11},"Detail list","/design-system/components/detail-list",{"title":440,"_path":441,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":443,"_path":444,"layout":11},"File","/design-system/components/file",{"title":446,"_path":447,"layout":11},"Footer","/design-system/components/footer",{"title":449,"_path":450,"layout":11},"Form alert","/design-system/components/form-alert",{"title":452,"_path":453,"layout":11},"Form","/design-system/components/form",{"title":455,"_path":456,"layout":11},"Header","/design-system/components/header",{"title":458,"_path":459,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":461,"_path":462,"layout":11},"Input field","/design-system/components/input-field",{"title":464,"_path":465,"layout":11},"Key dates","/design-system/components/key-dates",{"title":467,"_path":468,"layout":11},"Media embed","/design-system/components/media-embed",{"title":470,"_path":471,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":473,"_path":474,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":270,"_path":269,"layout":11},{"title":9,"_path":5,"layout":11},{"title":276,"_path":275,"layout":11},{"title":479,"_path":480,"layout":11},"Pagination","/design-system/components/pagination",{"title":482,"_path":483,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":485,"_path":486,"layout":11},"Profile","/design-system/components/profile",{"title":488,"_path":489,"layout":11},"Radio button","/design-system/components/radio-button",{"title":491,"_path":492,"layout":11},"Related links","/design-system/components/related-links",{"title":494,"_path":495,"layout":11},"Results listing","/design-system/components/results-listing",{"title":497,"_path":498,"layout":11},"Search bar","/design-system/components/search-bar",{"title":500,"_path":501,"layout":11},"Skip link","/design-system/components/skip-link",{"title":503,"_path":504,"layout":11},"Social share","/design-system/components/social-share",{"title":506,"_path":507,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":509,"_path":510,"layout":11},"Table","/design-system/components/table",{"title":512,"_path":513,"layout":11},"Tabs","/design-system/components/tabs",{"title":515,"_path":516,"layout":11},"Tag","/design-system/components/tag",{"title":518,"_path":519,"layout":11},"Text area","/design-system/components/text-area",{"title":521,"_path":522,"layout":11},"Timeline","/design-system/components/timeline",{"title":524,"_path":525,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":527,"_path":528,"children":529,"layout":11},"Ripple Framework","/framework",[530,531,549,571],{"title":527,"_path":528,"layout":11},{"title":532,"_path":533,"children":534},"Key Concepts","/framework/key-concepts",[535,537,540,543,546],{"title":342,"_path":536,"layout":11},"/framework/key-concepts/nuxt",{"title":538,"_path":539,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":541,"_path":542,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":544,"_path":545,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":547,"_path":548,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":550,"_path":551,"children":552},"Guides","/framework/guides",[553,556,559,562,565,568],{"title":554,"_path":555,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":557,"_path":558,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":560,"_path":561,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":563,"_path":564,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":566,"_path":567,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":569,"_path":570,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":572,"_path":573,"layout":11},"Core modules","/framework/core-modules",["Reactive",575],{"module-navigation":576},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/page-action/index.html b/design-system/components/page-action/index.html index f12c8fa74d..268bb19aea 100644 --- a/design-system/components/page-action/index.html +++ b/design-system/components/page-action/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Page action</h1><p class="rpl-type-p-large" data-v-3163c6df>The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the Page action component to let users print or download pages and content.<!--]--></p><p><!--[-->Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document.<!--]--></p><p><!--[-->The component displays a combination of page-level actions.<!--]--></p><ul><!--[--><li><!--[-->Print page: prints the page a user is on.<!--]--></li><li><!--[-->Print full document: prints all pages in a publication or document, not only the page the user is on.<!--]--></li><li><!--[-->Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content.<!--]--></li><!--]--></ul><p><!--[-->Never use page actions for anything other than the above. Don't use it for links.<!--]--></p><p><!--[-->The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-page-action--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-page-action--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only use in a page's sidebar section.<!--]--></li><li><!--[-->Use as the first component in the sidebar, above the vertical navigation.<!--]--></li><li><!--[-->Use with or without one or more documents.<!--]--></li><li><!--[-->Include metadata with uploaded documents.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use:<ul><!--[--><li><!--[-->in the content area of a page<!--]--></li><li><!--[-->with a document that has content different to the page's content<!--]--></li><li><!--[-->for any other user actions.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Page action uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons, to indicate a possible action to users<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-page-action--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-page-action--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/page-action.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/page-action/_payload.json">[{"state":1,"_errors":521,"serverRendered":524,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":211,"$sdd-globals":225,"$sdd-navigation":226},{"/design-system/components/page-action":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":206,"_id":207,"_source":208,"_file":209,"_extension":210},"/design-system/components/page-action","components",false,"","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","page","Core",{"type":14,"children":15,"toc":197},"root",[16,25,31,36,41,61,66,71,76,83,106,112,138,142,148,153,166,173],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the Page action component to let users print or download pages and content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"The component displays a combination of page-level actions.",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51,56],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"Print page: prints the page a user is on.",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"Print full document: prints all pages in a publication or document, not only the page the user is on.",{"type":17,"tag":46,"props":57,"children":58},{},[59],{"type":23,"value":60},"Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"Never use page actions for anything other than the above. Don't use it for links.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system.",{"type":17,"tag":72,"props":73,"children":75},"docs-example",{"id":74},"core-containers-page-action--default-story",[],{"type":17,"tag":77,"props":78,"children":80},"h3",{"id":79},"when-and-how-to-use",[81],{"type":23,"value":82},"When and how to use",{"type":17,"tag":42,"props":84,"children":85},{},[86,91,96,101],{"type":17,"tag":46,"props":87,"children":88},{},[89],{"type":23,"value":90},"Only use in a page's sidebar section.",{"type":17,"tag":46,"props":92,"children":93},{},[94],{"type":23,"value":95},"Use as the first component in the sidebar, above the vertical navigation.",{"type":17,"tag":46,"props":97,"children":98},{},[99],{"type":23,"value":100},"Use with or without one or more documents.",{"type":17,"tag":46,"props":102,"children":103},{},[104],{"type":23,"value":105},"Include metadata with uploaded documents.",{"type":17,"tag":77,"props":107,"children":109},{"id":108},"when-and-how-not-to-use",[110],{"type":23,"value":111},"When and how not to use",{"type":17,"tag":42,"props":113,"children":114},{},[115],{"type":17,"tag":46,"props":116,"children":117},{},[118,120],{"type":23,"value":119},"Don't use:",{"type":17,"tag":42,"props":121,"children":122},{},[123,128,133],{"type":17,"tag":46,"props":124,"children":125},{},[126],{"type":23,"value":127},"in the content area of a page",{"type":17,"tag":46,"props":129,"children":130},{},[131],{"type":23,"value":132},"with a document that has content different to the page's content",{"type":17,"tag":46,"props":134,"children":135},{},[136],{"type":23,"value":137},"for any other user actions.",{"type":17,"tag":139,"props":140,"children":141},"hr",{},[],{"type":17,"tag":18,"props":143,"children":145},{"id":144},"theming",[146],{"type":23,"value":147},"Theming",{"type":17,"tag":26,"props":149,"children":150},{},[151],{"type":23,"value":152},"Page action uses colour for:",{"type":17,"tag":42,"props":154,"children":155},{},[156,161],{"type":17,"tag":46,"props":157,"children":158},{},[159],{"type":23,"value":160},"icons, to indicate a possible action to users",{"type":17,"tag":46,"props":162,"children":163},{},[164],{"type":23,"value":165},"interactive states.",{"type":17,"tag":167,"props":168,"children":169},"docs-theme-chooser",{},[170],{"type":17,"tag":72,"props":171,"children":172},{"id":74},[],{"type":17,"tag":26,"props":174,"children":175},{},[176,178,187,189,195],{"type":23,"value":177},"To create your own theme, see ",{"type":17,"tag":179,"props":180,"children":184},"a",{"href":181,"rel":182},"https://www.vic.gov.au",[183],"nofollow",[185],{"type":23,"value":186},"theming guidance for designers",{"type":23,"value":188}," or ",{"type":17,"tag":179,"props":190,"children":192},{"href":181,"rel":191},[183],[193],{"type":23,"value":194},"theming guidance for developers",{"type":23,"value":196},".",{"title":8,"searchDepth":198,"depth":198,"links":199},2,[200,205],{"id":20,"depth":198,"text":24,"children":201},[202,204],{"id":79,"depth":203,"text":82},3,{"id":108,"depth":203,"text":111},{"id":144,"depth":198,"text":147},"markdown","content:design-system:5.components:page-action.md","content","design-system/5.components/page-action.md","md",{"/design-system/components/page-action":212},[213,219],{"_path":214,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":215,"description":216,"layout":11,"label":12,"_type":206,"_id":217,"_source":208,"_file":218,"_extension":210},"/design-system/components/option-button","Option button","The Option button component is a set of buttons to help users filter content.","content:design-system:5.components:option-button.md","design-system/5.components/option-button.md",{"_path":220,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":221,"description":222,"layout":11,"label":12,"_type":206,"_id":223,"_source":208,"_file":224,"_extension":210},"/design-system/components/pagination","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","content:design-system:5.components:pagination.md","design-system/5.components/pagination.md",{},[227,232,473],{"title":228,"_path":229,"icon":230,"layout":231},"Ripple Design System","/","carbon:home","home",{"title":233,"_path":234,"children":235},"Design System","/design-system",[236,252,268,297,331],{"title":237,"_path":238,"children":239},"About","/design-system/about",[240,243,246,249],{"title":241,"_path":242,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":244,"_path":245,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":247,"_path":248,"layout":11},"Support","/design-system/about/getting-support",{"title":250,"_path":251,"layout":11},"Contributing","/design-system/about/contributing",{"title":253,"_path":254,"children":255},"Design","/design-system/design",[256,259,262,265],{"title":257,"_path":258,"layout":11},"Getting started","/design-system/design/getting-started",{"title":260,"_path":261,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":263,"_path":264,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":266,"_path":267,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":269,"_path":270,"children":271},"Develop","/design-system/develop",[272,274,276,279],{"title":257,"_path":273,"layout":11},"/design-system/develop/getting-started",{"title":250,"_path":275,"layout":11},"/design-system/develop/contributing",{"title":277,"_path":278,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":280,"children":281,"layout":11},"/design-system/develop/usage",[282,285,288,291,294],{"title":283,"_path":284,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":286,"_path":287,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":289,"_path":290,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":292,"_path":293,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":295,"_path":296,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":298,"_path":299,"children":300},"Styles","/design-system/styles",[301,304,307,310,313,316,319,322,325,328],{"title":302,"_path":303,"layout":11},"Colour","/design-system/styles/colour",{"title":305,"_path":306,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":308,"_path":309,"layout":11},"Grid","/design-system/styles/grid",{"title":311,"_path":312,"layout":11},"Icons","/design-system/styles/icons",{"title":314,"_path":315,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":317,"_path":318,"layout":11},"Layout","/design-system/styles/layout",{"title":320,"_path":321,"layout":11},"Logo","/design-system/styles/logo",{"title":323,"_path":324,"layout":11},"Motion","/design-system/styles/motion",{"title":326,"_path":327,"layout":11},"Spacing","/design-system/styles/spacing",{"title":329,"_path":330,"layout":11},"Typography","/design-system/styles/typography",{"title":332,"_path":333,"children":334},"Components","/design-system/components",[335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,426,427,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470],{"title":336,"_path":337,"layout":11},"Accordion","/design-system/components/accordion",{"title":339,"_path":340,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":342,"_path":343,"layout":11},"Alert","/design-system/components/alert",{"title":345,"_path":346,"layout":11},"Block quote","/design-system/components/block-quote",{"title":348,"_path":349,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":351,"_path":352,"layout":11},"Button","/design-system/components/button",{"title":354,"_path":355,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":357,"_path":358,"layout":11},"Callout","/design-system/components/callout",{"title":360,"_path":361,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":363,"_path":364,"layout":11},"Card","/design-system/components/card",{"title":366,"_path":367,"layout":11},"Carousel","/design-system/components/carousel",{"title":369,"_path":370,"layout":11},"Category grid","/design-system/components/category-grid",{"title":372,"_path":373,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":375,"_path":376,"layout":11},"Chip","/design-system/components/chip",{"title":378,"_path":379,"layout":11},"Contact us","/design-system/components/contact-us",{"title":381,"_path":382,"layout":11},"Date input","/design-system/components/date-input",{"title":384,"_path":385,"layout":11},"Detail list","/design-system/components/detail-list",{"title":387,"_path":388,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":390,"_path":391,"layout":11},"File","/design-system/components/file",{"title":393,"_path":394,"layout":11},"Footer","/design-system/components/footer",{"title":396,"_path":397,"layout":11},"Form alert","/design-system/components/form-alert",{"title":399,"_path":400,"layout":11},"Form","/design-system/components/form",{"title":402,"_path":403,"layout":11},"Header","/design-system/components/header",{"title":405,"_path":406,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":408,"_path":409,"layout":11},"Input field","/design-system/components/input-field",{"title":411,"_path":412,"layout":11},"Key dates","/design-system/components/key-dates",{"title":414,"_path":415,"layout":11},"Media embed","/design-system/components/media-embed",{"title":417,"_path":418,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":420,"_path":421,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":423,"_path":424,"layout":11},"Media","/design-system/components/media",{"title":215,"_path":214,"layout":11},{"title":9,"_path":5,"layout":11},{"title":221,"_path":220,"layout":11},{"title":429,"_path":430,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":432,"_path":433,"layout":11},"Profile","/design-system/components/profile",{"title":435,"_path":436,"layout":11},"Radio button","/design-system/components/radio-button",{"title":438,"_path":439,"layout":11},"Related links","/design-system/components/related-links",{"title":441,"_path":442,"layout":11},"Results listing","/design-system/components/results-listing",{"title":444,"_path":445,"layout":11},"Search bar","/design-system/components/search-bar",{"title":447,"_path":448,"layout":11},"Skip link","/design-system/components/skip-link",{"title":450,"_path":451,"layout":11},"Social share","/design-system/components/social-share",{"title":453,"_path":454,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":456,"_path":457,"layout":11},"Table","/design-system/components/table",{"title":459,"_path":460,"layout":11},"Tabs","/design-system/components/tabs",{"title":462,"_path":463,"layout":11},"Tag","/design-system/components/tag",{"title":465,"_path":466,"layout":11},"Text area","/design-system/components/text-area",{"title":468,"_path":469,"layout":11},"Timeline","/design-system/components/timeline",{"title":471,"_path":472,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":474,"_path":475,"children":476,"layout":11},"Ripple Framework","/framework",[477,478,496,518],{"title":474,"_path":475,"layout":11},{"title":479,"_path":480,"children":481},"Key Concepts","/framework/key-concepts",[482,484,487,490,493],{"title":289,"_path":483,"layout":11},"/framework/key-concepts/nuxt",{"title":485,"_path":486,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":488,"_path":489,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":491,"_path":492,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":494,"_path":495,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":497,"_path":498,"children":499},"Guides","/framework/guides",[500,503,506,509,512,515],{"title":501,"_path":502,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":504,"_path":505,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":507,"_path":508,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":510,"_path":511,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":513,"_path":514,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":516,"_path":517,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":519,"_path":520,"layout":11},"Core modules","/framework/core-modules",["Reactive",522],{"module-navigation":523},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Page action</h1><p class="rpl-type-p-large" data-v-3163c6df>The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the Page action component to let users print or download pages and content.<!--]--></p><p><!--[-->Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document.<!--]--></p><p><!--[-->The component displays a combination of page-level actions.<!--]--></p><ul><!--[--><li><!--[-->Print page: prints the page a user is on.<!--]--></li><li><!--[-->Print full document: prints all pages in a publication or document, not only the page the user is on.<!--]--></li><li><!--[-->Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content.<!--]--></li><!--]--></ul><p><!--[-->Never use page actions for anything other than the above. Don't use it for links.<!--]--></p><p><!--[-->The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-page-action--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-page-action--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only use in a page's sidebar section.<!--]--></li><li><!--[-->Use as the first component in the sidebar, above the vertical navigation.<!--]--></li><li><!--[-->Use with or without one or more documents.<!--]--></li><li><!--[-->Include metadata with uploaded documents.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use:<ul><!--[--><li><!--[-->in the content area of a page<!--]--></li><li><!--[-->with a document that has content different to the page's content<!--]--></li><li><!--[-->for any other user actions.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Page action uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons, to indicate a possible action to users<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-page-action--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-page-action--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/page-action.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/page-action/_payload.json">[{"state":1,"_errors":521,"serverRendered":524,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":211,"$sdd-globals":225,"$sdd-navigation":226},{"/design-system/components/page-action":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":206,"_id":207,"_source":208,"_file":209,"_extension":210},"/design-system/components/page-action","components",false,"","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","page","Core",{"type":14,"children":15,"toc":197},"root",[16,25,31,36,41,61,66,71,76,83,106,112,138,142,148,153,166,173],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the Page action component to let users print or download pages and content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"The component displays a combination of page-level actions.",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51,56],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"Print page: prints the page a user is on.",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"Print full document: prints all pages in a publication or document, not only the page the user is on.",{"type":17,"tag":46,"props":57,"children":58},{},[59],{"type":23,"value":60},"Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"Never use page actions for anything other than the above. Don't use it for links.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system.",{"type":17,"tag":72,"props":73,"children":75},"docs-example",{"id":74},"core-containers-page-action--default-story",[],{"type":17,"tag":77,"props":78,"children":80},"h3",{"id":79},"when-and-how-to-use",[81],{"type":23,"value":82},"When and how to use",{"type":17,"tag":42,"props":84,"children":85},{},[86,91,96,101],{"type":17,"tag":46,"props":87,"children":88},{},[89],{"type":23,"value":90},"Only use in a page's sidebar section.",{"type":17,"tag":46,"props":92,"children":93},{},[94],{"type":23,"value":95},"Use as the first component in the sidebar, above the vertical navigation.",{"type":17,"tag":46,"props":97,"children":98},{},[99],{"type":23,"value":100},"Use with or without one or more documents.",{"type":17,"tag":46,"props":102,"children":103},{},[104],{"type":23,"value":105},"Include metadata with uploaded documents.",{"type":17,"tag":77,"props":107,"children":109},{"id":108},"when-and-how-not-to-use",[110],{"type":23,"value":111},"When and how not to use",{"type":17,"tag":42,"props":113,"children":114},{},[115],{"type":17,"tag":46,"props":116,"children":117},{},[118,120],{"type":23,"value":119},"Don't use:",{"type":17,"tag":42,"props":121,"children":122},{},[123,128,133],{"type":17,"tag":46,"props":124,"children":125},{},[126],{"type":23,"value":127},"in the content area of a page",{"type":17,"tag":46,"props":129,"children":130},{},[131],{"type":23,"value":132},"with a document that has content different to the page's content",{"type":17,"tag":46,"props":134,"children":135},{},[136],{"type":23,"value":137},"for any other user actions.",{"type":17,"tag":139,"props":140,"children":141},"hr",{},[],{"type":17,"tag":18,"props":143,"children":145},{"id":144},"theming",[146],{"type":23,"value":147},"Theming",{"type":17,"tag":26,"props":149,"children":150},{},[151],{"type":23,"value":152},"Page action uses colour for:",{"type":17,"tag":42,"props":154,"children":155},{},[156,161],{"type":17,"tag":46,"props":157,"children":158},{},[159],{"type":23,"value":160},"icons, to indicate a possible action to users",{"type":17,"tag":46,"props":162,"children":163},{},[164],{"type":23,"value":165},"interactive states.",{"type":17,"tag":167,"props":168,"children":169},"docs-theme-chooser",{},[170],{"type":17,"tag":72,"props":171,"children":172},{"id":74},[],{"type":17,"tag":26,"props":174,"children":175},{},[176,178,187,189,195],{"type":23,"value":177},"To create your own theme, see ",{"type":17,"tag":179,"props":180,"children":184},"a",{"href":181,"rel":182},"https://www.vic.gov.au",[183],"nofollow",[185],{"type":23,"value":186},"theming guidance for designers",{"type":23,"value":188}," or ",{"type":17,"tag":179,"props":190,"children":192},{"href":181,"rel":191},[183],[193],{"type":23,"value":194},"theming guidance for developers",{"type":23,"value":196},".",{"title":8,"searchDepth":198,"depth":198,"links":199},2,[200,205],{"id":20,"depth":198,"text":24,"children":201},[202,204],{"id":79,"depth":203,"text":82},3,{"id":108,"depth":203,"text":111},{"id":144,"depth":198,"text":147},"markdown","content:design-system:5.components:page-action.md","content","design-system/5.components/page-action.md","md",{"/design-system/components/page-action":212},[213,219],{"_path":214,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":215,"description":216,"layout":11,"label":12,"_type":206,"_id":217,"_source":208,"_file":218,"_extension":210},"/design-system/components/option-button","Option button","The Option button component is a set of buttons to help users filter content.","content:design-system:5.components:option-button.md","design-system/5.components/option-button.md",{"_path":220,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":221,"description":222,"layout":11,"label":12,"_type":206,"_id":223,"_source":208,"_file":224,"_extension":210},"/design-system/components/pagination","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","content:design-system:5.components:pagination.md","design-system/5.components/pagination.md",{},[227,232,473],{"title":228,"_path":229,"icon":230,"layout":231},"Ripple Design System","/","carbon:home","home",{"title":233,"_path":234,"children":235},"Design System","/design-system",[236,252,268,297,331],{"title":237,"_path":238,"children":239},"About","/design-system/about",[240,243,246,249],{"title":241,"_path":242,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":244,"_path":245,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":247,"_path":248,"layout":11},"Support","/design-system/about/getting-support",{"title":250,"_path":251,"layout":11},"Contributing","/design-system/about/contributing",{"title":253,"_path":254,"children":255},"Design","/design-system/design",[256,259,262,265],{"title":257,"_path":258,"layout":11},"Getting started","/design-system/design/getting-started",{"title":260,"_path":261,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":263,"_path":264,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":266,"_path":267,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":269,"_path":270,"children":271},"Develop","/design-system/develop",[272,274,276,279],{"title":257,"_path":273,"layout":11},"/design-system/develop/getting-started",{"title":250,"_path":275,"layout":11},"/design-system/develop/contributing",{"title":277,"_path":278,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":280,"children":281,"layout":11},"/design-system/develop/usage",[282,285,288,291,294],{"title":283,"_path":284,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":286,"_path":287,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":289,"_path":290,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":292,"_path":293,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":295,"_path":296,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":298,"_path":299,"children":300},"Styles","/design-system/styles",[301,304,307,310,313,316,319,322,325,328],{"title":302,"_path":303,"layout":11},"Colour","/design-system/styles/colour",{"title":305,"_path":306,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":308,"_path":309,"layout":11},"Grid","/design-system/styles/grid",{"title":311,"_path":312,"layout":11},"Icons","/design-system/styles/icons",{"title":314,"_path":315,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":317,"_path":318,"layout":11},"Layout","/design-system/styles/layout",{"title":320,"_path":321,"layout":11},"Logo","/design-system/styles/logo",{"title":323,"_path":324,"layout":11},"Motion","/design-system/styles/motion",{"title":326,"_path":327,"layout":11},"Spacing","/design-system/styles/spacing",{"title":329,"_path":330,"layout":11},"Typography","/design-system/styles/typography",{"title":332,"_path":333,"children":334},"Components","/design-system/components",[335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,426,427,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470],{"title":336,"_path":337,"layout":11},"Accordion","/design-system/components/accordion",{"title":339,"_path":340,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":342,"_path":343,"layout":11},"Alert","/design-system/components/alert",{"title":345,"_path":346,"layout":11},"Block quote","/design-system/components/block-quote",{"title":348,"_path":349,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":351,"_path":352,"layout":11},"Button","/design-system/components/button",{"title":354,"_path":355,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":357,"_path":358,"layout":11},"Callout","/design-system/components/callout",{"title":360,"_path":361,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":363,"_path":364,"layout":11},"Card","/design-system/components/card",{"title":366,"_path":367,"layout":11},"Carousel","/design-system/components/carousel",{"title":369,"_path":370,"layout":11},"Category grid","/design-system/components/category-grid",{"title":372,"_path":373,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":375,"_path":376,"layout":11},"Chip","/design-system/components/chip",{"title":378,"_path":379,"layout":11},"Contact us","/design-system/components/contact-us",{"title":381,"_path":382,"layout":11},"Date input","/design-system/components/date-input",{"title":384,"_path":385,"layout":11},"Detail list","/design-system/components/detail-list",{"title":387,"_path":388,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":390,"_path":391,"layout":11},"File","/design-system/components/file",{"title":393,"_path":394,"layout":11},"Footer","/design-system/components/footer",{"title":396,"_path":397,"layout":11},"Form alert","/design-system/components/form-alert",{"title":399,"_path":400,"layout":11},"Form","/design-system/components/form",{"title":402,"_path":403,"layout":11},"Header","/design-system/components/header",{"title":405,"_path":406,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":408,"_path":409,"layout":11},"Input field","/design-system/components/input-field",{"title":411,"_path":412,"layout":11},"Key dates","/design-system/components/key-dates",{"title":414,"_path":415,"layout":11},"Media embed","/design-system/components/media-embed",{"title":417,"_path":418,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":420,"_path":421,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":423,"_path":424,"layout":11},"Media","/design-system/components/media",{"title":215,"_path":214,"layout":11},{"title":9,"_path":5,"layout":11},{"title":221,"_path":220,"layout":11},{"title":429,"_path":430,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":432,"_path":433,"layout":11},"Profile","/design-system/components/profile",{"title":435,"_path":436,"layout":11},"Radio button","/design-system/components/radio-button",{"title":438,"_path":439,"layout":11},"Related links","/design-system/components/related-links",{"title":441,"_path":442,"layout":11},"Results listing","/design-system/components/results-listing",{"title":444,"_path":445,"layout":11},"Search bar","/design-system/components/search-bar",{"title":447,"_path":448,"layout":11},"Skip link","/design-system/components/skip-link",{"title":450,"_path":451,"layout":11},"Social share","/design-system/components/social-share",{"title":453,"_path":454,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":456,"_path":457,"layout":11},"Table","/design-system/components/table",{"title":459,"_path":460,"layout":11},"Tabs","/design-system/components/tabs",{"title":462,"_path":463,"layout":11},"Tag","/design-system/components/tag",{"title":465,"_path":466,"layout":11},"Text area","/design-system/components/text-area",{"title":468,"_path":469,"layout":11},"Timeline","/design-system/components/timeline",{"title":471,"_path":472,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":474,"_path":475,"children":476,"layout":11},"Ripple Framework","/framework",[477,478,496,518],{"title":474,"_path":475,"layout":11},{"title":479,"_path":480,"children":481},"Key Concepts","/framework/key-concepts",[482,484,487,490,493],{"title":289,"_path":483,"layout":11},"/framework/key-concepts/nuxt",{"title":485,"_path":486,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":488,"_path":489,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":491,"_path":492,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":494,"_path":495,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":497,"_path":498,"children":499},"Guides","/framework/guides",[500,503,506,509,512,515],{"title":501,"_path":502,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":504,"_path":505,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":507,"_path":508,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":510,"_path":511,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":513,"_path":514,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":516,"_path":517,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":519,"_path":520,"layout":11},"Core modules","/framework/core-modules",["Reactive",522],{"module-navigation":523},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/pagination/index.html b/design-system/components/pagination/index.html index 72761030cf..5edf42da25 100644 --- a/design-system/components/pagination/index.html +++ b/design-system/components/pagination/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Pagination</h1><p class="rpl-type-p-large" data-v-3163c6df>The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use pagination to help users navigate forwards and backwards through your content.<!--]--></p><p><!--[-->Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need.<!--]--></p><p><!--[-->Examples include:<!--]--></p><ul><!--[--><li><!--[-->search results or guidance divided into multiple website pages<!--]--></li><li><!--[-->a collection of cards or media items.<!--]--></li><!--]--></ul><p><!--[-->Pagination helps users to identify:<!--]--></p><ul><!--[--><li><!--[-->how many pages or items they can navigate through<!--]--></li><li><!--[-->where the page or item they are viewing sits in the order of other pages or items<!--]--></li><li><!--[-->how they can immediately navigate to other pages or items.<!--]--></li><!--]--></ul><p><!--[-->Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page.<!--]--></p><p><!--[-->Use pagination if your list has 10 or more results.<!--]--></p><p><!--[-->Pagination identifies the page each result sits on. This makes it convenient for users to find again.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Stack standard pagination variant links vertically.<!--]--></li><li><!--[-->Only use standard and complex variants at the bottom of the body content area.<!--]--></li><li><!--[-->Use the simple variant nested in components, for example, the <a href="/design-system/components/media-gallery/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media gallery<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/components/carousel/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->carousel<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[-->Use ellipses to replace any skipped pages.<!--]--></li><li><!--[-->Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use pagination for one page only.<!--]--></li><li><!--[-->Only choose one pagination variant, never mix or combine them.<!--]--></li><li><!--[-->Always put the user first, so don't break up content if it reduces usability or performance.<!--]--></li><li><!--[-->Don’t use for linear user journeys such as form completion.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Pagination has 3 main variants:<!--]--></p><ul><!--[--><li><!--[-->simple, for a small number of items or used in other components<!--]--></li><li><!--[-->standard, to navigate through a small number of pages<!--]--></li><li><!--[-->complex, when there is a large number of pages to navigate through.<!--]--></li><!--]--></ul><h3 id="simple"><a href="#simple"><!--[-->Simple<!--]--></a></h3><p><!--[-->The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-pagination--simple-tally&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--simple-tally&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="standard"><a href="#standard"><!--[-->Standard<!--]--></a></h3><p><!--[-->The standard variant is for navigating through a small number of pages. It has 2 options for label display:<!--]--></p><ul><!--[--><li><!--[-->page titles.<!--]--></li><li><!--[-->page numbers.<!--]--></li><!--]--></ul><p><!--[-->You can use page titles to give more context.<!--]--></p><p><!--[-->When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content.<!--]--></p><p><!--[-->Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.<!--]--></p><h4 id="page-title"><a href="#page-title"><!--[-->Page Title<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="page-number"><a href="#page-number"><!--[-->Page Number<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-page-links--example-count&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--example-count&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="complex"><a href="#complex"><!--[-->Complex<!--]--></a></h3><p><!--[-->The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results.<!--]--></p><p><!--[-->The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number.<!--]--></p><p><!--[-->There are 3 pages that should always remain highlighted:<!--]--></p><ul><!--[--><li><!--[-->The first page.<!--]--></li><li><!--[-->The current page.<!--]--></li><li><!--[-->The last page.<!--]--></li><!--]--></ul><p><!--[-->Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.<!--]--></p><p><!--[-->Display page numbers for the:<!--]--></p><ul><!--[--><li><!--[-->current page on all screen sizes<!--]--></li><li><!--[-->previous and next pages on smaller screen sizes<!--]--></li><li><!--[-->page immediately before and after the current page on larger screen sizes<!--]--></li><li><!--[-->first and final pages on all screen sizes.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-pagination--complex&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--complex&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Pagination uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->interactive states<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-pagination--complex&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--complex&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/pagination.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/pagination/_payload.json">[{"state":1,"_errors":745,"serverRendered":748,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":435,"$sdd-globals":449,"$sdd-navigation":450},{"/design-system/components/pagination":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":430,"_id":431,"_source":432,"_file":433,"_extension":434},"/design-system/components/pagination","components",false,"","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","page","Core",{"type":14,"children":15,"toc":416},"root",[16,25,31,36,41,56,61,79,84,89,94,99,106,151,157,180,184,190,195,213,219,224,228,234,239,252,257,262,267,274,277,283,287,293,298,303,308,326,330,335,358,362,365,371,376,389,399],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use pagination to help users navigate forwards and backwards through your content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Examples include:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"search results or guidance divided into multiple website pages",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"a collection of cards or media items.",{"type":17,"tag":26,"props":57,"children":58},{},[59],{"type":23,"value":60},"Pagination helps users to identify:",{"type":17,"tag":42,"props":62,"children":63},{},[64,69,74],{"type":17,"tag":46,"props":65,"children":66},{},[67],{"type":23,"value":68},"how many pages or items they can navigate through",{"type":17,"tag":46,"props":70,"children":71},{},[72],{"type":23,"value":73},"where the page or item they are viewing sits in the order of other pages or items",{"type":17,"tag":46,"props":75,"children":76},{},[77],{"type":23,"value":78},"how they can immediately navigate to other pages or items.",{"type":17,"tag":26,"props":80,"children":81},{},[82],{"type":23,"value":83},"Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page.",{"type":17,"tag":26,"props":85,"children":86},{},[87],{"type":23,"value":88},"Use pagination if your list has 10 or more results.",{"type":17,"tag":26,"props":90,"children":91},{},[92],{"type":23,"value":93},"Pagination identifies the page each result sits on. This makes it convenient for users to find again.",{"type":17,"tag":95,"props":96,"children":98},"docs-example",{"id":97},"core-navigation-page-links--page-links",[],{"type":17,"tag":100,"props":101,"children":103},"h3",{"id":102},"when-and-how-to-use",[104],{"type":23,"value":105},"When and how to use",{"type":17,"tag":42,"props":107,"children":108},{},[109,114,119,141,146],{"type":17,"tag":46,"props":110,"children":111},{},[112],{"type":23,"value":113},"Stack standard pagination variant links vertically.",{"type":17,"tag":46,"props":115,"children":116},{},[117],{"type":23,"value":118},"Only use standard and complex variants at the bottom of the body content area.",{"type":17,"tag":46,"props":120,"children":121},{},[122,124,131,133,139],{"type":23,"value":123},"Use the simple variant nested in components, for example, the ",{"type":17,"tag":125,"props":126,"children":128},"a",{"href":127},"/design-system/components/media-gallery/",[129],{"type":23,"value":130},"media gallery",{"type":23,"value":132}," or ",{"type":17,"tag":125,"props":134,"children":136},{"href":135},"/design-system/components/carousel/",[137],{"type":23,"value":138},"carousel",{"type":23,"value":140},".",{"type":17,"tag":46,"props":142,"children":143},{},[144],{"type":23,"value":145},"Use ellipses to replace any skipped pages.",{"type":17,"tag":46,"props":147,"children":148},{},[149],{"type":23,"value":150},"Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users.",{"type":17,"tag":100,"props":152,"children":154},{"id":153},"when-and-how-not-to-use",[155],{"type":23,"value":156},"When and how not to use",{"type":17,"tag":42,"props":158,"children":159},{},[160,165,170,175],{"type":17,"tag":46,"props":161,"children":162},{},[163],{"type":23,"value":164},"Don't use pagination for one page only.",{"type":17,"tag":46,"props":166,"children":167},{},[168],{"type":23,"value":169},"Only choose one pagination variant, never mix or combine them.",{"type":17,"tag":46,"props":171,"children":172},{},[173],{"type":23,"value":174},"Always put the user first, so don't break up content if it reduces usability or performance.",{"type":17,"tag":46,"props":176,"children":177},{},[178],{"type":23,"value":179},"Don’t use for linear user journeys such as form completion.",{"type":17,"tag":181,"props":182,"children":183},"hr",{},[],{"type":17,"tag":18,"props":185,"children":187},{"id":186},"variants",[188],{"type":23,"value":189},"Variants",{"type":17,"tag":26,"props":191,"children":192},{},[193],{"type":23,"value":194},"Pagination has 3 main variants:",{"type":17,"tag":42,"props":196,"children":197},{},[198,203,208],{"type":17,"tag":46,"props":199,"children":200},{},[201],{"type":23,"value":202},"simple, for a small number of items or used in other components",{"type":17,"tag":46,"props":204,"children":205},{},[206],{"type":23,"value":207},"standard, to navigate through a small number of pages",{"type":17,"tag":46,"props":209,"children":210},{},[211],{"type":23,"value":212},"complex, when there is a large number of pages to navigate through.",{"type":17,"tag":100,"props":214,"children":216},{"id":215},"simple",[217],{"type":23,"value":218},"Simple",{"type":17,"tag":26,"props":220,"children":221},{},[222],{"type":23,"value":223},"The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel.",{"type":17,"tag":95,"props":225,"children":227},{"id":226},"core-navigation-pagination--simple-tally",[],{"type":17,"tag":100,"props":229,"children":231},{"id":230},"standard",[232],{"type":23,"value":233},"Standard",{"type":17,"tag":26,"props":235,"children":236},{},[237],{"type":23,"value":238},"The standard variant is for navigating through a small number of pages. It has 2 options for label display:",{"type":17,"tag":42,"props":240,"children":241},{},[242,247],{"type":17,"tag":46,"props":243,"children":244},{},[245],{"type":23,"value":246},"page titles.",{"type":17,"tag":46,"props":248,"children":249},{},[250],{"type":23,"value":251},"page numbers.",{"type":17,"tag":26,"props":253,"children":254},{},[255],{"type":23,"value":256},"You can use page titles to give more context.",{"type":17,"tag":26,"props":258,"children":259},{},[260],{"type":23,"value":261},"When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content.",{"type":17,"tag":26,"props":263,"children":264},{},[265],{"type":23,"value":266},"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.",{"type":17,"tag":268,"props":269,"children":271},"h4",{"id":270},"page-title",[272],{"type":23,"value":273},"Page Title",{"type":17,"tag":95,"props":275,"children":276},{"id":97},[],{"type":17,"tag":268,"props":278,"children":280},{"id":279},"page-number",[281],{"type":23,"value":282},"Page Number",{"type":17,"tag":95,"props":284,"children":286},{"id":285},"core-navigation-page-links--example-count",[],{"type":17,"tag":100,"props":288,"children":290},{"id":289},"complex",[291],{"type":23,"value":292},"Complex",{"type":17,"tag":26,"props":294,"children":295},{},[296],{"type":23,"value":297},"The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results.",{"type":17,"tag":26,"props":299,"children":300},{},[301],{"type":23,"value":302},"The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number.",{"type":17,"tag":26,"props":304,"children":305},{},[306],{"type":23,"value":307},"There are 3 pages that should always remain highlighted:",{"type":17,"tag":42,"props":309,"children":310},{},[311,316,321],{"type":17,"tag":46,"props":312,"children":313},{},[314],{"type":23,"value":315},"The first page.",{"type":17,"tag":46,"props":317,"children":318},{},[319],{"type":23,"value":320},"The current page.",{"type":17,"tag":46,"props":322,"children":323},{},[324],{"type":23,"value":325},"The last page.",{"type":17,"tag":26,"props":327,"children":328},{},[329],{"type":23,"value":266},{"type":17,"tag":26,"props":331,"children":332},{},[333],{"type":23,"value":334},"Display page numbers for the:",{"type":17,"tag":42,"props":336,"children":337},{},[338,343,348,353],{"type":17,"tag":46,"props":339,"children":340},{},[341],{"type":23,"value":342},"current page on all screen sizes",{"type":17,"tag":46,"props":344,"children":345},{},[346],{"type":23,"value":347},"previous and next pages on smaller screen sizes",{"type":17,"tag":46,"props":349,"children":350},{},[351],{"type":23,"value":352},"page immediately before and after the current page on larger screen sizes",{"type":17,"tag":46,"props":354,"children":355},{},[356],{"type":23,"value":357},"first and final pages on all screen sizes.",{"type":17,"tag":95,"props":359,"children":361},{"id":360},"core-navigation-pagination--complex",[],{"type":17,"tag":181,"props":363,"children":364},{},[],{"type":17,"tag":18,"props":366,"children":368},{"id":367},"theming",[369],{"type":23,"value":370},"Theming",{"type":17,"tag":26,"props":372,"children":373},{},[374],{"type":23,"value":375},"Pagination uses colour for:",{"type":17,"tag":42,"props":377,"children":378},{},[379,384],{"type":17,"tag":46,"props":380,"children":381},{},[382],{"type":23,"value":383},"icons",{"type":17,"tag":46,"props":385,"children":386},{},[387],{"type":23,"value":388},"interactive states",{"type":17,"tag":390,"props":391,"children":392},"docs-theme-chooser",{},[393,396],{"type":17,"tag":95,"props":394,"children":395},{"id":97},[],{"type":17,"tag":95,"props":397,"children":398},{"id":360},[],{"type":17,"tag":26,"props":400,"children":401},{},[402,404,409,410,415],{"type":23,"value":403},"To create your own theme, see ",{"type":17,"tag":125,"props":405,"children":406},{"href":8},[407],{"type":23,"value":408},"theming guidance for designers",{"type":23,"value":132},{"type":17,"tag":125,"props":411,"children":412},{"href":8},[413],{"type":23,"value":414},"theming guidance for developers",{"type":23,"value":140},{"title":8,"searchDepth":417,"depth":417,"links":418},2,[419,424,429],{"id":20,"depth":417,"text":24,"children":420},[421,423],{"id":102,"depth":422,"text":105},3,{"id":153,"depth":422,"text":156},{"id":186,"depth":417,"text":189,"children":425},[426,427,428],{"id":215,"depth":422,"text":218},{"id":230,"depth":422,"text":233},{"id":289,"depth":422,"text":292},{"id":367,"depth":417,"text":370},"markdown","content:design-system:5.components:pagination.md","content","design-system/5.components/pagination.md","md",{"/design-system/components/pagination":436},[437,443],{"_path":438,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":439,"description":440,"layout":11,"label":12,"_type":430,"_id":441,"_source":432,"_file":442,"_extension":434},"/design-system/components/page-action","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","content:design-system:5.components:page-action.md","design-system/5.components/page-action.md",{"_path":444,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":445,"description":446,"layout":11,"label":12,"_type":430,"_id":447,"_source":432,"_file":448,"_extension":434},"/design-system/components/primary-navigation","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","content:design-system:5.components:primary-navigation.md","design-system/5.components/primary-navigation.md",{},[451,456,697],{"title":452,"_path":453,"icon":454,"layout":455},"Ripple Design System","/","carbon:home","home",{"title":457,"_path":458,"children":459},"Design System","/design-system",[460,476,492,521,555],{"title":461,"_path":462,"children":463},"About","/design-system/about",[464,467,470,473],{"title":465,"_path":466,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":468,"_path":469,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":471,"_path":472,"layout":11},"Support","/design-system/about/getting-support",{"title":474,"_path":475,"layout":11},"Contributing","/design-system/about/contributing",{"title":477,"_path":478,"children":479},"Design","/design-system/design",[480,483,486,489],{"title":481,"_path":482,"layout":11},"Getting started","/design-system/design/getting-started",{"title":484,"_path":485,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":487,"_path":488,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":490,"_path":491,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":493,"_path":494,"children":495},"Develop","/design-system/develop",[496,498,500,503],{"title":481,"_path":497,"layout":11},"/design-system/develop/getting-started",{"title":474,"_path":499,"layout":11},"/design-system/develop/contributing",{"title":501,"_path":502,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":504,"children":505,"layout":11},"/design-system/develop/usage",[506,509,512,515,518],{"title":507,"_path":508,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":510,"_path":511,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":513,"_path":514,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":516,"_path":517,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":519,"_path":520,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":522,"_path":523,"children":524},"Styles","/design-system/styles",[525,528,531,534,537,540,543,546,549,552],{"title":526,"_path":527,"layout":11},"Colour","/design-system/styles/colour",{"title":529,"_path":530,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":532,"_path":533,"layout":11},"Grid","/design-system/styles/grid",{"title":535,"_path":536,"layout":11},"Icons","/design-system/styles/icons",{"title":538,"_path":539,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":541,"_path":542,"layout":11},"Layout","/design-system/styles/layout",{"title":544,"_path":545,"layout":11},"Logo","/design-system/styles/logo",{"title":547,"_path":548,"layout":11},"Motion","/design-system/styles/motion",{"title":550,"_path":551,"layout":11},"Spacing","/design-system/styles/spacing",{"title":553,"_path":554,"layout":11},"Typography","/design-system/styles/typography",{"title":556,"_path":557,"children":558},"Components","/design-system/components",[559,562,565,568,571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,649,652,653,654,655,658,661,664,667,670,673,676,679,682,685,688,691,694],{"title":560,"_path":561,"layout":11},"Accordion","/design-system/components/accordion",{"title":563,"_path":564,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":566,"_path":567,"layout":11},"Alert","/design-system/components/alert",{"title":569,"_path":570,"layout":11},"Block quote","/design-system/components/block-quote",{"title":572,"_path":573,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":575,"_path":576,"layout":11},"Button","/design-system/components/button",{"title":578,"_path":579,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":581,"_path":582,"layout":11},"Callout","/design-system/components/callout",{"title":584,"_path":585,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":587,"_path":588,"layout":11},"Card","/design-system/components/card",{"title":590,"_path":591,"layout":11},"Carousel","/design-system/components/carousel",{"title":593,"_path":594,"layout":11},"Category grid","/design-system/components/category-grid",{"title":596,"_path":597,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":599,"_path":600,"layout":11},"Chip","/design-system/components/chip",{"title":602,"_path":603,"layout":11},"Contact us","/design-system/components/contact-us",{"title":605,"_path":606,"layout":11},"Date input","/design-system/components/date-input",{"title":608,"_path":609,"layout":11},"Detail list","/design-system/components/detail-list",{"title":611,"_path":612,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":614,"_path":615,"layout":11},"File","/design-system/components/file",{"title":617,"_path":618,"layout":11},"Footer","/design-system/components/footer",{"title":620,"_path":621,"layout":11},"Form alert","/design-system/components/form-alert",{"title":623,"_path":624,"layout":11},"Form","/design-system/components/form",{"title":626,"_path":627,"layout":11},"Header","/design-system/components/header",{"title":629,"_path":630,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":632,"_path":633,"layout":11},"Input field","/design-system/components/input-field",{"title":635,"_path":636,"layout":11},"Key dates","/design-system/components/key-dates",{"title":638,"_path":639,"layout":11},"Media embed","/design-system/components/media-embed",{"title":641,"_path":642,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":644,"_path":645,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":647,"_path":648,"layout":11},"Media","/design-system/components/media",{"title":650,"_path":651,"layout":11},"Option button","/design-system/components/option-button",{"title":439,"_path":438,"layout":11},{"title":9,"_path":5,"layout":11},{"title":445,"_path":444,"layout":11},{"title":656,"_path":657,"layout":11},"Profile","/design-system/components/profile",{"title":659,"_path":660,"layout":11},"Radio button","/design-system/components/radio-button",{"title":662,"_path":663,"layout":11},"Related links","/design-system/components/related-links",{"title":665,"_path":666,"layout":11},"Results listing","/design-system/components/results-listing",{"title":668,"_path":669,"layout":11},"Search bar","/design-system/components/search-bar",{"title":671,"_path":672,"layout":11},"Skip link","/design-system/components/skip-link",{"title":674,"_path":675,"layout":11},"Social share","/design-system/components/social-share",{"title":677,"_path":678,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":680,"_path":681,"layout":11},"Table","/design-system/components/table",{"title":683,"_path":684,"layout":11},"Tabs","/design-system/components/tabs",{"title":686,"_path":687,"layout":11},"Tag","/design-system/components/tag",{"title":689,"_path":690,"layout":11},"Text area","/design-system/components/text-area",{"title":692,"_path":693,"layout":11},"Timeline","/design-system/components/timeline",{"title":695,"_path":696,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":698,"_path":699,"children":700,"layout":11},"Ripple Framework","/framework",[701,702,720,742],{"title":698,"_path":699,"layout":11},{"title":703,"_path":704,"children":705},"Key Concepts","/framework/key-concepts",[706,708,711,714,717],{"title":513,"_path":707,"layout":11},"/framework/key-concepts/nuxt",{"title":709,"_path":710,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":712,"_path":713,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":715,"_path":716,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":718,"_path":719,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":721,"_path":722,"children":723},"Guides","/framework/guides",[724,727,730,733,736,739],{"title":725,"_path":726,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":728,"_path":729,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":731,"_path":732,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":734,"_path":735,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":737,"_path":738,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":740,"_path":741,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":743,"_path":744,"layout":11},"Core modules","/framework/core-modules",["Reactive",746],{"module-navigation":747},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Pagination</h1><p class="rpl-type-p-large" data-v-3163c6df>The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use pagination to help users navigate forwards and backwards through your content.<!--]--></p><p><!--[-->Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need.<!--]--></p><p><!--[-->Examples include:<!--]--></p><ul><!--[--><li><!--[-->search results or guidance divided into multiple website pages<!--]--></li><li><!--[-->a collection of cards or media items.<!--]--></li><!--]--></ul><p><!--[-->Pagination helps users to identify:<!--]--></p><ul><!--[--><li><!--[-->how many pages or items they can navigate through<!--]--></li><li><!--[-->where the page or item they are viewing sits in the order of other pages or items<!--]--></li><li><!--[-->how they can immediately navigate to other pages or items.<!--]--></li><!--]--></ul><p><!--[-->Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page.<!--]--></p><p><!--[-->Use pagination if your list has 10 or more results.<!--]--></p><p><!--[-->Pagination identifies the page each result sits on. This makes it convenient for users to find again.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Stack standard pagination variant links vertically.<!--]--></li><li><!--[-->Only use standard and complex variants at the bottom of the body content area.<!--]--></li><li><!--[-->Use the simple variant nested in components, for example, the <a href="/design-system/components/media-gallery/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media gallery<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/components/carousel/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->carousel<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[-->Use ellipses to replace any skipped pages.<!--]--></li><li><!--[-->Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use pagination for one page only.<!--]--></li><li><!--[-->Only choose one pagination variant, never mix or combine them.<!--]--></li><li><!--[-->Always put the user first, so don't break up content if it reduces usability or performance.<!--]--></li><li><!--[-->Don’t use for linear user journeys such as form completion.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Pagination has 3 main variants:<!--]--></p><ul><!--[--><li><!--[-->simple, for a small number of items or used in other components<!--]--></li><li><!--[-->standard, to navigate through a small number of pages<!--]--></li><li><!--[-->complex, when there is a large number of pages to navigate through.<!--]--></li><!--]--></ul><h3 id="simple"><a href="#simple"><!--[-->Simple<!--]--></a></h3><p><!--[-->The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-pagination--simple-tally&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--simple-tally&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="standard"><a href="#standard"><!--[-->Standard<!--]--></a></h3><p><!--[-->The standard variant is for navigating through a small number of pages. It has 2 options for label display:<!--]--></p><ul><!--[--><li><!--[-->page titles.<!--]--></li><li><!--[-->page numbers.<!--]--></li><!--]--></ul><p><!--[-->You can use page titles to give more context.<!--]--></p><p><!--[-->When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content.<!--]--></p><p><!--[-->Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.<!--]--></p><h4 id="page-title"><a href="#page-title"><!--[-->Page Title<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 id="page-number"><a href="#page-number"><!--[-->Page Number<!--]--></a></h4><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-page-links--example-count&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--example-count&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="complex"><a href="#complex"><!--[-->Complex<!--]--></a></h3><p><!--[-->The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results.<!--]--></p><p><!--[-->The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number.<!--]--></p><p><!--[-->There are 3 pages that should always remain highlighted:<!--]--></p><ul><!--[--><li><!--[-->The first page.<!--]--></li><li><!--[-->The current page.<!--]--></li><li><!--[-->The last page.<!--]--></li><!--]--></ul><p><!--[-->Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.<!--]--></p><p><!--[-->Display page numbers for the:<!--]--></p><ul><!--[--><li><!--[-->current page on all screen sizes<!--]--></li><li><!--[-->previous and next pages on smaller screen sizes<!--]--></li><li><!--[-->page immediately before and after the current page on larger screen sizes<!--]--></li><li><!--[-->first and final pages on all screen sizes.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-pagination--complex&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--complex&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Pagination uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->interactive states<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-pagination--complex&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--complex&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/pagination.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/pagination/_payload.json">[{"state":1,"_errors":745,"serverRendered":748,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":435,"$sdd-globals":449,"$sdd-navigation":450},{"/design-system/components/pagination":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":430,"_id":431,"_source":432,"_file":433,"_extension":434},"/design-system/components/pagination","components",false,"","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","page","Core",{"type":14,"children":15,"toc":416},"root",[16,25,31,36,41,56,61,79,84,89,94,99,106,151,157,180,184,190,195,213,219,224,228,234,239,252,257,262,267,274,277,283,287,293,298,303,308,326,330,335,358,362,365,371,376,389,399],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use pagination to help users navigate forwards and backwards through your content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Examples include:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"search results or guidance divided into multiple website pages",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"a collection of cards or media items.",{"type":17,"tag":26,"props":57,"children":58},{},[59],{"type":23,"value":60},"Pagination helps users to identify:",{"type":17,"tag":42,"props":62,"children":63},{},[64,69,74],{"type":17,"tag":46,"props":65,"children":66},{},[67],{"type":23,"value":68},"how many pages or items they can navigate through",{"type":17,"tag":46,"props":70,"children":71},{},[72],{"type":23,"value":73},"where the page or item they are viewing sits in the order of other pages or items",{"type":17,"tag":46,"props":75,"children":76},{},[77],{"type":23,"value":78},"how they can immediately navigate to other pages or items.",{"type":17,"tag":26,"props":80,"children":81},{},[82],{"type":23,"value":83},"Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page.",{"type":17,"tag":26,"props":85,"children":86},{},[87],{"type":23,"value":88},"Use pagination if your list has 10 or more results.",{"type":17,"tag":26,"props":90,"children":91},{},[92],{"type":23,"value":93},"Pagination identifies the page each result sits on. This makes it convenient for users to find again.",{"type":17,"tag":95,"props":96,"children":98},"docs-example",{"id":97},"core-navigation-page-links--page-links",[],{"type":17,"tag":100,"props":101,"children":103},"h3",{"id":102},"when-and-how-to-use",[104],{"type":23,"value":105},"When and how to use",{"type":17,"tag":42,"props":107,"children":108},{},[109,114,119,141,146],{"type":17,"tag":46,"props":110,"children":111},{},[112],{"type":23,"value":113},"Stack standard pagination variant links vertically.",{"type":17,"tag":46,"props":115,"children":116},{},[117],{"type":23,"value":118},"Only use standard and complex variants at the bottom of the body content area.",{"type":17,"tag":46,"props":120,"children":121},{},[122,124,131,133,139],{"type":23,"value":123},"Use the simple variant nested in components, for example, the ",{"type":17,"tag":125,"props":126,"children":128},"a",{"href":127},"/design-system/components/media-gallery/",[129],{"type":23,"value":130},"media gallery",{"type":23,"value":132}," or ",{"type":17,"tag":125,"props":134,"children":136},{"href":135},"/design-system/components/carousel/",[137],{"type":23,"value":138},"carousel",{"type":23,"value":140},".",{"type":17,"tag":46,"props":142,"children":143},{},[144],{"type":23,"value":145},"Use ellipses to replace any skipped pages.",{"type":17,"tag":46,"props":147,"children":148},{},[149],{"type":23,"value":150},"Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users.",{"type":17,"tag":100,"props":152,"children":154},{"id":153},"when-and-how-not-to-use",[155],{"type":23,"value":156},"When and how not to use",{"type":17,"tag":42,"props":158,"children":159},{},[160,165,170,175],{"type":17,"tag":46,"props":161,"children":162},{},[163],{"type":23,"value":164},"Don't use pagination for one page only.",{"type":17,"tag":46,"props":166,"children":167},{},[168],{"type":23,"value":169},"Only choose one pagination variant, never mix or combine them.",{"type":17,"tag":46,"props":171,"children":172},{},[173],{"type":23,"value":174},"Always put the user first, so don't break up content if it reduces usability or performance.",{"type":17,"tag":46,"props":176,"children":177},{},[178],{"type":23,"value":179},"Don’t use for linear user journeys such as form completion.",{"type":17,"tag":181,"props":182,"children":183},"hr",{},[],{"type":17,"tag":18,"props":185,"children":187},{"id":186},"variants",[188],{"type":23,"value":189},"Variants",{"type":17,"tag":26,"props":191,"children":192},{},[193],{"type":23,"value":194},"Pagination has 3 main variants:",{"type":17,"tag":42,"props":196,"children":197},{},[198,203,208],{"type":17,"tag":46,"props":199,"children":200},{},[201],{"type":23,"value":202},"simple, for a small number of items or used in other components",{"type":17,"tag":46,"props":204,"children":205},{},[206],{"type":23,"value":207},"standard, to navigate through a small number of pages",{"type":17,"tag":46,"props":209,"children":210},{},[211],{"type":23,"value":212},"complex, when there is a large number of pages to navigate through.",{"type":17,"tag":100,"props":214,"children":216},{"id":215},"simple",[217],{"type":23,"value":218},"Simple",{"type":17,"tag":26,"props":220,"children":221},{},[222],{"type":23,"value":223},"The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel.",{"type":17,"tag":95,"props":225,"children":227},{"id":226},"core-navigation-pagination--simple-tally",[],{"type":17,"tag":100,"props":229,"children":231},{"id":230},"standard",[232],{"type":23,"value":233},"Standard",{"type":17,"tag":26,"props":235,"children":236},{},[237],{"type":23,"value":238},"The standard variant is for navigating through a small number of pages. It has 2 options for label display:",{"type":17,"tag":42,"props":240,"children":241},{},[242,247],{"type":17,"tag":46,"props":243,"children":244},{},[245],{"type":23,"value":246},"page titles.",{"type":17,"tag":46,"props":248,"children":249},{},[250],{"type":23,"value":251},"page numbers.",{"type":17,"tag":26,"props":253,"children":254},{},[255],{"type":23,"value":256},"You can use page titles to give more context.",{"type":17,"tag":26,"props":258,"children":259},{},[260],{"type":23,"value":261},"When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content.",{"type":17,"tag":26,"props":263,"children":264},{},[265],{"type":23,"value":266},"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.",{"type":17,"tag":268,"props":269,"children":271},"h4",{"id":270},"page-title",[272],{"type":23,"value":273},"Page Title",{"type":17,"tag":95,"props":275,"children":276},{"id":97},[],{"type":17,"tag":268,"props":278,"children":280},{"id":279},"page-number",[281],{"type":23,"value":282},"Page Number",{"type":17,"tag":95,"props":284,"children":286},{"id":285},"core-navigation-page-links--example-count",[],{"type":17,"tag":100,"props":288,"children":290},{"id":289},"complex",[291],{"type":23,"value":292},"Complex",{"type":17,"tag":26,"props":294,"children":295},{},[296],{"type":23,"value":297},"The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results.",{"type":17,"tag":26,"props":299,"children":300},{},[301],{"type":23,"value":302},"The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number.",{"type":17,"tag":26,"props":304,"children":305},{},[306],{"type":23,"value":307},"There are 3 pages that should always remain highlighted:",{"type":17,"tag":42,"props":309,"children":310},{},[311,316,321],{"type":17,"tag":46,"props":312,"children":313},{},[314],{"type":23,"value":315},"The first page.",{"type":17,"tag":46,"props":317,"children":318},{},[319],{"type":23,"value":320},"The current page.",{"type":17,"tag":46,"props":322,"children":323},{},[324],{"type":23,"value":325},"The last page.",{"type":17,"tag":26,"props":327,"children":328},{},[329],{"type":23,"value":266},{"type":17,"tag":26,"props":331,"children":332},{},[333],{"type":23,"value":334},"Display page numbers for the:",{"type":17,"tag":42,"props":336,"children":337},{},[338,343,348,353],{"type":17,"tag":46,"props":339,"children":340},{},[341],{"type":23,"value":342},"current page on all screen sizes",{"type":17,"tag":46,"props":344,"children":345},{},[346],{"type":23,"value":347},"previous and next pages on smaller screen sizes",{"type":17,"tag":46,"props":349,"children":350},{},[351],{"type":23,"value":352},"page immediately before and after the current page on larger screen sizes",{"type":17,"tag":46,"props":354,"children":355},{},[356],{"type":23,"value":357},"first and final pages on all screen sizes.",{"type":17,"tag":95,"props":359,"children":361},{"id":360},"core-navigation-pagination--complex",[],{"type":17,"tag":181,"props":363,"children":364},{},[],{"type":17,"tag":18,"props":366,"children":368},{"id":367},"theming",[369],{"type":23,"value":370},"Theming",{"type":17,"tag":26,"props":372,"children":373},{},[374],{"type":23,"value":375},"Pagination uses colour for:",{"type":17,"tag":42,"props":377,"children":378},{},[379,384],{"type":17,"tag":46,"props":380,"children":381},{},[382],{"type":23,"value":383},"icons",{"type":17,"tag":46,"props":385,"children":386},{},[387],{"type":23,"value":388},"interactive states",{"type":17,"tag":390,"props":391,"children":392},"docs-theme-chooser",{},[393,396],{"type":17,"tag":95,"props":394,"children":395},{"id":97},[],{"type":17,"tag":95,"props":397,"children":398},{"id":360},[],{"type":17,"tag":26,"props":400,"children":401},{},[402,404,409,410,415],{"type":23,"value":403},"To create your own theme, see ",{"type":17,"tag":125,"props":405,"children":406},{"href":8},[407],{"type":23,"value":408},"theming guidance for designers",{"type":23,"value":132},{"type":17,"tag":125,"props":411,"children":412},{"href":8},[413],{"type":23,"value":414},"theming guidance for developers",{"type":23,"value":140},{"title":8,"searchDepth":417,"depth":417,"links":418},2,[419,424,429],{"id":20,"depth":417,"text":24,"children":420},[421,423],{"id":102,"depth":422,"text":105},3,{"id":153,"depth":422,"text":156},{"id":186,"depth":417,"text":189,"children":425},[426,427,428],{"id":215,"depth":422,"text":218},{"id":230,"depth":422,"text":233},{"id":289,"depth":422,"text":292},{"id":367,"depth":417,"text":370},"markdown","content:design-system:5.components:pagination.md","content","design-system/5.components/pagination.md","md",{"/design-system/components/pagination":436},[437,443],{"_path":438,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":439,"description":440,"layout":11,"label":12,"_type":430,"_id":441,"_source":432,"_file":442,"_extension":434},"/design-system/components/page-action","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","content:design-system:5.components:page-action.md","design-system/5.components/page-action.md",{"_path":444,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":445,"description":446,"layout":11,"label":12,"_type":430,"_id":447,"_source":432,"_file":448,"_extension":434},"/design-system/components/primary-navigation","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","content:design-system:5.components:primary-navigation.md","design-system/5.components/primary-navigation.md",{},[451,456,697],{"title":452,"_path":453,"icon":454,"layout":455},"Ripple Design System","/","carbon:home","home",{"title":457,"_path":458,"children":459},"Design System","/design-system",[460,476,492,521,555],{"title":461,"_path":462,"children":463},"About","/design-system/about",[464,467,470,473],{"title":465,"_path":466,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":468,"_path":469,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":471,"_path":472,"layout":11},"Support","/design-system/about/getting-support",{"title":474,"_path":475,"layout":11},"Contributing","/design-system/about/contributing",{"title":477,"_path":478,"children":479},"Design","/design-system/design",[480,483,486,489],{"title":481,"_path":482,"layout":11},"Getting started","/design-system/design/getting-started",{"title":484,"_path":485,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":487,"_path":488,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":490,"_path":491,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":493,"_path":494,"children":495},"Develop","/design-system/develop",[496,498,500,503],{"title":481,"_path":497,"layout":11},"/design-system/develop/getting-started",{"title":474,"_path":499,"layout":11},"/design-system/develop/contributing",{"title":501,"_path":502,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":504,"children":505,"layout":11},"/design-system/develop/usage",[506,509,512,515,518],{"title":507,"_path":508,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":510,"_path":511,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":513,"_path":514,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":516,"_path":517,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":519,"_path":520,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":522,"_path":523,"children":524},"Styles","/design-system/styles",[525,528,531,534,537,540,543,546,549,552],{"title":526,"_path":527,"layout":11},"Colour","/design-system/styles/colour",{"title":529,"_path":530,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":532,"_path":533,"layout":11},"Grid","/design-system/styles/grid",{"title":535,"_path":536,"layout":11},"Icons","/design-system/styles/icons",{"title":538,"_path":539,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":541,"_path":542,"layout":11},"Layout","/design-system/styles/layout",{"title":544,"_path":545,"layout":11},"Logo","/design-system/styles/logo",{"title":547,"_path":548,"layout":11},"Motion","/design-system/styles/motion",{"title":550,"_path":551,"layout":11},"Spacing","/design-system/styles/spacing",{"title":553,"_path":554,"layout":11},"Typography","/design-system/styles/typography",{"title":556,"_path":557,"children":558},"Components","/design-system/components",[559,562,565,568,571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,649,652,653,654,655,658,661,664,667,670,673,676,679,682,685,688,691,694],{"title":560,"_path":561,"layout":11},"Accordion","/design-system/components/accordion",{"title":563,"_path":564,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":566,"_path":567,"layout":11},"Alert","/design-system/components/alert",{"title":569,"_path":570,"layout":11},"Block quote","/design-system/components/block-quote",{"title":572,"_path":573,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":575,"_path":576,"layout":11},"Button","/design-system/components/button",{"title":578,"_path":579,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":581,"_path":582,"layout":11},"Callout","/design-system/components/callout",{"title":584,"_path":585,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":587,"_path":588,"layout":11},"Card","/design-system/components/card",{"title":590,"_path":591,"layout":11},"Carousel","/design-system/components/carousel",{"title":593,"_path":594,"layout":11},"Category grid","/design-system/components/category-grid",{"title":596,"_path":597,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":599,"_path":600,"layout":11},"Chip","/design-system/components/chip",{"title":602,"_path":603,"layout":11},"Contact us","/design-system/components/contact-us",{"title":605,"_path":606,"layout":11},"Date input","/design-system/components/date-input",{"title":608,"_path":609,"layout":11},"Detail list","/design-system/components/detail-list",{"title":611,"_path":612,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":614,"_path":615,"layout":11},"File","/design-system/components/file",{"title":617,"_path":618,"layout":11},"Footer","/design-system/components/footer",{"title":620,"_path":621,"layout":11},"Form alert","/design-system/components/form-alert",{"title":623,"_path":624,"layout":11},"Form","/design-system/components/form",{"title":626,"_path":627,"layout":11},"Header","/design-system/components/header",{"title":629,"_path":630,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":632,"_path":633,"layout":11},"Input field","/design-system/components/input-field",{"title":635,"_path":636,"layout":11},"Key dates","/design-system/components/key-dates",{"title":638,"_path":639,"layout":11},"Media embed","/design-system/components/media-embed",{"title":641,"_path":642,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":644,"_path":645,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":647,"_path":648,"layout":11},"Media","/design-system/components/media",{"title":650,"_path":651,"layout":11},"Option button","/design-system/components/option-button",{"title":439,"_path":438,"layout":11},{"title":9,"_path":5,"layout":11},{"title":445,"_path":444,"layout":11},{"title":656,"_path":657,"layout":11},"Profile","/design-system/components/profile",{"title":659,"_path":660,"layout":11},"Radio button","/design-system/components/radio-button",{"title":662,"_path":663,"layout":11},"Related links","/design-system/components/related-links",{"title":665,"_path":666,"layout":11},"Results listing","/design-system/components/results-listing",{"title":668,"_path":669,"layout":11},"Search bar","/design-system/components/search-bar",{"title":671,"_path":672,"layout":11},"Skip link","/design-system/components/skip-link",{"title":674,"_path":675,"layout":11},"Social share","/design-system/components/social-share",{"title":677,"_path":678,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":680,"_path":681,"layout":11},"Table","/design-system/components/table",{"title":683,"_path":684,"layout":11},"Tabs","/design-system/components/tabs",{"title":686,"_path":687,"layout":11},"Tag","/design-system/components/tag",{"title":689,"_path":690,"layout":11},"Text area","/design-system/components/text-area",{"title":692,"_path":693,"layout":11},"Timeline","/design-system/components/timeline",{"title":695,"_path":696,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":698,"_path":699,"children":700,"layout":11},"Ripple Framework","/framework",[701,702,720,742],{"title":698,"_path":699,"layout":11},{"title":703,"_path":704,"children":705},"Key Concepts","/framework/key-concepts",[706,708,711,714,717],{"title":513,"_path":707,"layout":11},"/framework/key-concepts/nuxt",{"title":709,"_path":710,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":712,"_path":713,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":715,"_path":716,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":718,"_path":719,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":721,"_path":722,"children":723},"Guides","/framework/guides",[724,727,730,733,736,739],{"title":725,"_path":726,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":728,"_path":729,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":731,"_path":732,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":734,"_path":735,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":737,"_path":738,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":740,"_path":741,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":743,"_path":744,"layout":11},"Core modules","/framework/core-modules",["Reactive",746],{"module-navigation":747},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/primary-navigation/index.html b/design-system/components/primary-navigation/index.html index add30ef5b1..87e428d83e 100644 --- a/design-system/components/primary-navigation/index.html +++ b/design-system/components/primary-navigation/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Primary navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation.<!--]--></p><p><!--[-->Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site.<!--]--></p><p><!--[-->The primary navigation contains:<!--]--></p><ul><!--[--><li><!--[-->a site logo<!--]--></li><li><!--[-->navigation links<!--]--></li><li><!--[-->optional search link.<!--]--></li><!--]--></ul><p><!--[-->The navigation and search links expand to either a fullscreen menu or search bar.<!--]--></p><p><!--[-->The primary navigation always sits at the top of the page. It displays above all page content and components.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-primary-nav--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-primary-nav--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><h4 id="logo"><a href="#logo"><!--[-->Logo<!--]--></a></h4><p><!--[-->The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage.<!--]--></p><p><!--[-->Within the primary navigation component, the logo is centred vertically.<!--]--></p><h4 id="co-branding-logos"><a href="#co-branding-logos"><!--[-->Co-branding logos<!--]--></a></h4><p><!--[-->Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels.<!--]--></p><p><!--[-->See <a href="/design-system/styles/logo/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->logo<!--]--><!--]--><!----><!--]--></a> for guidance and requirements including co-branding.<!--]--></p><h4 id="navigation-links"><a href="#navigation-links"><!--[-->Navigation links<!--]--></a></h4><p><!--[-->The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages.<!--]--></p><p><!--[-->When there are no child pages, there is no chevron and it takes users to the page.<!--]--></p><h4 id="mega-menu"><a href="#mega-menu"><!--[-->Mega menu<!--]--></a></h4><p><!--[-->The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages.<!--]--></p><h4 id="search-menu"><a href="#search-menu"><!--[-->Search menu<!--]--></a></h4><p><!--[-->The menu can display a search bar to provide users the option to perform a site search.<!--]--></p><h4 id="smaller-devices"><a href="#smaller-devices"><!--[-->Smaller devices<!--]--></a></h4><p><!--[-->The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px.<!--]--></p><p><!--[-->On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens.<!--]--></p><p><!--[-->To aim to conform with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.0 Criterion 1.1.1<!--]--><!--]--><!----><!--]--></a>, and for increased consistency across screens sizes, the primary navigation:<!--]--></p><ul><!--[--><li><!--[-->uses the menu label and a chevron<!--]--></li><li><!--[-->doesn't use the 3 bar, or 'hamburger', menu icon.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.<!--]--></p><!--]--></blockquote><h4 id="responsive-behaviour"><a href="#responsive-behaviour"><!--[-->Responsive behaviour<!--]--></a></h4><p><!--[-->Primary navigation supports only a small number of items. This is because it is a horizontal list.<!--]--></p><p><!--[-->Take this into account when defining your site's IA.<!--]--></p><p><!--[-->A maximum number of links can display before the navigation bar will respond to the collapsed menu display.<!--]--></p><p><!--[-->When used with a single logo:<!--]--></p><ul><!--[--><li><!--[-->992-1199px breakpoint can display 6 links (including search)<!--]--></li><li><!--[-->1200+ breakpoint can display 7 links (including search).<!--]--></li><!--]--></ul><p><!--[-->When used with a co-branded logo:<!--]--></p><ul><!--[--><li><!--[-->992-1199px breakpoint can display 5 links (including search)<!--]--></li><li><!--[-->1200+ breakpoint can display 6 links (including search).<!--]--></li><!--]--></ul><p><!--[-->When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version.<!--]--></p><h4 id="scroll-behaviour"><a href="#scroll-behaviour"><!--[-->Scroll behaviour<!--]--></a></h4><p><!--[-->The primary navigation has show and hide behaviour on user scroll.<!--]--></p><ul><!--[--><li><!--[-->Scroll down: the primary navigation hides from view.<!--]--></li><li><!--[-->Scroll up: the primary navigation shows at the top of the viewport.<!--]--></li><!--]--></ul><h4 id="interaction-with-other-components"><a href="#interaction-with-other-components"><!--[-->Interaction with other components<!--]--></a></h4><p><!--[-->When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use across all pages of your site.<!--]--></li><li><!--[-->Use descriptive, recognisable link labels.<!--]--></li><li><!--[-->Display links in priority order: move from left (for most-used links) to right (for least-used links).<!--]--></li><li><!--[-->Base your navigation's structure on user research.<!--]--></li><li><!--[-->Structure navigation to prioritise tasks and information your research says users need the most.<!--]--></li><li><!--[-->Use with optional user action, such as login, if required.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t label links with jargon or unfamiliar terms.<!--]--></li><li><!--[-->Don't use more than 150 characters per menu item.<!--]--></li><li><!--[-->Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive.<!--]--></li><li><!--[-->An organisational structure should not be used as a navigation stucture.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Primary navigation uses colour for:<!--]--></p><ul><!--[--><li><!--[-->visual prominence and brand recognition<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->Primary navigation also adopts its theming from the search bar component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-primary-nav--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-primary-nav--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><hr class="docs-hr" data-v-341b6a73><h2 id="accessibility"><a href="#accessibility"><!--[-->Accessibility<!--]--></a></h2><p><!--[-->To aim to conform with <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.2 Criterion 2.5.8<!--]--><!--]--><!----><!--]--></a>, the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->2.5.8 Target Size (Minimum) The size of the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->target<!--]--><!--]--><!----><!--]--></a> for <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->pointer inputs<!--]--><!--]--><!----><!--]--></a> is at least 24 by 24 <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->CSS pixels<!--]--><!--]--><!----><!--]--></a>,<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/primary-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/primary-navigation/_payload.json">[{"state":1,"_errors":805,"serverRendered":808,"path":809,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":496,"$sdd-globals":510,"$sdd-navigation":511},{"/design-system/components/primary-navigation":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":491,"_id":492,"_source":493,"_file":494,"_extension":495},"/design-system/components/primary-navigation","components",false,"","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","page","Core",{"type":14,"children":15,"toc":480},"root",[16,25,31,36,41,61,66,71,76,83,90,95,100,106,111,124,130,135,140,146,151,157,162,168,173,178,193,206,215,221,226,231,236,241,254,259,272,277,283,288,301,307,312,316,322,355,361,384,387,393,398,411,416,423,426,432,445],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"The primary navigation contains:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51,56],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"a site logo",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"navigation links",{"type":17,"tag":46,"props":57,"children":58},{},[59],{"type":23,"value":60},"optional search link.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"The navigation and search links expand to either a fullscreen menu or search bar.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"The primary navigation always sits at the top of the page. It displays above all page content and components.",{"type":17,"tag":72,"props":73,"children":75},"docs-example",{"id":74},"core-navigation-primary-nav--default-story",[],{"type":17,"tag":77,"props":78,"children":80},"h3",{"id":79},"how-this-component-works",[81],{"type":23,"value":82},"How this component works",{"type":17,"tag":84,"props":85,"children":87},"h4",{"id":86},"logo",[88],{"type":23,"value":89},"Logo",{"type":17,"tag":26,"props":91,"children":92},{},[93],{"type":23,"value":94},"The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage.",{"type":17,"tag":26,"props":96,"children":97},{},[98],{"type":23,"value":99},"Within the primary navigation component, the logo is centred vertically.",{"type":17,"tag":84,"props":101,"children":103},{"id":102},"co-branding-logos",[104],{"type":23,"value":105},"Co-branding logos",{"type":17,"tag":26,"props":107,"children":108},{},[109],{"type":23,"value":110},"Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels.",{"type":17,"tag":26,"props":112,"children":113},{},[114,116,122],{"type":23,"value":115},"See ",{"type":17,"tag":117,"props":118,"children":120},"a",{"href":119},"/design-system/styles/logo/",[121],{"type":23,"value":86},{"type":23,"value":123}," for guidance and requirements including co-branding.",{"type":17,"tag":84,"props":125,"children":127},{"id":126},"navigation-links",[128],{"type":23,"value":129},"Navigation links",{"type":17,"tag":26,"props":131,"children":132},{},[133],{"type":23,"value":134},"The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages.",{"type":17,"tag":26,"props":136,"children":137},{},[138],{"type":23,"value":139},"When there are no child pages, there is no chevron and it takes users to the page.",{"type":17,"tag":84,"props":141,"children":143},{"id":142},"mega-menu",[144],{"type":23,"value":145},"Mega menu",{"type":17,"tag":26,"props":147,"children":148},{},[149],{"type":23,"value":150},"The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages.",{"type":17,"tag":84,"props":152,"children":154},{"id":153},"search-menu",[155],{"type":23,"value":156},"Search menu",{"type":17,"tag":26,"props":158,"children":159},{},[160],{"type":23,"value":161},"The menu can display a search bar to provide users the option to perform a site search.",{"type":17,"tag":84,"props":163,"children":165},{"id":164},"smaller-devices",[166],{"type":23,"value":167},"Smaller devices",{"type":17,"tag":26,"props":169,"children":170},{},[171],{"type":23,"value":172},"The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px.",{"type":17,"tag":26,"props":174,"children":175},{},[176],{"type":23,"value":177},"On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens.",{"type":17,"tag":26,"props":179,"children":180},{},[181,183,191],{"type":23,"value":182},"To aim to conform with ",{"type":17,"tag":117,"props":184,"children":188},{"href":185,"rel":186},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html",[187],"nofollow",[189],{"type":23,"value":190},"WCAG2.0 Criterion 1.1.1",{"type":23,"value":192},", and for increased consistency across screens sizes, the primary navigation:",{"type":17,"tag":42,"props":194,"children":195},{},[196,201],{"type":17,"tag":46,"props":197,"children":198},{},[199],{"type":23,"value":200},"uses the menu label and a chevron",{"type":17,"tag":46,"props":202,"children":203},{},[204],{"type":23,"value":205},"doesn't use the 3 bar, or 'hamburger', menu icon.",{"type":17,"tag":207,"props":208,"children":209},"blockquote",{},[210],{"type":17,"tag":26,"props":211,"children":212},{},[213],{"type":23,"value":214},"1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.",{"type":17,"tag":84,"props":216,"children":218},{"id":217},"responsive-behaviour",[219],{"type":23,"value":220},"Responsive behaviour",{"type":17,"tag":26,"props":222,"children":223},{},[224],{"type":23,"value":225},"Primary navigation supports only a small number of items. This is because it is a horizontal list.",{"type":17,"tag":26,"props":227,"children":228},{},[229],{"type":23,"value":230},"Take this into account when defining your site's IA.",{"type":17,"tag":26,"props":232,"children":233},{},[234],{"type":23,"value":235},"A maximum number of links can display before the navigation bar will respond to the collapsed menu display.",{"type":17,"tag":26,"props":237,"children":238},{},[239],{"type":23,"value":240},"When used with a single logo:",{"type":17,"tag":42,"props":242,"children":243},{},[244,249],{"type":17,"tag":46,"props":245,"children":246},{},[247],{"type":23,"value":248},"992-1199px breakpoint can display 6 links (including search)",{"type":17,"tag":46,"props":250,"children":251},{},[252],{"type":23,"value":253},"1200+ breakpoint can display 7 links (including search).",{"type":17,"tag":26,"props":255,"children":256},{},[257],{"type":23,"value":258},"When used with a co-branded logo:",{"type":17,"tag":42,"props":260,"children":261},{},[262,267],{"type":17,"tag":46,"props":263,"children":264},{},[265],{"type":23,"value":266},"992-1199px breakpoint can display 5 links (including search)",{"type":17,"tag":46,"props":268,"children":269},{},[270],{"type":23,"value":271},"1200+ breakpoint can display 6 links (including search).",{"type":17,"tag":26,"props":273,"children":274},{},[275],{"type":23,"value":276},"When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version.",{"type":17,"tag":84,"props":278,"children":280},{"id":279},"scroll-behaviour",[281],{"type":23,"value":282},"Scroll behaviour",{"type":17,"tag":26,"props":284,"children":285},{},[286],{"type":23,"value":287},"The primary navigation has show and hide behaviour on user scroll.",{"type":17,"tag":42,"props":289,"children":290},{},[291,296],{"type":17,"tag":46,"props":292,"children":293},{},[294],{"type":23,"value":295},"Scroll down: the primary navigation hides from view.",{"type":17,"tag":46,"props":297,"children":298},{},[299],{"type":23,"value":300},"Scroll up: the primary navigation shows at the top of the viewport.",{"type":17,"tag":84,"props":302,"children":304},{"id":303},"interaction-with-other-components",[305],{"type":23,"value":306},"Interaction with other components",{"type":17,"tag":26,"props":308,"children":309},{},[310],{"type":23,"value":311},"When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users.",{"type":17,"tag":313,"props":314,"children":315},"hr",{},[],{"type":17,"tag":77,"props":317,"children":319},{"id":318},"when-and-how-to-use",[320],{"type":23,"value":321},"When and how to use",{"type":17,"tag":42,"props":323,"children":324},{},[325,330,335,340,345,350],{"type":17,"tag":46,"props":326,"children":327},{},[328],{"type":23,"value":329},"Use across all pages of your site.",{"type":17,"tag":46,"props":331,"children":332},{},[333],{"type":23,"value":334},"Use descriptive, recognisable link labels.",{"type":17,"tag":46,"props":336,"children":337},{},[338],{"type":23,"value":339},"Display links in priority order: move from left (for most-used links) to right (for least-used links).",{"type":17,"tag":46,"props":341,"children":342},{},[343],{"type":23,"value":344},"Base your navigation's structure on user research.",{"type":17,"tag":46,"props":346,"children":347},{},[348],{"type":23,"value":349},"Structure navigation to prioritise tasks and information your research says users need the most.",{"type":17,"tag":46,"props":351,"children":352},{},[353],{"type":23,"value":354},"Use with optional user action, such as login, if required.",{"type":17,"tag":77,"props":356,"children":358},{"id":357},"when-and-how-not-to-use",[359],{"type":23,"value":360},"When and how not to use",{"type":17,"tag":42,"props":362,"children":363},{},[364,369,374,379],{"type":17,"tag":46,"props":365,"children":366},{},[367],{"type":23,"value":368},"Don’t label links with jargon or unfamiliar terms.",{"type":17,"tag":46,"props":370,"children":371},{},[372],{"type":23,"value":373},"Don't use more than 150 characters per menu item.",{"type":17,"tag":46,"props":375,"children":376},{},[377],{"type":23,"value":378},"Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive.",{"type":17,"tag":46,"props":380,"children":381},{},[382],{"type":23,"value":383},"An organisational structure should not be used as a navigation stucture.",{"type":17,"tag":313,"props":385,"children":386},{},[],{"type":17,"tag":18,"props":388,"children":390},{"id":389},"theming",[391],{"type":23,"value":392},"Theming",{"type":17,"tag":26,"props":394,"children":395},{},[396],{"type":23,"value":397},"Primary navigation uses colour for:",{"type":17,"tag":42,"props":399,"children":400},{},[401,406],{"type":17,"tag":46,"props":402,"children":403},{},[404],{"type":23,"value":405},"visual prominence and brand recognition",{"type":17,"tag":46,"props":407,"children":408},{},[409],{"type":23,"value":410},"interactive states.",{"type":17,"tag":26,"props":412,"children":413},{},[414],{"type":23,"value":415},"Primary navigation also adopts its theming from the search bar component.",{"type":17,"tag":417,"props":418,"children":419},"docs-theme-chooser",{},[420],{"type":17,"tag":72,"props":421,"children":422},{"id":74},[],{"type":17,"tag":313,"props":424,"children":425},{},[],{"type":17,"tag":18,"props":427,"children":429},{"id":428},"accessibility",[430],{"type":23,"value":431},"Accessibility",{"type":17,"tag":26,"props":433,"children":434},{},[435,436,443],{"type":23,"value":182},{"type":17,"tag":117,"props":437,"children":440},{"href":438,"rel":439},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum",[187],[441],{"type":23,"value":442},"WCAG2.2 Criterion 2.5.8",{"type":23,"value":444},", the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling.",{"type":17,"tag":207,"props":446,"children":447},{},[448],{"type":17,"tag":26,"props":449,"children":450},{},[451,453,460,462,469,471,478],{"type":23,"value":452},"2.5.8 Target Size (Minimum) The size of the ",{"type":17,"tag":117,"props":454,"children":457},{"href":455,"rel":456},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target",[187],[458],{"type":23,"value":459},"target",{"type":23,"value":461}," for ",{"type":17,"tag":117,"props":463,"children":466},{"href":464,"rel":465},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input",[187],[467],{"type":23,"value":468},"pointer inputs",{"type":23,"value":470}," is at least 24 by 24 ",{"type":17,"tag":117,"props":472,"children":475},{"href":473,"rel":474},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel",[187],[476],{"type":23,"value":477},"CSS pixels",{"type":23,"value":479},",",{"title":8,"searchDepth":481,"depth":481,"links":482},2,[483,489,490],{"id":20,"depth":481,"text":24,"children":484},[485,487,488],{"id":79,"depth":486,"text":82},3,{"id":318,"depth":486,"text":321},{"id":357,"depth":486,"text":360},{"id":389,"depth":481,"text":392},{"id":428,"depth":481,"text":431},"markdown","content:design-system:5.components:primary-navigation.md","content","design-system/5.components/primary-navigation.md","md",{"/design-system/components/primary-navigation":497},[498,504],{"_path":499,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":500,"description":501,"layout":11,"label":12,"_type":491,"_id":502,"_source":493,"_file":503,"_extension":495},"/design-system/components/pagination","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","content:design-system:5.components:pagination.md","design-system/5.components/pagination.md",{"_path":505,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":506,"description":507,"layout":11,"label":12,"_type":491,"_id":508,"_source":493,"_file":509,"_extension":495},"/design-system/components/profile","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","content:design-system:5.components:profile.md","design-system/5.components/profile.md",{},[512,517,757],{"title":513,"_path":514,"icon":515,"layout":516},"Ripple Design System","/","carbon:home","home",{"title":518,"_path":519,"children":520},"Design System","/design-system",[521,537,553,582,615],{"title":522,"_path":523,"children":524},"About","/design-system/about",[525,528,531,534],{"title":526,"_path":527,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":529,"_path":530,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":532,"_path":533,"layout":11},"Support","/design-system/about/getting-support",{"title":535,"_path":536,"layout":11},"Contributing","/design-system/about/contributing",{"title":538,"_path":539,"children":540},"Design","/design-system/design",[541,544,547,550],{"title":542,"_path":543,"layout":11},"Getting started","/design-system/design/getting-started",{"title":545,"_path":546,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":548,"_path":549,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":551,"_path":552,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":554,"_path":555,"children":556},"Develop","/design-system/develop",[557,559,561,564],{"title":542,"_path":558,"layout":11},"/design-system/develop/getting-started",{"title":535,"_path":560,"layout":11},"/design-system/develop/contributing",{"title":562,"_path":563,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":565,"children":566,"layout":11},"/design-system/develop/usage",[567,570,573,576,579],{"title":568,"_path":569,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":571,"_path":572,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":574,"_path":575,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":577,"_path":578,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":580,"_path":581,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":583,"_path":584,"children":585},"Styles","/design-system/styles",[586,589,592,595,598,601,604,606,609,612],{"title":587,"_path":588,"layout":11},"Colour","/design-system/styles/colour",{"title":590,"_path":591,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":593,"_path":594,"layout":11},"Grid","/design-system/styles/grid",{"title":596,"_path":597,"layout":11},"Icons","/design-system/styles/icons",{"title":599,"_path":600,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":602,"_path":603,"layout":11},"Layout","/design-system/styles/layout",{"title":89,"_path":605,"layout":11},"/design-system/styles/logo",{"title":607,"_path":608,"layout":11},"Motion","/design-system/styles/motion",{"title":610,"_path":611,"layout":11},"Spacing","/design-system/styles/spacing",{"title":613,"_path":614,"layout":11},"Typography","/design-system/styles/typography",{"title":616,"_path":617,"children":618},"Components","/design-system/components",[619,622,625,628,631,634,637,640,643,646,649,652,655,658,661,664,667,670,673,676,679,682,685,688,691,694,697,700,703,706,709,712,715,716,717,718,721,724,727,730,733,736,739,742,745,748,751,754],{"title":620,"_path":621,"layout":11},"Accordion","/design-system/components/accordion",{"title":623,"_path":624,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":626,"_path":627,"layout":11},"Alert","/design-system/components/alert",{"title":629,"_path":630,"layout":11},"Block quote","/design-system/components/block-quote",{"title":632,"_path":633,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":635,"_path":636,"layout":11},"Button","/design-system/components/button",{"title":638,"_path":639,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":641,"_path":642,"layout":11},"Callout","/design-system/components/callout",{"title":644,"_path":645,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":647,"_path":648,"layout":11},"Card","/design-system/components/card",{"title":650,"_path":651,"layout":11},"Carousel","/design-system/components/carousel",{"title":653,"_path":654,"layout":11},"Category grid","/design-system/components/category-grid",{"title":656,"_path":657,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":659,"_path":660,"layout":11},"Chip","/design-system/components/chip",{"title":662,"_path":663,"layout":11},"Contact us","/design-system/components/contact-us",{"title":665,"_path":666,"layout":11},"Date input","/design-system/components/date-input",{"title":668,"_path":669,"layout":11},"Detail list","/design-system/components/detail-list",{"title":671,"_path":672,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":674,"_path":675,"layout":11},"File","/design-system/components/file",{"title":677,"_path":678,"layout":11},"Footer","/design-system/components/footer",{"title":680,"_path":681,"layout":11},"Form alert","/design-system/components/form-alert",{"title":683,"_path":684,"layout":11},"Form","/design-system/components/form",{"title":686,"_path":687,"layout":11},"Header","/design-system/components/header",{"title":689,"_path":690,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":692,"_path":693,"layout":11},"Input field","/design-system/components/input-field",{"title":695,"_path":696,"layout":11},"Key dates","/design-system/components/key-dates",{"title":698,"_path":699,"layout":11},"Media embed","/design-system/components/media-embed",{"title":701,"_path":702,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":704,"_path":705,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":707,"_path":708,"layout":11},"Media","/design-system/components/media",{"title":710,"_path":711,"layout":11},"Option button","/design-system/components/option-button",{"title":713,"_path":714,"layout":11},"Page action","/design-system/components/page-action",{"title":500,"_path":499,"layout":11},{"title":9,"_path":5,"layout":11},{"title":506,"_path":505,"layout":11},{"title":719,"_path":720,"layout":11},"Radio button","/design-system/components/radio-button",{"title":722,"_path":723,"layout":11},"Related links","/design-system/components/related-links",{"title":725,"_path":726,"layout":11},"Results listing","/design-system/components/results-listing",{"title":728,"_path":729,"layout":11},"Search bar","/design-system/components/search-bar",{"title":731,"_path":732,"layout":11},"Skip link","/design-system/components/skip-link",{"title":734,"_path":735,"layout":11},"Social share","/design-system/components/social-share",{"title":737,"_path":738,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":740,"_path":741,"layout":11},"Table","/design-system/components/table",{"title":743,"_path":744,"layout":11},"Tabs","/design-system/components/tabs",{"title":746,"_path":747,"layout":11},"Tag","/design-system/components/tag",{"title":749,"_path":750,"layout":11},"Text area","/design-system/components/text-area",{"title":752,"_path":753,"layout":11},"Timeline","/design-system/components/timeline",{"title":755,"_path":756,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":758,"_path":759,"children":760,"layout":11},"Ripple Framework","/framework",[761,762,780,802],{"title":758,"_path":759,"layout":11},{"title":763,"_path":764,"children":765},"Key Concepts","/framework/key-concepts",[766,768,771,774,777],{"title":574,"_path":767,"layout":11},"/framework/key-concepts/nuxt",{"title":769,"_path":770,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":772,"_path":773,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":775,"_path":776,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":778,"_path":779,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":781,"_path":782,"children":783},"Guides","/framework/guides",[784,787,790,793,796,799],{"title":785,"_path":786,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":788,"_path":789,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":791,"_path":792,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":794,"_path":795,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":797,"_path":798,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":800,"_path":801,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":803,"_path":804,"layout":11},"Core modules","/framework/core-modules",["Reactive",806],{"module-navigation":807},null,true,"/design-system/components/primary-navigation/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Primary navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation.<!--]--></p><p><!--[-->Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site.<!--]--></p><p><!--[-->The primary navigation contains:<!--]--></p><ul><!--[--><li><!--[-->a site logo<!--]--></li><li><!--[-->navigation links<!--]--></li><li><!--[-->optional search link.<!--]--></li><!--]--></ul><p><!--[-->The navigation and search links expand to either a fullscreen menu or search bar.<!--]--></p><p><!--[-->The primary navigation always sits at the top of the page. It displays above all page content and components.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-primary-nav--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-primary-nav--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><h4 id="logo"><a href="#logo"><!--[-->Logo<!--]--></a></h4><p><!--[-->The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage.<!--]--></p><p><!--[-->Within the primary navigation component, the logo is centred vertically.<!--]--></p><h4 id="co-branding-logos"><a href="#co-branding-logos"><!--[-->Co-branding logos<!--]--></a></h4><p><!--[-->Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels.<!--]--></p><p><!--[-->See <a href="/design-system/styles/logo/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->logo<!--]--><!--]--><!----><!--]--></a> for guidance and requirements including co-branding.<!--]--></p><h4 id="navigation-links"><a href="#navigation-links"><!--[-->Navigation links<!--]--></a></h4><p><!--[-->The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages.<!--]--></p><p><!--[-->When there are no child pages, there is no chevron and it takes users to the page.<!--]--></p><h4 id="mega-menu"><a href="#mega-menu"><!--[-->Mega menu<!--]--></a></h4><p><!--[-->The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages.<!--]--></p><h4 id="search-menu"><a href="#search-menu"><!--[-->Search menu<!--]--></a></h4><p><!--[-->The menu can display a search bar to provide users the option to perform a site search.<!--]--></p><h4 id="smaller-devices"><a href="#smaller-devices"><!--[-->Smaller devices<!--]--></a></h4><p><!--[-->The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px.<!--]--></p><p><!--[-->On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens.<!--]--></p><p><!--[-->To aim to conform with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.0 Criterion 1.1.1<!--]--><!--]--><!----><!--]--></a>, and for increased consistency across screens sizes, the primary navigation:<!--]--></p><ul><!--[--><li><!--[-->uses the menu label and a chevron<!--]--></li><li><!--[-->doesn't use the 3 bar, or 'hamburger', menu icon.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.<!--]--></p><!--]--></blockquote><h4 id="responsive-behaviour"><a href="#responsive-behaviour"><!--[-->Responsive behaviour<!--]--></a></h4><p><!--[-->Primary navigation supports only a small number of items. This is because it is a horizontal list.<!--]--></p><p><!--[-->Take this into account when defining your site's IA.<!--]--></p><p><!--[-->A maximum number of links can display before the navigation bar will respond to the collapsed menu display.<!--]--></p><p><!--[-->When used with a single logo:<!--]--></p><ul><!--[--><li><!--[-->992-1199px breakpoint can display 6 links (including search)<!--]--></li><li><!--[-->1200+ breakpoint can display 7 links (including search).<!--]--></li><!--]--></ul><p><!--[-->When used with a co-branded logo:<!--]--></p><ul><!--[--><li><!--[-->992-1199px breakpoint can display 5 links (including search)<!--]--></li><li><!--[-->1200+ breakpoint can display 6 links (including search).<!--]--></li><!--]--></ul><p><!--[-->When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version.<!--]--></p><h4 id="scroll-behaviour"><a href="#scroll-behaviour"><!--[-->Scroll behaviour<!--]--></a></h4><p><!--[-->The primary navigation has show and hide behaviour on user scroll.<!--]--></p><ul><!--[--><li><!--[-->Scroll down: the primary navigation hides from view.<!--]--></li><li><!--[-->Scroll up: the primary navigation shows at the top of the viewport.<!--]--></li><!--]--></ul><h4 id="interaction-with-other-components"><a href="#interaction-with-other-components"><!--[-->Interaction with other components<!--]--></a></h4><p><!--[-->When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use across all pages of your site.<!--]--></li><li><!--[-->Use descriptive, recognisable link labels.<!--]--></li><li><!--[-->Display links in priority order: move from left (for most-used links) to right (for least-used links).<!--]--></li><li><!--[-->Base your navigation's structure on user research.<!--]--></li><li><!--[-->Structure navigation to prioritise tasks and information your research says users need the most.<!--]--></li><li><!--[-->Use with optional user action, such as login, if required.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don’t label links with jargon or unfamiliar terms.<!--]--></li><li><!--[-->Don't use more than 150 characters per menu item.<!--]--></li><li><!--[-->Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive.<!--]--></li><li><!--[-->An organisational structure should not be used as a navigation stucture.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Primary navigation uses colour for:<!--]--></p><ul><!--[--><li><!--[-->visual prominence and brand recognition<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->Primary navigation also adopts its theming from the search bar component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-primary-nav--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-primary-nav--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><hr class="docs-hr" data-v-341b6a73><h2 id="accessibility"><a href="#accessibility"><!--[-->Accessibility<!--]--></a></h2><p><!--[-->To aim to conform with <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.2 Criterion 2.5.8<!--]--><!--]--><!----><!--]--></a>, the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->2.5.8 Target Size (Minimum) The size of the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->target<!--]--><!--]--><!----><!--]--></a> for <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->pointer inputs<!--]--><!--]--><!----><!--]--></a> is at least 24 by 24 <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->CSS pixels<!--]--><!--]--><!----><!--]--></a>,<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/primary-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/primary-navigation/_payload.json">[{"state":1,"_errors":805,"serverRendered":808,"path":809,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":496,"$sdd-globals":510,"$sdd-navigation":511},{"/design-system/components/primary-navigation":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":491,"_id":492,"_source":493,"_file":494,"_extension":495},"/design-system/components/primary-navigation","components",false,"","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","page","Core",{"type":14,"children":15,"toc":480},"root",[16,25,31,36,41,61,66,71,76,83,90,95,100,106,111,124,130,135,140,146,151,157,162,168,173,178,193,206,215,221,226,231,236,241,254,259,272,277,283,288,301,307,312,316,322,355,361,384,387,393,398,411,416,423,426,432,445],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"The primary navigation contains:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51,56],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"a site logo",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"navigation links",{"type":17,"tag":46,"props":57,"children":58},{},[59],{"type":23,"value":60},"optional search link.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"The navigation and search links expand to either a fullscreen menu or search bar.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"The primary navigation always sits at the top of the page. It displays above all page content and components.",{"type":17,"tag":72,"props":73,"children":75},"docs-example",{"id":74},"core-navigation-primary-nav--default-story",[],{"type":17,"tag":77,"props":78,"children":80},"h3",{"id":79},"how-this-component-works",[81],{"type":23,"value":82},"How this component works",{"type":17,"tag":84,"props":85,"children":87},"h4",{"id":86},"logo",[88],{"type":23,"value":89},"Logo",{"type":17,"tag":26,"props":91,"children":92},{},[93],{"type":23,"value":94},"The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage.",{"type":17,"tag":26,"props":96,"children":97},{},[98],{"type":23,"value":99},"Within the primary navigation component, the logo is centred vertically.",{"type":17,"tag":84,"props":101,"children":103},{"id":102},"co-branding-logos",[104],{"type":23,"value":105},"Co-branding logos",{"type":17,"tag":26,"props":107,"children":108},{},[109],{"type":23,"value":110},"Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels.",{"type":17,"tag":26,"props":112,"children":113},{},[114,116,122],{"type":23,"value":115},"See ",{"type":17,"tag":117,"props":118,"children":120},"a",{"href":119},"/design-system/styles/logo/",[121],{"type":23,"value":86},{"type":23,"value":123}," for guidance and requirements including co-branding.",{"type":17,"tag":84,"props":125,"children":127},{"id":126},"navigation-links",[128],{"type":23,"value":129},"Navigation links",{"type":17,"tag":26,"props":131,"children":132},{},[133],{"type":23,"value":134},"The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages.",{"type":17,"tag":26,"props":136,"children":137},{},[138],{"type":23,"value":139},"When there are no child pages, there is no chevron and it takes users to the page.",{"type":17,"tag":84,"props":141,"children":143},{"id":142},"mega-menu",[144],{"type":23,"value":145},"Mega menu",{"type":17,"tag":26,"props":147,"children":148},{},[149],{"type":23,"value":150},"The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages.",{"type":17,"tag":84,"props":152,"children":154},{"id":153},"search-menu",[155],{"type":23,"value":156},"Search menu",{"type":17,"tag":26,"props":158,"children":159},{},[160],{"type":23,"value":161},"The menu can display a search bar to provide users the option to perform a site search.",{"type":17,"tag":84,"props":163,"children":165},{"id":164},"smaller-devices",[166],{"type":23,"value":167},"Smaller devices",{"type":17,"tag":26,"props":169,"children":170},{},[171],{"type":23,"value":172},"The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px.",{"type":17,"tag":26,"props":174,"children":175},{},[176],{"type":23,"value":177},"On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens.",{"type":17,"tag":26,"props":179,"children":180},{},[181,183,191],{"type":23,"value":182},"To aim to conform with ",{"type":17,"tag":117,"props":184,"children":188},{"href":185,"rel":186},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html",[187],"nofollow",[189],{"type":23,"value":190},"WCAG2.0 Criterion 1.1.1",{"type":23,"value":192},", and for increased consistency across screens sizes, the primary navigation:",{"type":17,"tag":42,"props":194,"children":195},{},[196,201],{"type":17,"tag":46,"props":197,"children":198},{},[199],{"type":23,"value":200},"uses the menu label and a chevron",{"type":17,"tag":46,"props":202,"children":203},{},[204],{"type":23,"value":205},"doesn't use the 3 bar, or 'hamburger', menu icon.",{"type":17,"tag":207,"props":208,"children":209},"blockquote",{},[210],{"type":17,"tag":26,"props":211,"children":212},{},[213],{"type":23,"value":214},"1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.",{"type":17,"tag":84,"props":216,"children":218},{"id":217},"responsive-behaviour",[219],{"type":23,"value":220},"Responsive behaviour",{"type":17,"tag":26,"props":222,"children":223},{},[224],{"type":23,"value":225},"Primary navigation supports only a small number of items. This is because it is a horizontal list.",{"type":17,"tag":26,"props":227,"children":228},{},[229],{"type":23,"value":230},"Take this into account when defining your site's IA.",{"type":17,"tag":26,"props":232,"children":233},{},[234],{"type":23,"value":235},"A maximum number of links can display before the navigation bar will respond to the collapsed menu display.",{"type":17,"tag":26,"props":237,"children":238},{},[239],{"type":23,"value":240},"When used with a single logo:",{"type":17,"tag":42,"props":242,"children":243},{},[244,249],{"type":17,"tag":46,"props":245,"children":246},{},[247],{"type":23,"value":248},"992-1199px breakpoint can display 6 links (including search)",{"type":17,"tag":46,"props":250,"children":251},{},[252],{"type":23,"value":253},"1200+ breakpoint can display 7 links (including search).",{"type":17,"tag":26,"props":255,"children":256},{},[257],{"type":23,"value":258},"When used with a co-branded logo:",{"type":17,"tag":42,"props":260,"children":261},{},[262,267],{"type":17,"tag":46,"props":263,"children":264},{},[265],{"type":23,"value":266},"992-1199px breakpoint can display 5 links (including search)",{"type":17,"tag":46,"props":268,"children":269},{},[270],{"type":23,"value":271},"1200+ breakpoint can display 6 links (including search).",{"type":17,"tag":26,"props":273,"children":274},{},[275],{"type":23,"value":276},"When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version.",{"type":17,"tag":84,"props":278,"children":280},{"id":279},"scroll-behaviour",[281],{"type":23,"value":282},"Scroll behaviour",{"type":17,"tag":26,"props":284,"children":285},{},[286],{"type":23,"value":287},"The primary navigation has show and hide behaviour on user scroll.",{"type":17,"tag":42,"props":289,"children":290},{},[291,296],{"type":17,"tag":46,"props":292,"children":293},{},[294],{"type":23,"value":295},"Scroll down: the primary navigation hides from view.",{"type":17,"tag":46,"props":297,"children":298},{},[299],{"type":23,"value":300},"Scroll up: the primary navigation shows at the top of the viewport.",{"type":17,"tag":84,"props":302,"children":304},{"id":303},"interaction-with-other-components",[305],{"type":23,"value":306},"Interaction with other components",{"type":17,"tag":26,"props":308,"children":309},{},[310],{"type":23,"value":311},"When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users.",{"type":17,"tag":313,"props":314,"children":315},"hr",{},[],{"type":17,"tag":77,"props":317,"children":319},{"id":318},"when-and-how-to-use",[320],{"type":23,"value":321},"When and how to use",{"type":17,"tag":42,"props":323,"children":324},{},[325,330,335,340,345,350],{"type":17,"tag":46,"props":326,"children":327},{},[328],{"type":23,"value":329},"Use across all pages of your site.",{"type":17,"tag":46,"props":331,"children":332},{},[333],{"type":23,"value":334},"Use descriptive, recognisable link labels.",{"type":17,"tag":46,"props":336,"children":337},{},[338],{"type":23,"value":339},"Display links in priority order: move from left (for most-used links) to right (for least-used links).",{"type":17,"tag":46,"props":341,"children":342},{},[343],{"type":23,"value":344},"Base your navigation's structure on user research.",{"type":17,"tag":46,"props":346,"children":347},{},[348],{"type":23,"value":349},"Structure navigation to prioritise tasks and information your research says users need the most.",{"type":17,"tag":46,"props":351,"children":352},{},[353],{"type":23,"value":354},"Use with optional user action, such as login, if required.",{"type":17,"tag":77,"props":356,"children":358},{"id":357},"when-and-how-not-to-use",[359],{"type":23,"value":360},"When and how not to use",{"type":17,"tag":42,"props":362,"children":363},{},[364,369,374,379],{"type":17,"tag":46,"props":365,"children":366},{},[367],{"type":23,"value":368},"Don’t label links with jargon or unfamiliar terms.",{"type":17,"tag":46,"props":370,"children":371},{},[372],{"type":23,"value":373},"Don't use more than 150 characters per menu item.",{"type":17,"tag":46,"props":375,"children":376},{},[377],{"type":23,"value":378},"Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive.",{"type":17,"tag":46,"props":380,"children":381},{},[382],{"type":23,"value":383},"An organisational structure should not be used as a navigation stucture.",{"type":17,"tag":313,"props":385,"children":386},{},[],{"type":17,"tag":18,"props":388,"children":390},{"id":389},"theming",[391],{"type":23,"value":392},"Theming",{"type":17,"tag":26,"props":394,"children":395},{},[396],{"type":23,"value":397},"Primary navigation uses colour for:",{"type":17,"tag":42,"props":399,"children":400},{},[401,406],{"type":17,"tag":46,"props":402,"children":403},{},[404],{"type":23,"value":405},"visual prominence and brand recognition",{"type":17,"tag":46,"props":407,"children":408},{},[409],{"type":23,"value":410},"interactive states.",{"type":17,"tag":26,"props":412,"children":413},{},[414],{"type":23,"value":415},"Primary navigation also adopts its theming from the search bar component.",{"type":17,"tag":417,"props":418,"children":419},"docs-theme-chooser",{},[420],{"type":17,"tag":72,"props":421,"children":422},{"id":74},[],{"type":17,"tag":313,"props":424,"children":425},{},[],{"type":17,"tag":18,"props":427,"children":429},{"id":428},"accessibility",[430],{"type":23,"value":431},"Accessibility",{"type":17,"tag":26,"props":433,"children":434},{},[435,436,443],{"type":23,"value":182},{"type":17,"tag":117,"props":437,"children":440},{"href":438,"rel":439},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum",[187],[441],{"type":23,"value":442},"WCAG2.2 Criterion 2.5.8",{"type":23,"value":444},", the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling.",{"type":17,"tag":207,"props":446,"children":447},{},[448],{"type":17,"tag":26,"props":449,"children":450},{},[451,453,460,462,469,471,478],{"type":23,"value":452},"2.5.8 Target Size (Minimum) The size of the ",{"type":17,"tag":117,"props":454,"children":457},{"href":455,"rel":456},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target",[187],[458],{"type":23,"value":459},"target",{"type":23,"value":461}," for ",{"type":17,"tag":117,"props":463,"children":466},{"href":464,"rel":465},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input",[187],[467],{"type":23,"value":468},"pointer inputs",{"type":23,"value":470}," is at least 24 by 24 ",{"type":17,"tag":117,"props":472,"children":475},{"href":473,"rel":474},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel",[187],[476],{"type":23,"value":477},"CSS pixels",{"type":23,"value":479},",",{"title":8,"searchDepth":481,"depth":481,"links":482},2,[483,489,490],{"id":20,"depth":481,"text":24,"children":484},[485,487,488],{"id":79,"depth":486,"text":82},3,{"id":318,"depth":486,"text":321},{"id":357,"depth":486,"text":360},{"id":389,"depth":481,"text":392},{"id":428,"depth":481,"text":431},"markdown","content:design-system:5.components:primary-navigation.md","content","design-system/5.components/primary-navigation.md","md",{"/design-system/components/primary-navigation":497},[498,504],{"_path":499,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":500,"description":501,"layout":11,"label":12,"_type":491,"_id":502,"_source":493,"_file":503,"_extension":495},"/design-system/components/pagination","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","content:design-system:5.components:pagination.md","design-system/5.components/pagination.md",{"_path":505,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":506,"description":507,"layout":11,"label":12,"_type":491,"_id":508,"_source":493,"_file":509,"_extension":495},"/design-system/components/profile","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","content:design-system:5.components:profile.md","design-system/5.components/profile.md",{},[512,517,757],{"title":513,"_path":514,"icon":515,"layout":516},"Ripple Design System","/","carbon:home","home",{"title":518,"_path":519,"children":520},"Design System","/design-system",[521,537,553,582,615],{"title":522,"_path":523,"children":524},"About","/design-system/about",[525,528,531,534],{"title":526,"_path":527,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":529,"_path":530,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":532,"_path":533,"layout":11},"Support","/design-system/about/getting-support",{"title":535,"_path":536,"layout":11},"Contributing","/design-system/about/contributing",{"title":538,"_path":539,"children":540},"Design","/design-system/design",[541,544,547,550],{"title":542,"_path":543,"layout":11},"Getting started","/design-system/design/getting-started",{"title":545,"_path":546,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":548,"_path":549,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":551,"_path":552,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":554,"_path":555,"children":556},"Develop","/design-system/develop",[557,559,561,564],{"title":542,"_path":558,"layout":11},"/design-system/develop/getting-started",{"title":535,"_path":560,"layout":11},"/design-system/develop/contributing",{"title":562,"_path":563,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":565,"children":566,"layout":11},"/design-system/develop/usage",[567,570,573,576,579],{"title":568,"_path":569,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":571,"_path":572,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":574,"_path":575,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":577,"_path":578,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":580,"_path":581,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":583,"_path":584,"children":585},"Styles","/design-system/styles",[586,589,592,595,598,601,604,606,609,612],{"title":587,"_path":588,"layout":11},"Colour","/design-system/styles/colour",{"title":590,"_path":591,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":593,"_path":594,"layout":11},"Grid","/design-system/styles/grid",{"title":596,"_path":597,"layout":11},"Icons","/design-system/styles/icons",{"title":599,"_path":600,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":602,"_path":603,"layout":11},"Layout","/design-system/styles/layout",{"title":89,"_path":605,"layout":11},"/design-system/styles/logo",{"title":607,"_path":608,"layout":11},"Motion","/design-system/styles/motion",{"title":610,"_path":611,"layout":11},"Spacing","/design-system/styles/spacing",{"title":613,"_path":614,"layout":11},"Typography","/design-system/styles/typography",{"title":616,"_path":617,"children":618},"Components","/design-system/components",[619,622,625,628,631,634,637,640,643,646,649,652,655,658,661,664,667,670,673,676,679,682,685,688,691,694,697,700,703,706,709,712,715,716,717,718,721,724,727,730,733,736,739,742,745,748,751,754],{"title":620,"_path":621,"layout":11},"Accordion","/design-system/components/accordion",{"title":623,"_path":624,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":626,"_path":627,"layout":11},"Alert","/design-system/components/alert",{"title":629,"_path":630,"layout":11},"Block quote","/design-system/components/block-quote",{"title":632,"_path":633,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":635,"_path":636,"layout":11},"Button","/design-system/components/button",{"title":638,"_path":639,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":641,"_path":642,"layout":11},"Callout","/design-system/components/callout",{"title":644,"_path":645,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":647,"_path":648,"layout":11},"Card","/design-system/components/card",{"title":650,"_path":651,"layout":11},"Carousel","/design-system/components/carousel",{"title":653,"_path":654,"layout":11},"Category grid","/design-system/components/category-grid",{"title":656,"_path":657,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":659,"_path":660,"layout":11},"Chip","/design-system/components/chip",{"title":662,"_path":663,"layout":11},"Contact us","/design-system/components/contact-us",{"title":665,"_path":666,"layout":11},"Date input","/design-system/components/date-input",{"title":668,"_path":669,"layout":11},"Detail list","/design-system/components/detail-list",{"title":671,"_path":672,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":674,"_path":675,"layout":11},"File","/design-system/components/file",{"title":677,"_path":678,"layout":11},"Footer","/design-system/components/footer",{"title":680,"_path":681,"layout":11},"Form alert","/design-system/components/form-alert",{"title":683,"_path":684,"layout":11},"Form","/design-system/components/form",{"title":686,"_path":687,"layout":11},"Header","/design-system/components/header",{"title":689,"_path":690,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":692,"_path":693,"layout":11},"Input field","/design-system/components/input-field",{"title":695,"_path":696,"layout":11},"Key dates","/design-system/components/key-dates",{"title":698,"_path":699,"layout":11},"Media embed","/design-system/components/media-embed",{"title":701,"_path":702,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":704,"_path":705,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":707,"_path":708,"layout":11},"Media","/design-system/components/media",{"title":710,"_path":711,"layout":11},"Option button","/design-system/components/option-button",{"title":713,"_path":714,"layout":11},"Page action","/design-system/components/page-action",{"title":500,"_path":499,"layout":11},{"title":9,"_path":5,"layout":11},{"title":506,"_path":505,"layout":11},{"title":719,"_path":720,"layout":11},"Radio button","/design-system/components/radio-button",{"title":722,"_path":723,"layout":11},"Related links","/design-system/components/related-links",{"title":725,"_path":726,"layout":11},"Results listing","/design-system/components/results-listing",{"title":728,"_path":729,"layout":11},"Search bar","/design-system/components/search-bar",{"title":731,"_path":732,"layout":11},"Skip link","/design-system/components/skip-link",{"title":734,"_path":735,"layout":11},"Social share","/design-system/components/social-share",{"title":737,"_path":738,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":740,"_path":741,"layout":11},"Table","/design-system/components/table",{"title":743,"_path":744,"layout":11},"Tabs","/design-system/components/tabs",{"title":746,"_path":747,"layout":11},"Tag","/design-system/components/tag",{"title":749,"_path":750,"layout":11},"Text area","/design-system/components/text-area",{"title":752,"_path":753,"layout":11},"Timeline","/design-system/components/timeline",{"title":755,"_path":756,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":758,"_path":759,"children":760,"layout":11},"Ripple Framework","/framework",[761,762,780,802],{"title":758,"_path":759,"layout":11},{"title":763,"_path":764,"children":765},"Key Concepts","/framework/key-concepts",[766,768,771,774,777],{"title":574,"_path":767,"layout":11},"/framework/key-concepts/nuxt",{"title":769,"_path":770,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":772,"_path":773,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":775,"_path":776,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":778,"_path":779,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":781,"_path":782,"children":783},"Guides","/framework/guides",[784,787,790,793,796,799],{"title":785,"_path":786,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":788,"_path":789,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":791,"_path":792,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":794,"_path":795,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":797,"_path":798,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":800,"_path":801,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":803,"_path":804,"layout":11},"Core modules","/framework/core-modules",["Reactive",806],{"module-navigation":807},null,true,"/design-system/components/primary-navigation/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/profile/index.html b/design-system/components/profile/index.html index 07052cc23b..9677e2806c 100644 --- a/design-system/components/profile/index.html +++ b/design-system/components/profile/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Profile</h1><p class="rpl-type-p-large" data-v-3163c6df>The Profile component shows an avatar (image) on your page, with supporting text to display key information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users.<!--]--></p><p><!--[-->Each row of content includes a:<!--]--></p><ul><!--[--><li><!--[-->label<!--]--></li><li><!--[-->summary.<!--]--></li><!--]--></ul><p><!--[-->It's used to display key information, including:<!--]--></p><ul><!--[--><li><!--[-->name<!--]--></li><li><!--[-->date<!--]--></li><li><!--[-->category.<!--]--></li><!--]--></ul><p><!--[-->Only use the profile component for displaying simple information. For data or complex information, consider using a table.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-profile--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-profile--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Keep label as short as possible (under 2 words, like a name).<!--]--></li><li><!--[-->Keep all content clear and concise.<!--]--></li><li><!--[-->Display at the top of profile pages.<!--]--></li><li><!--[-->Always add alt text to the image.<!--]--></li><li><!--[-->Only use an image that's relevant to the summary.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use a label that doesn't match the summary.<!--]--></li><li><!--[-->Don't use unimportant, complex or longform content.<!--]--></li><li><!--[-->Don't include punctuation.<!--]--></li><li><!--[-->Never use full URLs in the label or summary.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/profile.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/profile/_payload.json">[{"state":1,"_errors":471,"serverRendered":474,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":161,"$sdd-globals":175,"$sdd-navigation":176},{"/design-system/components/profile":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":156,"_id":157,"_source":158,"_file":159,"_extension":160},"/design-system/components/profile","components",false,"","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","page","Core",{"type":14,"children":15,"toc":148},"root",[16,25,31,36,51,56,74,79,84,91,119,125],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Each row of content includes a:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"label",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"summary.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"It's used to display key information, including:",{"type":17,"tag":37,"props":57,"children":58},{},[59,64,69],{"type":17,"tag":41,"props":60,"children":61},{},[62],{"type":23,"value":63},"name",{"type":17,"tag":41,"props":65,"children":66},{},[67],{"type":23,"value":68},"date",{"type":17,"tag":41,"props":70,"children":71},{},[72],{"type":23,"value":73},"category.",{"type":17,"tag":26,"props":75,"children":76},{},[77],{"type":23,"value":78},"Only use the profile component for displaying simple information. For data or complex information, consider using a table.",{"type":17,"tag":80,"props":81,"children":83},"docs-example",{"id":82},"core-containers-profile--default-story",[],{"type":17,"tag":85,"props":86,"children":88},"h3",{"id":87},"when-and-how-to-use",[89],{"type":23,"value":90},"When and how to use",{"type":17,"tag":37,"props":92,"children":93},{},[94,99,104,109,114],{"type":17,"tag":41,"props":95,"children":96},{},[97],{"type":23,"value":98},"Keep label as short as possible (under 2 words, like a name).",{"type":17,"tag":41,"props":100,"children":101},{},[102],{"type":23,"value":103},"Keep all content clear and concise.",{"type":17,"tag":41,"props":105,"children":106},{},[107],{"type":23,"value":108},"Display at the top of profile pages.",{"type":17,"tag":41,"props":110,"children":111},{},[112],{"type":23,"value":113},"Always add alt text to the image.",{"type":17,"tag":41,"props":115,"children":116},{},[117],{"type":23,"value":118},"Only use an image that's relevant to the summary.",{"type":17,"tag":85,"props":120,"children":122},{"id":121},"when-and-how-not-to-use",[123],{"type":23,"value":124},"When and how not to use",{"type":17,"tag":37,"props":126,"children":127},{},[128,133,138,143],{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"Never use a label that doesn't match the summary.",{"type":17,"tag":41,"props":134,"children":135},{},[136],{"type":23,"value":137},"Don't use unimportant, complex or longform content.",{"type":17,"tag":41,"props":139,"children":140},{},[141],{"type":23,"value":142},"Don't include punctuation.",{"type":17,"tag":41,"props":144,"children":145},{},[146],{"type":23,"value":147},"Never use full URLs in the label or summary.",{"title":8,"searchDepth":149,"depth":149,"links":150},2,[151],{"id":20,"depth":149,"text":24,"children":152},[153,155],{"id":87,"depth":154,"text":90},3,{"id":121,"depth":154,"text":124},"markdown","content:design-system:5.components:profile.md","content","design-system/5.components/profile.md","md",{"/design-system/components/profile":162},[163,169],{"_path":164,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":165,"description":166,"layout":11,"label":12,"_type":156,"_id":167,"_source":158,"_file":168,"_extension":160},"/design-system/components/primary-navigation","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","content:design-system:5.components:primary-navigation.md","design-system/5.components/primary-navigation.md",{"_path":170,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":171,"description":172,"layout":11,"label":12,"_type":156,"_id":173,"_source":158,"_file":174,"_extension":160},"/design-system/components/radio-button","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","content:design-system:5.components:radio-button.md","design-system/5.components/radio-button.md",{},[177,182,423],{"title":178,"_path":179,"icon":180,"layout":181},"Ripple Design System","/","carbon:home","home",{"title":183,"_path":184,"children":185},"Design System","/design-system",[186,202,218,247,281],{"title":187,"_path":188,"children":189},"About","/design-system/about",[190,193,196,199],{"title":191,"_path":192,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":194,"_path":195,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":197,"_path":198,"layout":11},"Support","/design-system/about/getting-support",{"title":200,"_path":201,"layout":11},"Contributing","/design-system/about/contributing",{"title":203,"_path":204,"children":205},"Design","/design-system/design",[206,209,212,215],{"title":207,"_path":208,"layout":11},"Getting started","/design-system/design/getting-started",{"title":210,"_path":211,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":213,"_path":214,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":216,"_path":217,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":219,"_path":220,"children":221},"Develop","/design-system/develop",[222,224,226,229],{"title":207,"_path":223,"layout":11},"/design-system/develop/getting-started",{"title":200,"_path":225,"layout":11},"/design-system/develop/contributing",{"title":227,"_path":228,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":230,"children":231,"layout":11},"/design-system/develop/usage",[232,235,238,241,244],{"title":233,"_path":234,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":236,"_path":237,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":239,"_path":240,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":242,"_path":243,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":245,"_path":246,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":248,"_path":249,"children":250},"Styles","/design-system/styles",[251,254,257,260,263,266,269,272,275,278],{"title":252,"_path":253,"layout":11},"Colour","/design-system/styles/colour",{"title":255,"_path":256,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":258,"_path":259,"layout":11},"Grid","/design-system/styles/grid",{"title":261,"_path":262,"layout":11},"Icons","/design-system/styles/icons",{"title":264,"_path":265,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":267,"_path":268,"layout":11},"Layout","/design-system/styles/layout",{"title":270,"_path":271,"layout":11},"Logo","/design-system/styles/logo",{"title":273,"_path":274,"layout":11},"Motion","/design-system/styles/motion",{"title":276,"_path":277,"layout":11},"Spacing","/design-system/styles/spacing",{"title":279,"_path":280,"layout":11},"Typography","/design-system/styles/typography",{"title":282,"_path":283,"children":284},"Components","/design-system/components",[285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,385,386,387,390,393,396,399,402,405,408,411,414,417,420],{"title":286,"_path":287,"layout":11},"Accordion","/design-system/components/accordion",{"title":289,"_path":290,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":292,"_path":293,"layout":11},"Alert","/design-system/components/alert",{"title":295,"_path":296,"layout":11},"Block quote","/design-system/components/block-quote",{"title":298,"_path":299,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":301,"_path":302,"layout":11},"Button","/design-system/components/button",{"title":304,"_path":305,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":307,"_path":308,"layout":11},"Callout","/design-system/components/callout",{"title":310,"_path":311,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":313,"_path":314,"layout":11},"Card","/design-system/components/card",{"title":316,"_path":317,"layout":11},"Carousel","/design-system/components/carousel",{"title":319,"_path":320,"layout":11},"Category grid","/design-system/components/category-grid",{"title":322,"_path":323,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":325,"_path":326,"layout":11},"Chip","/design-system/components/chip",{"title":328,"_path":329,"layout":11},"Contact us","/design-system/components/contact-us",{"title":331,"_path":332,"layout":11},"Date input","/design-system/components/date-input",{"title":334,"_path":335,"layout":11},"Detail list","/design-system/components/detail-list",{"title":337,"_path":338,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":340,"_path":341,"layout":11},"File","/design-system/components/file",{"title":343,"_path":344,"layout":11},"Footer","/design-system/components/footer",{"title":346,"_path":347,"layout":11},"Form alert","/design-system/components/form-alert",{"title":349,"_path":350,"layout":11},"Form","/design-system/components/form",{"title":352,"_path":353,"layout":11},"Header","/design-system/components/header",{"title":355,"_path":356,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":358,"_path":359,"layout":11},"Input field","/design-system/components/input-field",{"title":361,"_path":362,"layout":11},"Key dates","/design-system/components/key-dates",{"title":364,"_path":365,"layout":11},"Media embed","/design-system/components/media-embed",{"title":367,"_path":368,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":370,"_path":371,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":373,"_path":374,"layout":11},"Media","/design-system/components/media",{"title":376,"_path":377,"layout":11},"Option button","/design-system/components/option-button",{"title":379,"_path":380,"layout":11},"Page action","/design-system/components/page-action",{"title":382,"_path":383,"layout":11},"Pagination","/design-system/components/pagination",{"title":165,"_path":164,"layout":11},{"title":9,"_path":5,"layout":11},{"title":171,"_path":170,"layout":11},{"title":388,"_path":389,"layout":11},"Related links","/design-system/components/related-links",{"title":391,"_path":392,"layout":11},"Results listing","/design-system/components/results-listing",{"title":394,"_path":395,"layout":11},"Search bar","/design-system/components/search-bar",{"title":397,"_path":398,"layout":11},"Skip link","/design-system/components/skip-link",{"title":400,"_path":401,"layout":11},"Social share","/design-system/components/social-share",{"title":403,"_path":404,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":406,"_path":407,"layout":11},"Table","/design-system/components/table",{"title":409,"_path":410,"layout":11},"Tabs","/design-system/components/tabs",{"title":412,"_path":413,"layout":11},"Tag","/design-system/components/tag",{"title":415,"_path":416,"layout":11},"Text area","/design-system/components/text-area",{"title":418,"_path":419,"layout":11},"Timeline","/design-system/components/timeline",{"title":421,"_path":422,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":424,"_path":425,"children":426,"layout":11},"Ripple Framework","/framework",[427,428,446,468],{"title":424,"_path":425,"layout":11},{"title":429,"_path":430,"children":431},"Key Concepts","/framework/key-concepts",[432,434,437,440,443],{"title":239,"_path":433,"layout":11},"/framework/key-concepts/nuxt",{"title":435,"_path":436,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":438,"_path":439,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":441,"_path":442,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":444,"_path":445,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":447,"_path":448,"children":449},"Guides","/framework/guides",[450,453,456,459,462,465],{"title":451,"_path":452,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":454,"_path":455,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":457,"_path":458,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":460,"_path":461,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":463,"_path":464,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":466,"_path":467,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":469,"_path":470,"layout":11},"Core modules","/framework/core-modules",["Reactive",472],{"module-navigation":473},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Profile</h1><p class="rpl-type-p-large" data-v-3163c6df>The Profile component shows an avatar (image) on your page, with supporting text to display key information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users.<!--]--></p><p><!--[-->Each row of content includes a:<!--]--></p><ul><!--[--><li><!--[-->label<!--]--></li><li><!--[-->summary.<!--]--></li><!--]--></ul><p><!--[-->It's used to display key information, including:<!--]--></p><ul><!--[--><li><!--[-->name<!--]--></li><li><!--[-->date<!--]--></li><li><!--[-->category.<!--]--></li><!--]--></ul><p><!--[-->Only use the profile component for displaying simple information. For data or complex information, consider using a table.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-profile--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-profile--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Keep label as short as possible (under 2 words, like a name).<!--]--></li><li><!--[-->Keep all content clear and concise.<!--]--></li><li><!--[-->Display at the top of profile pages.<!--]--></li><li><!--[-->Always add alt text to the image.<!--]--></li><li><!--[-->Only use an image that's relevant to the summary.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use a label that doesn't match the summary.<!--]--></li><li><!--[-->Don't use unimportant, complex or longform content.<!--]--></li><li><!--[-->Don't include punctuation.<!--]--></li><li><!--[-->Never use full URLs in the label or summary.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/profile.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/profile/_payload.json">[{"state":1,"_errors":471,"serverRendered":474,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":161,"$sdd-globals":175,"$sdd-navigation":176},{"/design-system/components/profile":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":156,"_id":157,"_source":158,"_file":159,"_extension":160},"/design-system/components/profile","components",false,"","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","page","Core",{"type":14,"children":15,"toc":148},"root",[16,25,31,36,51,56,74,79,84,91,119,125],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Each row of content includes a:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"label",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"summary.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"It's used to display key information, including:",{"type":17,"tag":37,"props":57,"children":58},{},[59,64,69],{"type":17,"tag":41,"props":60,"children":61},{},[62],{"type":23,"value":63},"name",{"type":17,"tag":41,"props":65,"children":66},{},[67],{"type":23,"value":68},"date",{"type":17,"tag":41,"props":70,"children":71},{},[72],{"type":23,"value":73},"category.",{"type":17,"tag":26,"props":75,"children":76},{},[77],{"type":23,"value":78},"Only use the profile component for displaying simple information. For data or complex information, consider using a table.",{"type":17,"tag":80,"props":81,"children":83},"docs-example",{"id":82},"core-containers-profile--default-story",[],{"type":17,"tag":85,"props":86,"children":88},"h3",{"id":87},"when-and-how-to-use",[89],{"type":23,"value":90},"When and how to use",{"type":17,"tag":37,"props":92,"children":93},{},[94,99,104,109,114],{"type":17,"tag":41,"props":95,"children":96},{},[97],{"type":23,"value":98},"Keep label as short as possible (under 2 words, like a name).",{"type":17,"tag":41,"props":100,"children":101},{},[102],{"type":23,"value":103},"Keep all content clear and concise.",{"type":17,"tag":41,"props":105,"children":106},{},[107],{"type":23,"value":108},"Display at the top of profile pages.",{"type":17,"tag":41,"props":110,"children":111},{},[112],{"type":23,"value":113},"Always add alt text to the image.",{"type":17,"tag":41,"props":115,"children":116},{},[117],{"type":23,"value":118},"Only use an image that's relevant to the summary.",{"type":17,"tag":85,"props":120,"children":122},{"id":121},"when-and-how-not-to-use",[123],{"type":23,"value":124},"When and how not to use",{"type":17,"tag":37,"props":126,"children":127},{},[128,133,138,143],{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"Never use a label that doesn't match the summary.",{"type":17,"tag":41,"props":134,"children":135},{},[136],{"type":23,"value":137},"Don't use unimportant, complex or longform content.",{"type":17,"tag":41,"props":139,"children":140},{},[141],{"type":23,"value":142},"Don't include punctuation.",{"type":17,"tag":41,"props":144,"children":145},{},[146],{"type":23,"value":147},"Never use full URLs in the label or summary.",{"title":8,"searchDepth":149,"depth":149,"links":150},2,[151],{"id":20,"depth":149,"text":24,"children":152},[153,155],{"id":87,"depth":154,"text":90},3,{"id":121,"depth":154,"text":124},"markdown","content:design-system:5.components:profile.md","content","design-system/5.components/profile.md","md",{"/design-system/components/profile":162},[163,169],{"_path":164,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":165,"description":166,"layout":11,"label":12,"_type":156,"_id":167,"_source":158,"_file":168,"_extension":160},"/design-system/components/primary-navigation","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","content:design-system:5.components:primary-navigation.md","design-system/5.components/primary-navigation.md",{"_path":170,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":171,"description":172,"layout":11,"label":12,"_type":156,"_id":173,"_source":158,"_file":174,"_extension":160},"/design-system/components/radio-button","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","content:design-system:5.components:radio-button.md","design-system/5.components/radio-button.md",{},[177,182,423],{"title":178,"_path":179,"icon":180,"layout":181},"Ripple Design System","/","carbon:home","home",{"title":183,"_path":184,"children":185},"Design System","/design-system",[186,202,218,247,281],{"title":187,"_path":188,"children":189},"About","/design-system/about",[190,193,196,199],{"title":191,"_path":192,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":194,"_path":195,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":197,"_path":198,"layout":11},"Support","/design-system/about/getting-support",{"title":200,"_path":201,"layout":11},"Contributing","/design-system/about/contributing",{"title":203,"_path":204,"children":205},"Design","/design-system/design",[206,209,212,215],{"title":207,"_path":208,"layout":11},"Getting started","/design-system/design/getting-started",{"title":210,"_path":211,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":213,"_path":214,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":216,"_path":217,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":219,"_path":220,"children":221},"Develop","/design-system/develop",[222,224,226,229],{"title":207,"_path":223,"layout":11},"/design-system/develop/getting-started",{"title":200,"_path":225,"layout":11},"/design-system/develop/contributing",{"title":227,"_path":228,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":230,"children":231,"layout":11},"/design-system/develop/usage",[232,235,238,241,244],{"title":233,"_path":234,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":236,"_path":237,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":239,"_path":240,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":242,"_path":243,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":245,"_path":246,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":248,"_path":249,"children":250},"Styles","/design-system/styles",[251,254,257,260,263,266,269,272,275,278],{"title":252,"_path":253,"layout":11},"Colour","/design-system/styles/colour",{"title":255,"_path":256,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":258,"_path":259,"layout":11},"Grid","/design-system/styles/grid",{"title":261,"_path":262,"layout":11},"Icons","/design-system/styles/icons",{"title":264,"_path":265,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":267,"_path":268,"layout":11},"Layout","/design-system/styles/layout",{"title":270,"_path":271,"layout":11},"Logo","/design-system/styles/logo",{"title":273,"_path":274,"layout":11},"Motion","/design-system/styles/motion",{"title":276,"_path":277,"layout":11},"Spacing","/design-system/styles/spacing",{"title":279,"_path":280,"layout":11},"Typography","/design-system/styles/typography",{"title":282,"_path":283,"children":284},"Components","/design-system/components",[285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,385,386,387,390,393,396,399,402,405,408,411,414,417,420],{"title":286,"_path":287,"layout":11},"Accordion","/design-system/components/accordion",{"title":289,"_path":290,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":292,"_path":293,"layout":11},"Alert","/design-system/components/alert",{"title":295,"_path":296,"layout":11},"Block quote","/design-system/components/block-quote",{"title":298,"_path":299,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":301,"_path":302,"layout":11},"Button","/design-system/components/button",{"title":304,"_path":305,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":307,"_path":308,"layout":11},"Callout","/design-system/components/callout",{"title":310,"_path":311,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":313,"_path":314,"layout":11},"Card","/design-system/components/card",{"title":316,"_path":317,"layout":11},"Carousel","/design-system/components/carousel",{"title":319,"_path":320,"layout":11},"Category grid","/design-system/components/category-grid",{"title":322,"_path":323,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":325,"_path":326,"layout":11},"Chip","/design-system/components/chip",{"title":328,"_path":329,"layout":11},"Contact us","/design-system/components/contact-us",{"title":331,"_path":332,"layout":11},"Date input","/design-system/components/date-input",{"title":334,"_path":335,"layout":11},"Detail list","/design-system/components/detail-list",{"title":337,"_path":338,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":340,"_path":341,"layout":11},"File","/design-system/components/file",{"title":343,"_path":344,"layout":11},"Footer","/design-system/components/footer",{"title":346,"_path":347,"layout":11},"Form alert","/design-system/components/form-alert",{"title":349,"_path":350,"layout":11},"Form","/design-system/components/form",{"title":352,"_path":353,"layout":11},"Header","/design-system/components/header",{"title":355,"_path":356,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":358,"_path":359,"layout":11},"Input field","/design-system/components/input-field",{"title":361,"_path":362,"layout":11},"Key dates","/design-system/components/key-dates",{"title":364,"_path":365,"layout":11},"Media embed","/design-system/components/media-embed",{"title":367,"_path":368,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":370,"_path":371,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":373,"_path":374,"layout":11},"Media","/design-system/components/media",{"title":376,"_path":377,"layout":11},"Option button","/design-system/components/option-button",{"title":379,"_path":380,"layout":11},"Page action","/design-system/components/page-action",{"title":382,"_path":383,"layout":11},"Pagination","/design-system/components/pagination",{"title":165,"_path":164,"layout":11},{"title":9,"_path":5,"layout":11},{"title":171,"_path":170,"layout":11},{"title":388,"_path":389,"layout":11},"Related links","/design-system/components/related-links",{"title":391,"_path":392,"layout":11},"Results listing","/design-system/components/results-listing",{"title":394,"_path":395,"layout":11},"Search bar","/design-system/components/search-bar",{"title":397,"_path":398,"layout":11},"Skip link","/design-system/components/skip-link",{"title":400,"_path":401,"layout":11},"Social share","/design-system/components/social-share",{"title":403,"_path":404,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":406,"_path":407,"layout":11},"Table","/design-system/components/table",{"title":409,"_path":410,"layout":11},"Tabs","/design-system/components/tabs",{"title":412,"_path":413,"layout":11},"Tag","/design-system/components/tag",{"title":415,"_path":416,"layout":11},"Text area","/design-system/components/text-area",{"title":418,"_path":419,"layout":11},"Timeline","/design-system/components/timeline",{"title":421,"_path":422,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":424,"_path":425,"children":426,"layout":11},"Ripple Framework","/framework",[427,428,446,468],{"title":424,"_path":425,"layout":11},{"title":429,"_path":430,"children":431},"Key Concepts","/framework/key-concepts",[432,434,437,440,443],{"title":239,"_path":433,"layout":11},"/framework/key-concepts/nuxt",{"title":435,"_path":436,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":438,"_path":439,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":441,"_path":442,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":444,"_path":445,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":447,"_path":448,"children":449},"Guides","/framework/guides",[450,453,456,459,462,465],{"title":451,"_path":452,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":454,"_path":455,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":457,"_path":458,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":460,"_path":461,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":463,"_path":464,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":466,"_path":467,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":469,"_path":470,"layout":11},"Core modules","/framework/core-modules",["Reactive",472],{"module-navigation":473},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/radio-button/index.html b/design-system/components/radio-button/index.html index c5bb3e89db..53087c7d04 100644 --- a/design-system/components/radio-button/index.html +++ b/design-system/components/radio-button/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Radio button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use radio buttons to let users select one option from a list.<!--]--></p><p><!--[-->They help users make a single selection from a list of available items.<!--]--></p><p><!--[-->Never use radio buttons if a user may select multiple options. Use a checkbox component instead.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Use radio buttons with:<!--]--></p><ul><!--[--><li><!--[-->form label<!--]--></li><li><!--[-->radio label<!--]--></li><li><!--[-->optional requirement label<!--]--></li><li><!--[-->optional hint text.<!--]--></li><!--]--></ul><p><!--[-->Radio buttons should always have a form and radio label.<!--]--></p><p><!--[-->Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.<!--]--></p><p><!--[-->Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use if only one options needs selecting from a list.<!--]--></li><li><!--[-->Use the reverse variant on grey backgrounds.<!--]--></li><li><!--[-->Always write clear and concise radio label descriptions.<!--]--></li><li><!--[-->Ensure you list options in a logical and unbiased manner.<!--]--></li><li><!--[-->If unsure about the list order, place from most common, to least common.<!--]--></li><li><!--[-->Use hints to tell users they can only select one option.<!--]--></li><li><!--[-->Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use for lists with more than one possible option. Use checkboxes for these.<!--]--></li><li><!--[-->Don't use a radio group with an horizontal alignment for displaying more than 2 options.<!--]--></li><li><!--[-->Don't list all possible options. Add an option for 'other'.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Radio buttons have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for radio buttons, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: invalid response to a yes/no question<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user understand why they would say yes.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select yes if [the information is true]’.<!--]--></li><li><!--[-->Example: 'Select yes if you drive a car'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: invalid response to a choice (other than yes/no) from 2 options<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user choose the option that applies to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [the choice you are asking the user to make].'<!--]--></li><li><!--[-->Example: ‘Select if you drive a car or truck’.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: invalid response to a choice from 3 or more options<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose a single option from 3 or more options.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select the [singular piece of information you are seeking from the user].'<!--]--></li><li><!--[-->Example: ‘Select the day of the week you drive the most.'<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Radio buttons use colour for interactive states.<!--]--></p><p><!--[-->A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/radio-button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/radio-button/_payload.json">[{"state":1,"_errors":687,"serverRendered":690,"path":691,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":379,"$sdd-globals":393,"$sdd-navigation":394},{"/design-system/components/radio-button":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":374,"_id":375,"_source":376,"_file":377,"_extension":378},"/design-system/components/radio-button","components",false,"","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","page","Core",{"type":14,"children":15,"toc":359},"root",[16,25,31,36,41,46,53,58,83,88,93,98,104,142,148,166,170,176,181,194,200,203,209,213,219,224,229,238,243,256,264,269,282,290,295,308,311,314,320,325,330,337],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use radio buttons to let users select one option from a list.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"They help users make a single selection from a list of available items.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Never use radio buttons if a user may select multiple options. Use a checkbox component instead.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"forms-radio-group--default-variant",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"how-this-component-works",[51],{"type":23,"value":52},"How this component works",{"type":17,"tag":26,"props":54,"children":55},{},[56],{"type":23,"value":57},"Use radio buttons with:",{"type":17,"tag":59,"props":60,"children":61},"ul",{},[62,68,73,78],{"type":17,"tag":63,"props":64,"children":65},"li",{},[66],{"type":23,"value":67},"form label",{"type":17,"tag":63,"props":69,"children":70},{},[71],{"type":23,"value":72},"radio label",{"type":17,"tag":63,"props":74,"children":75},{},[76],{"type":23,"value":77},"optional requirement label",{"type":17,"tag":63,"props":79,"children":80},{},[81],{"type":23,"value":82},"optional hint text.",{"type":17,"tag":26,"props":84,"children":85},{},[86],{"type":23,"value":87},"Radio buttons should always have a form and radio label.",{"type":17,"tag":26,"props":89,"children":90},{},[91],{"type":23,"value":92},"Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.",{"type":17,"tag":26,"props":94,"children":95},{},[96],{"type":23,"value":97},"Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’.",{"type":17,"tag":47,"props":99,"children":101},{"id":100},"when-and-how-to-use",[102],{"type":23,"value":103},"When and how to use",{"type":17,"tag":59,"props":105,"children":106},{},[107,112,117,122,127,132,137],{"type":17,"tag":63,"props":108,"children":109},{},[110],{"type":23,"value":111},"Use if only one options needs selecting from a list.",{"type":17,"tag":63,"props":113,"children":114},{},[115],{"type":23,"value":116},"Use the reverse variant on grey backgrounds.",{"type":17,"tag":63,"props":118,"children":119},{},[120],{"type":23,"value":121},"Always write clear and concise radio label descriptions.",{"type":17,"tag":63,"props":123,"children":124},{},[125],{"type":23,"value":126},"Ensure you list options in a logical and unbiased manner.",{"type":17,"tag":63,"props":128,"children":129},{},[130],{"type":23,"value":131},"If unsure about the list order, place from most common, to least common.",{"type":17,"tag":63,"props":133,"children":134},{},[135],{"type":23,"value":136},"Use hints to tell users they can only select one option.",{"type":17,"tag":63,"props":138,"children":139},{},[140],{"type":23,"value":141},"Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels.",{"type":17,"tag":47,"props":143,"children":145},{"id":144},"when-and-how-not-to-use",[146],{"type":23,"value":147},"When and how not to use",{"type":17,"tag":59,"props":149,"children":150},{},[151,156,161],{"type":17,"tag":63,"props":152,"children":153},{},[154],{"type":23,"value":155},"Don't use for lists with more than one possible option. Use checkboxes for these.",{"type":17,"tag":63,"props":157,"children":158},{},[159],{"type":23,"value":160},"Don't use a radio group with an horizontal alignment for displaying more than 2 options.",{"type":17,"tag":63,"props":162,"children":163},{},[164],{"type":23,"value":165},"Don't list all possible options. Add an option for 'other'.",{"type":17,"tag":167,"props":168,"children":169},"hr",{},[],{"type":17,"tag":18,"props":171,"children":173},{"id":172},"variants",[174],{"type":23,"value":175},"Variants",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"Radio buttons have 2 variants:",{"type":17,"tag":59,"props":182,"children":183},{},[184,189],{"type":17,"tag":63,"props":185,"children":186},{},[187],{"type":23,"value":188},"default, used on white backgrounds",{"type":17,"tag":63,"props":190,"children":191},{},[192],{"type":23,"value":193},"reverse, used on neutral backgrounds.",{"type":17,"tag":47,"props":195,"children":197},{"id":196},"default",[198],{"type":23,"value":199},"Default",{"type":17,"tag":42,"props":201,"children":202},{"id":44},[],{"type":17,"tag":47,"props":204,"children":206},{"id":205},"reverse",[207],{"type":23,"value":208},"Reverse",{"type":17,"tag":42,"props":210,"children":212},{"id":211},"forms-radio-group--reverse-variant",[],{"type":17,"tag":47,"props":214,"children":216},{"id":215},"error",[217],{"type":23,"value":218},"Error",{"type":17,"tag":26,"props":220,"children":221},{},[222],{"type":23,"value":223},"All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":225,"children":226},{},[227],{"type":23,"value":228},"When creating an error message for radio buttons, use the wording below.",{"type":17,"tag":26,"props":230,"children":231},{},[232],{"type":17,"tag":233,"props":234,"children":235},"strong",{},[236],{"type":23,"value":237},"Error: invalid response to a yes/no question",{"type":17,"tag":26,"props":239,"children":240},{},[241],{"type":23,"value":242},"Structure this message to help the user understand why they would say yes.",{"type":17,"tag":59,"props":244,"children":245},{},[246,251],{"type":17,"tag":63,"props":247,"children":248},{},[249],{"type":23,"value":250},"Error message: ‘Select yes if [the information is true]’.",{"type":17,"tag":63,"props":252,"children":253},{},[254],{"type":23,"value":255},"Example: 'Select yes if you drive a car'.",{"type":17,"tag":26,"props":257,"children":258},{},[259],{"type":17,"tag":233,"props":260,"children":261},{},[262],{"type":23,"value":263},"Error: invalid response to a choice (other than yes/no) from 2 options",{"type":17,"tag":26,"props":265,"children":266},{},[267],{"type":23,"value":268},"Structure this message to help the user choose the option that applies to them.",{"type":17,"tag":59,"props":270,"children":271},{},[272,277],{"type":17,"tag":63,"props":273,"children":274},{},[275],{"type":23,"value":276},"Error message: ‘Select if [the choice you are asking the user to make].'",{"type":17,"tag":63,"props":278,"children":279},{},[280],{"type":23,"value":281},"Example: ‘Select if you drive a car or truck’.",{"type":17,"tag":26,"props":283,"children":284},{},[285],{"type":17,"tag":233,"props":286,"children":287},{},[288],{"type":23,"value":289},"Error: invalid response to a choice from 3 or more options",{"type":17,"tag":26,"props":291,"children":292},{},[293],{"type":23,"value":294},"Structure this message to help the user to choose a single option from 3 or more options.",{"type":17,"tag":59,"props":296,"children":297},{},[298,303],{"type":17,"tag":63,"props":299,"children":300},{},[301],{"type":23,"value":302},"Error message: ‘Select the [singular piece of information you are seeking from the user].'",{"type":17,"tag":63,"props":304,"children":305},{},[306],{"type":23,"value":307},"Example: ‘Select the day of the week you drive the most.'",{"type":17,"tag":42,"props":309,"children":310},{"id":44},[],{"type":17,"tag":167,"props":312,"children":313},{},[],{"type":17,"tag":18,"props":315,"children":317},{"id":316},"theming",[318],{"type":23,"value":319},"Theming",{"type":17,"tag":26,"props":321,"children":322},{},[323],{"type":23,"value":324},"Radio buttons use colour for interactive states.",{"type":17,"tag":26,"props":326,"children":327},{},[328],{"type":23,"value":329},"A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":331,"props":332,"children":333},"docs-theme-chooser",{},[334],{"type":17,"tag":42,"props":335,"children":336},{"id":44},[],{"type":17,"tag":26,"props":338,"children":339},{},[340,342,349,351,357],{"type":23,"value":341},"To create your own theme see ",{"type":17,"tag":343,"props":344,"children":346},"a",{"href":345},"/design-system/design/theming-guidance-for-designers",[347],{"type":23,"value":348},"theming guidance for designers",{"type":23,"value":350}," or ",{"type":17,"tag":343,"props":352,"children":354},{"href":353},"/design-system/develop/theming",[355],{"type":23,"value":356},"theming guidance for developers",{"type":23,"value":358},".",{"title":8,"searchDepth":360,"depth":360,"links":361},2,[362,368,373],{"id":20,"depth":360,"text":24,"children":363},[364,366,367],{"id":49,"depth":365,"text":52},3,{"id":100,"depth":365,"text":103},{"id":144,"depth":365,"text":147},{"id":172,"depth":360,"text":175,"children":369},[370,371,372],{"id":196,"depth":365,"text":199},{"id":205,"depth":365,"text":208},{"id":215,"depth":365,"text":218},{"id":316,"depth":360,"text":319},"markdown","content:design-system:5.components:radio-button.md","content","design-system/5.components/radio-button.md","md",{"/design-system/components/radio-button":380},[381,387],{"_path":382,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":383,"description":384,"layout":11,"label":12,"_type":374,"_id":385,"_source":376,"_file":386,"_extension":378},"/design-system/components/profile","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","content:design-system:5.components:profile.md","design-system/5.components/profile.md",{"_path":388,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":389,"description":390,"layout":11,"label":12,"_type":374,"_id":391,"_source":376,"_file":392,"_extension":378},"/design-system/components/related-links","Related links","The Related links component is a list of links to help users discover related content.","content:design-system:5.components:related-links.md","design-system/5.components/related-links.md",{},[395,400,639],{"title":396,"_path":397,"icon":398,"layout":399},"Ripple Design System","/","carbon:home","home",{"title":401,"_path":402,"children":403},"Design System","/design-system",[404,420,435,463,497],{"title":405,"_path":406,"children":407},"About","/design-system/about",[408,411,414,417],{"title":409,"_path":410,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":412,"_path":413,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":415,"_path":416,"layout":11},"Support","/design-system/about/getting-support",{"title":418,"_path":419,"layout":11},"Contributing","/design-system/about/contributing",{"title":421,"_path":422,"children":423},"Design","/design-system/design",[424,427,430,433],{"title":425,"_path":426,"layout":11},"Getting started","/design-system/design/getting-started",{"title":428,"_path":429,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":431,"_path":432,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":434,"_path":345,"layout":11},"Theming guidance for designers",{"title":436,"_path":437,"children":438},"Develop","/design-system/develop",[439,441,443,445],{"title":425,"_path":440,"layout":11},"/design-system/develop/getting-started",{"title":418,"_path":442,"layout":11},"/design-system/develop/contributing",{"title":444,"_path":353,"layout":11},"Theme and brand application",{"title":24,"_path":446,"children":447,"layout":11},"/design-system/develop/usage",[448,451,454,457,460],{"title":449,"_path":450,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":452,"_path":453,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":455,"_path":456,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":458,"_path":459,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":461,"_path":462,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":464,"_path":465,"children":466},"Styles","/design-system/styles",[467,470,473,476,479,482,485,488,491,494],{"title":468,"_path":469,"layout":11},"Colour","/design-system/styles/colour",{"title":471,"_path":472,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":474,"_path":475,"layout":11},"Grid","/design-system/styles/grid",{"title":477,"_path":478,"layout":11},"Icons","/design-system/styles/icons",{"title":480,"_path":481,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":483,"_path":484,"layout":11},"Layout","/design-system/styles/layout",{"title":486,"_path":487,"layout":11},"Logo","/design-system/styles/logo",{"title":489,"_path":490,"layout":11},"Motion","/design-system/styles/motion",{"title":492,"_path":493,"layout":11},"Spacing","/design-system/styles/spacing",{"title":495,"_path":496,"layout":11},"Typography","/design-system/styles/typography",{"title":498,"_path":499,"children":500},"Components","/design-system/components",[501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573,576,579,582,585,588,591,594,597,600,603,604,605,606,609,612,615,618,621,624,627,630,633,636],{"title":502,"_path":503,"layout":11},"Accordion","/design-system/components/accordion",{"title":505,"_path":506,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":508,"_path":509,"layout":11},"Alert","/design-system/components/alert",{"title":511,"_path":512,"layout":11},"Block quote","/design-system/components/block-quote",{"title":514,"_path":515,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":517,"_path":518,"layout":11},"Button","/design-system/components/button",{"title":520,"_path":521,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":523,"_path":524,"layout":11},"Callout","/design-system/components/callout",{"title":526,"_path":527,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":529,"_path":530,"layout":11},"Card","/design-system/components/card",{"title":532,"_path":533,"layout":11},"Carousel","/design-system/components/carousel",{"title":535,"_path":536,"layout":11},"Category grid","/design-system/components/category-grid",{"title":538,"_path":539,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":541,"_path":542,"layout":11},"Chip","/design-system/components/chip",{"title":544,"_path":545,"layout":11},"Contact us","/design-system/components/contact-us",{"title":547,"_path":548,"layout":11},"Date input","/design-system/components/date-input",{"title":550,"_path":551,"layout":11},"Detail list","/design-system/components/detail-list",{"title":553,"_path":554,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":556,"_path":557,"layout":11},"File","/design-system/components/file",{"title":559,"_path":560,"layout":11},"Footer","/design-system/components/footer",{"title":562,"_path":563,"layout":11},"Form alert","/design-system/components/form-alert",{"title":565,"_path":566,"layout":11},"Form","/design-system/components/form",{"title":568,"_path":569,"layout":11},"Header","/design-system/components/header",{"title":571,"_path":572,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":574,"_path":575,"layout":11},"Input field","/design-system/components/input-field",{"title":577,"_path":578,"layout":11},"Key dates","/design-system/components/key-dates",{"title":580,"_path":581,"layout":11},"Media embed","/design-system/components/media-embed",{"title":583,"_path":584,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":586,"_path":587,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":589,"_path":590,"layout":11},"Media","/design-system/components/media",{"title":592,"_path":593,"layout":11},"Option button","/design-system/components/option-button",{"title":595,"_path":596,"layout":11},"Page action","/design-system/components/page-action",{"title":598,"_path":599,"layout":11},"Pagination","/design-system/components/pagination",{"title":601,"_path":602,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":383,"_path":382,"layout":11},{"title":9,"_path":5,"layout":11},{"title":389,"_path":388,"layout":11},{"title":607,"_path":608,"layout":11},"Results listing","/design-system/components/results-listing",{"title":610,"_path":611,"layout":11},"Search bar","/design-system/components/search-bar",{"title":613,"_path":614,"layout":11},"Skip link","/design-system/components/skip-link",{"title":616,"_path":617,"layout":11},"Social share","/design-system/components/social-share",{"title":619,"_path":620,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":622,"_path":623,"layout":11},"Table","/design-system/components/table",{"title":625,"_path":626,"layout":11},"Tabs","/design-system/components/tabs",{"title":628,"_path":629,"layout":11},"Tag","/design-system/components/tag",{"title":631,"_path":632,"layout":11},"Text area","/design-system/components/text-area",{"title":634,"_path":635,"layout":11},"Timeline","/design-system/components/timeline",{"title":637,"_path":638,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":640,"_path":641,"children":642,"layout":11},"Ripple Framework","/framework",[643,644,662,684],{"title":640,"_path":641,"layout":11},{"title":645,"_path":646,"children":647},"Key Concepts","/framework/key-concepts",[648,650,653,656,659],{"title":455,"_path":649,"layout":11},"/framework/key-concepts/nuxt",{"title":651,"_path":652,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":654,"_path":655,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":657,"_path":658,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":660,"_path":661,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":663,"_path":664,"children":665},"Guides","/framework/guides",[666,669,672,675,678,681],{"title":667,"_path":668,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":670,"_path":671,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":673,"_path":674,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":676,"_path":677,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":679,"_path":680,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":682,"_path":683,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":685,"_path":686,"layout":11},"Core modules","/framework/core-modules",["Reactive",688],{"module-navigation":689},null,true,"/design-system/components/radio-button/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Radio button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use radio buttons to let users select one option from a list.<!--]--></p><p><!--[-->They help users make a single selection from a list of available items.<!--]--></p><p><!--[-->Never use radio buttons if a user may select multiple options. Use a checkbox component instead.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Use radio buttons with:<!--]--></p><ul><!--[--><li><!--[-->form label<!--]--></li><li><!--[-->radio label<!--]--></li><li><!--[-->optional requirement label<!--]--></li><li><!--[-->optional hint text.<!--]--></li><!--]--></ul><p><!--[-->Radio buttons should always have a form and radio label.<!--]--></p><p><!--[-->Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.<!--]--></p><p><!--[-->Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use if only one options needs selecting from a list.<!--]--></li><li><!--[-->Use the reverse variant on grey backgrounds.<!--]--></li><li><!--[-->Always write clear and concise radio label descriptions.<!--]--></li><li><!--[-->Ensure you list options in a logical and unbiased manner.<!--]--></li><li><!--[-->If unsure about the list order, place from most common, to least common.<!--]--></li><li><!--[-->Use hints to tell users they can only select one option.<!--]--></li><li><!--[-->Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use for lists with more than one possible option. Use checkboxes for these.<!--]--></li><li><!--[-->Don't use a radio group with an horizontal alignment for displaying more than 2 options.<!--]--></li><li><!--[-->Don't list all possible options. Add an option for 'other'.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Radio buttons have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--reverse-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for radio buttons, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: invalid response to a yes/no question<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user understand why they would say yes.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select yes if [the information is true]’.<!--]--></li><li><!--[-->Example: 'Select yes if you drive a car'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: invalid response to a choice (other than yes/no) from 2 options<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user choose the option that applies to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [the choice you are asking the user to make].'<!--]--></li><li><!--[-->Example: ‘Select if you drive a car or truck’.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: invalid response to a choice from 3 or more options<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose a single option from 3 or more options.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select the [singular piece of information you are seeking from the user].'<!--]--></li><li><!--[-->Example: ‘Select the day of the week you drive the most.'<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Radio buttons use colour for interactive states.<!--]--></p><p><!--[-->A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/radio-button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/radio-button/_payload.json">[{"state":1,"_errors":687,"serverRendered":690,"path":691,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":379,"$sdd-globals":393,"$sdd-navigation":394},{"/design-system/components/radio-button":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":374,"_id":375,"_source":376,"_file":377,"_extension":378},"/design-system/components/radio-button","components",false,"","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","page","Core",{"type":14,"children":15,"toc":359},"root",[16,25,31,36,41,46,53,58,83,88,93,98,104,142,148,166,170,176,181,194,200,203,209,213,219,224,229,238,243,256,264,269,282,290,295,308,311,314,320,325,330,337],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use radio buttons to let users select one option from a list.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"They help users make a single selection from a list of available items.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Never use radio buttons if a user may select multiple options. Use a checkbox component instead.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"forms-radio-group--default-variant",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"how-this-component-works",[51],{"type":23,"value":52},"How this component works",{"type":17,"tag":26,"props":54,"children":55},{},[56],{"type":23,"value":57},"Use radio buttons with:",{"type":17,"tag":59,"props":60,"children":61},"ul",{},[62,68,73,78],{"type":17,"tag":63,"props":64,"children":65},"li",{},[66],{"type":23,"value":67},"form label",{"type":17,"tag":63,"props":69,"children":70},{},[71],{"type":23,"value":72},"radio label",{"type":17,"tag":63,"props":74,"children":75},{},[76],{"type":23,"value":77},"optional requirement label",{"type":17,"tag":63,"props":79,"children":80},{},[81],{"type":23,"value":82},"optional hint text.",{"type":17,"tag":26,"props":84,"children":85},{},[86],{"type":23,"value":87},"Radio buttons should always have a form and radio label.",{"type":17,"tag":26,"props":89,"children":90},{},[91],{"type":23,"value":92},"Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.",{"type":17,"tag":26,"props":94,"children":95},{},[96],{"type":23,"value":97},"Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’.",{"type":17,"tag":47,"props":99,"children":101},{"id":100},"when-and-how-to-use",[102],{"type":23,"value":103},"When and how to use",{"type":17,"tag":59,"props":105,"children":106},{},[107,112,117,122,127,132,137],{"type":17,"tag":63,"props":108,"children":109},{},[110],{"type":23,"value":111},"Use if only one options needs selecting from a list.",{"type":17,"tag":63,"props":113,"children":114},{},[115],{"type":23,"value":116},"Use the reverse variant on grey backgrounds.",{"type":17,"tag":63,"props":118,"children":119},{},[120],{"type":23,"value":121},"Always write clear and concise radio label descriptions.",{"type":17,"tag":63,"props":123,"children":124},{},[125],{"type":23,"value":126},"Ensure you list options in a logical and unbiased manner.",{"type":17,"tag":63,"props":128,"children":129},{},[130],{"type":23,"value":131},"If unsure about the list order, place from most common, to least common.",{"type":17,"tag":63,"props":133,"children":134},{},[135],{"type":23,"value":136},"Use hints to tell users they can only select one option.",{"type":17,"tag":63,"props":138,"children":139},{},[140],{"type":23,"value":141},"Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels.",{"type":17,"tag":47,"props":143,"children":145},{"id":144},"when-and-how-not-to-use",[146],{"type":23,"value":147},"When and how not to use",{"type":17,"tag":59,"props":149,"children":150},{},[151,156,161],{"type":17,"tag":63,"props":152,"children":153},{},[154],{"type":23,"value":155},"Don't use for lists with more than one possible option. Use checkboxes for these.",{"type":17,"tag":63,"props":157,"children":158},{},[159],{"type":23,"value":160},"Don't use a radio group with an horizontal alignment for displaying more than 2 options.",{"type":17,"tag":63,"props":162,"children":163},{},[164],{"type":23,"value":165},"Don't list all possible options. Add an option for 'other'.",{"type":17,"tag":167,"props":168,"children":169},"hr",{},[],{"type":17,"tag":18,"props":171,"children":173},{"id":172},"variants",[174],{"type":23,"value":175},"Variants",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"Radio buttons have 2 variants:",{"type":17,"tag":59,"props":182,"children":183},{},[184,189],{"type":17,"tag":63,"props":185,"children":186},{},[187],{"type":23,"value":188},"default, used on white backgrounds",{"type":17,"tag":63,"props":190,"children":191},{},[192],{"type":23,"value":193},"reverse, used on neutral backgrounds.",{"type":17,"tag":47,"props":195,"children":197},{"id":196},"default",[198],{"type":23,"value":199},"Default",{"type":17,"tag":42,"props":201,"children":202},{"id":44},[],{"type":17,"tag":47,"props":204,"children":206},{"id":205},"reverse",[207],{"type":23,"value":208},"Reverse",{"type":17,"tag":42,"props":210,"children":212},{"id":211},"forms-radio-group--reverse-variant",[],{"type":17,"tag":47,"props":214,"children":216},{"id":215},"error",[217],{"type":23,"value":218},"Error",{"type":17,"tag":26,"props":220,"children":221},{},[222],{"type":23,"value":223},"All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":225,"children":226},{},[227],{"type":23,"value":228},"When creating an error message for radio buttons, use the wording below.",{"type":17,"tag":26,"props":230,"children":231},{},[232],{"type":17,"tag":233,"props":234,"children":235},"strong",{},[236],{"type":23,"value":237},"Error: invalid response to a yes/no question",{"type":17,"tag":26,"props":239,"children":240},{},[241],{"type":23,"value":242},"Structure this message to help the user understand why they would say yes.",{"type":17,"tag":59,"props":244,"children":245},{},[246,251],{"type":17,"tag":63,"props":247,"children":248},{},[249],{"type":23,"value":250},"Error message: ‘Select yes if [the information is true]’.",{"type":17,"tag":63,"props":252,"children":253},{},[254],{"type":23,"value":255},"Example: 'Select yes if you drive a car'.",{"type":17,"tag":26,"props":257,"children":258},{},[259],{"type":17,"tag":233,"props":260,"children":261},{},[262],{"type":23,"value":263},"Error: invalid response to a choice (other than yes/no) from 2 options",{"type":17,"tag":26,"props":265,"children":266},{},[267],{"type":23,"value":268},"Structure this message to help the user choose the option that applies to them.",{"type":17,"tag":59,"props":270,"children":271},{},[272,277],{"type":17,"tag":63,"props":273,"children":274},{},[275],{"type":23,"value":276},"Error message: ‘Select if [the choice you are asking the user to make].'",{"type":17,"tag":63,"props":278,"children":279},{},[280],{"type":23,"value":281},"Example: ‘Select if you drive a car or truck’.",{"type":17,"tag":26,"props":283,"children":284},{},[285],{"type":17,"tag":233,"props":286,"children":287},{},[288],{"type":23,"value":289},"Error: invalid response to a choice from 3 or more options",{"type":17,"tag":26,"props":291,"children":292},{},[293],{"type":23,"value":294},"Structure this message to help the user to choose a single option from 3 or more options.",{"type":17,"tag":59,"props":296,"children":297},{},[298,303],{"type":17,"tag":63,"props":299,"children":300},{},[301],{"type":23,"value":302},"Error message: ‘Select the [singular piece of information you are seeking from the user].'",{"type":17,"tag":63,"props":304,"children":305},{},[306],{"type":23,"value":307},"Example: ‘Select the day of the week you drive the most.'",{"type":17,"tag":42,"props":309,"children":310},{"id":44},[],{"type":17,"tag":167,"props":312,"children":313},{},[],{"type":17,"tag":18,"props":315,"children":317},{"id":316},"theming",[318],{"type":23,"value":319},"Theming",{"type":17,"tag":26,"props":321,"children":322},{},[323],{"type":23,"value":324},"Radio buttons use colour for interactive states.",{"type":17,"tag":26,"props":326,"children":327},{},[328],{"type":23,"value":329},"A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":331,"props":332,"children":333},"docs-theme-chooser",{},[334],{"type":17,"tag":42,"props":335,"children":336},{"id":44},[],{"type":17,"tag":26,"props":338,"children":339},{},[340,342,349,351,357],{"type":23,"value":341},"To create your own theme see ",{"type":17,"tag":343,"props":344,"children":346},"a",{"href":345},"/design-system/design/theming-guidance-for-designers",[347],{"type":23,"value":348},"theming guidance for designers",{"type":23,"value":350}," or ",{"type":17,"tag":343,"props":352,"children":354},{"href":353},"/design-system/develop/theming",[355],{"type":23,"value":356},"theming guidance for developers",{"type":23,"value":358},".",{"title":8,"searchDepth":360,"depth":360,"links":361},2,[362,368,373],{"id":20,"depth":360,"text":24,"children":363},[364,366,367],{"id":49,"depth":365,"text":52},3,{"id":100,"depth":365,"text":103},{"id":144,"depth":365,"text":147},{"id":172,"depth":360,"text":175,"children":369},[370,371,372],{"id":196,"depth":365,"text":199},{"id":205,"depth":365,"text":208},{"id":215,"depth":365,"text":218},{"id":316,"depth":360,"text":319},"markdown","content:design-system:5.components:radio-button.md","content","design-system/5.components/radio-button.md","md",{"/design-system/components/radio-button":380},[381,387],{"_path":382,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":383,"description":384,"layout":11,"label":12,"_type":374,"_id":385,"_source":376,"_file":386,"_extension":378},"/design-system/components/profile","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","content:design-system:5.components:profile.md","design-system/5.components/profile.md",{"_path":388,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":389,"description":390,"layout":11,"label":12,"_type":374,"_id":391,"_source":376,"_file":392,"_extension":378},"/design-system/components/related-links","Related links","The Related links component is a list of links to help users discover related content.","content:design-system:5.components:related-links.md","design-system/5.components/related-links.md",{},[395,400,639],{"title":396,"_path":397,"icon":398,"layout":399},"Ripple Design System","/","carbon:home","home",{"title":401,"_path":402,"children":403},"Design System","/design-system",[404,420,435,463,497],{"title":405,"_path":406,"children":407},"About","/design-system/about",[408,411,414,417],{"title":409,"_path":410,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":412,"_path":413,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":415,"_path":416,"layout":11},"Support","/design-system/about/getting-support",{"title":418,"_path":419,"layout":11},"Contributing","/design-system/about/contributing",{"title":421,"_path":422,"children":423},"Design","/design-system/design",[424,427,430,433],{"title":425,"_path":426,"layout":11},"Getting started","/design-system/design/getting-started",{"title":428,"_path":429,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":431,"_path":432,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":434,"_path":345,"layout":11},"Theming guidance for designers",{"title":436,"_path":437,"children":438},"Develop","/design-system/develop",[439,441,443,445],{"title":425,"_path":440,"layout":11},"/design-system/develop/getting-started",{"title":418,"_path":442,"layout":11},"/design-system/develop/contributing",{"title":444,"_path":353,"layout":11},"Theme and brand application",{"title":24,"_path":446,"children":447,"layout":11},"/design-system/develop/usage",[448,451,454,457,460],{"title":449,"_path":450,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":452,"_path":453,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":455,"_path":456,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":458,"_path":459,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":461,"_path":462,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":464,"_path":465,"children":466},"Styles","/design-system/styles",[467,470,473,476,479,482,485,488,491,494],{"title":468,"_path":469,"layout":11},"Colour","/design-system/styles/colour",{"title":471,"_path":472,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":474,"_path":475,"layout":11},"Grid","/design-system/styles/grid",{"title":477,"_path":478,"layout":11},"Icons","/design-system/styles/icons",{"title":480,"_path":481,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":483,"_path":484,"layout":11},"Layout","/design-system/styles/layout",{"title":486,"_path":487,"layout":11},"Logo","/design-system/styles/logo",{"title":489,"_path":490,"layout":11},"Motion","/design-system/styles/motion",{"title":492,"_path":493,"layout":11},"Spacing","/design-system/styles/spacing",{"title":495,"_path":496,"layout":11},"Typography","/design-system/styles/typography",{"title":498,"_path":499,"children":500},"Components","/design-system/components",[501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573,576,579,582,585,588,591,594,597,600,603,604,605,606,609,612,615,618,621,624,627,630,633,636],{"title":502,"_path":503,"layout":11},"Accordion","/design-system/components/accordion",{"title":505,"_path":506,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":508,"_path":509,"layout":11},"Alert","/design-system/components/alert",{"title":511,"_path":512,"layout":11},"Block quote","/design-system/components/block-quote",{"title":514,"_path":515,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":517,"_path":518,"layout":11},"Button","/design-system/components/button",{"title":520,"_path":521,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":523,"_path":524,"layout":11},"Callout","/design-system/components/callout",{"title":526,"_path":527,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":529,"_path":530,"layout":11},"Card","/design-system/components/card",{"title":532,"_path":533,"layout":11},"Carousel","/design-system/components/carousel",{"title":535,"_path":536,"layout":11},"Category grid","/design-system/components/category-grid",{"title":538,"_path":539,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":541,"_path":542,"layout":11},"Chip","/design-system/components/chip",{"title":544,"_path":545,"layout":11},"Contact us","/design-system/components/contact-us",{"title":547,"_path":548,"layout":11},"Date input","/design-system/components/date-input",{"title":550,"_path":551,"layout":11},"Detail list","/design-system/components/detail-list",{"title":553,"_path":554,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":556,"_path":557,"layout":11},"File","/design-system/components/file",{"title":559,"_path":560,"layout":11},"Footer","/design-system/components/footer",{"title":562,"_path":563,"layout":11},"Form alert","/design-system/components/form-alert",{"title":565,"_path":566,"layout":11},"Form","/design-system/components/form",{"title":568,"_path":569,"layout":11},"Header","/design-system/components/header",{"title":571,"_path":572,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":574,"_path":575,"layout":11},"Input field","/design-system/components/input-field",{"title":577,"_path":578,"layout":11},"Key dates","/design-system/components/key-dates",{"title":580,"_path":581,"layout":11},"Media embed","/design-system/components/media-embed",{"title":583,"_path":584,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":586,"_path":587,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":589,"_path":590,"layout":11},"Media","/design-system/components/media",{"title":592,"_path":593,"layout":11},"Option button","/design-system/components/option-button",{"title":595,"_path":596,"layout":11},"Page action","/design-system/components/page-action",{"title":598,"_path":599,"layout":11},"Pagination","/design-system/components/pagination",{"title":601,"_path":602,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":383,"_path":382,"layout":11},{"title":9,"_path":5,"layout":11},{"title":389,"_path":388,"layout":11},{"title":607,"_path":608,"layout":11},"Results listing","/design-system/components/results-listing",{"title":610,"_path":611,"layout":11},"Search bar","/design-system/components/search-bar",{"title":613,"_path":614,"layout":11},"Skip link","/design-system/components/skip-link",{"title":616,"_path":617,"layout":11},"Social share","/design-system/components/social-share",{"title":619,"_path":620,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":622,"_path":623,"layout":11},"Table","/design-system/components/table",{"title":625,"_path":626,"layout":11},"Tabs","/design-system/components/tabs",{"title":628,"_path":629,"layout":11},"Tag","/design-system/components/tag",{"title":631,"_path":632,"layout":11},"Text area","/design-system/components/text-area",{"title":634,"_path":635,"layout":11},"Timeline","/design-system/components/timeline",{"title":637,"_path":638,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":640,"_path":641,"children":642,"layout":11},"Ripple Framework","/framework",[643,644,662,684],{"title":640,"_path":641,"layout":11},{"title":645,"_path":646,"children":647},"Key Concepts","/framework/key-concepts",[648,650,653,656,659],{"title":455,"_path":649,"layout":11},"/framework/key-concepts/nuxt",{"title":651,"_path":652,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":654,"_path":655,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":657,"_path":658,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":660,"_path":661,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":663,"_path":664,"children":665},"Guides","/framework/guides",[666,669,672,675,678,681],{"title":667,"_path":668,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":670,"_path":671,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":673,"_path":674,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":676,"_path":677,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":679,"_path":680,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":682,"_path":683,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":685,"_path":686,"layout":11},"Core modules","/framework/core-modules",["Reactive",688],{"module-navigation":689},null,true,"/design-system/components/radio-button/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/related-links/index.html b/design-system/components/related-links/index.html index 836774b6a9..deb07fa951 100644 --- a/design-system/components/related-links/index.html +++ b/design-system/components/related-links/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Related links</h1><p class="rpl-type-p-large" data-v-3163c6df>The Related links component is a list of links to help users discover related content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action.<!--]--></p><p><!--[-->Use if you’re presenting the user with related information or actions to help them deep dive into content.<!--]--></p><p><!--[-->Don't use related links for linking to unrelated content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-related-links--related-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-related-links--related-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use to help users discover related content.<!--]--></li><li><!--[-->Only use in the sidebar section pages.<!--]--></li><li><!--[-->Use at least 2 links.<!--]--></li><li><!--[-->Use no more than 8 links.<!--]--></li><li><!--[-->Keep description clear, concise and specific to each link.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't add unrelated links.<!--]--></li><li><!--[-->Don't overload each link with too many words.<!--]--></li><li><!--[-->Don't use punctuation.<!--]--></li><li><!--[-->Don't link to documents or videos - instead, embed them.<!--]--></li><li><!--[-->Don't include other interactive elements, like buttons.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/related-links.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/related-links/_payload.json">[{"state":1,"_errors":440,"serverRendered":443,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":130,"$sdd-globals":144,"$sdd-navigation":145},{"/design-system/components/related-links":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":125,"_id":126,"_source":127,"_file":128,"_extension":129},"/design-system/components/related-links","components",false,"","Related links","The Related links component is a list of links to help users discover related content.","page","Core",{"type":14,"children":15,"toc":117},"root",[16,25,31,36,41,46,53,83,89],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use if you’re presenting the user with related information or actions to help them deep dive into content.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Don't use related links for linking to unrelated content.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-navigation-related-links--related-links",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68,73,78],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Use to help users discover related content.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Only use in the sidebar section pages.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use at least 2 links.",{"type":17,"tag":58,"props":74,"children":75},{},[76],{"type":23,"value":77},"Use no more than 8 links.",{"type":17,"tag":58,"props":79,"children":80},{},[81],{"type":23,"value":82},"Keep description clear, concise and specific to each link.",{"type":17,"tag":47,"props":84,"children":86},{"id":85},"when-and-how-not-to-use",[87],{"type":23,"value":88},"When and how not to use",{"type":17,"tag":54,"props":90,"children":91},{},[92,97,102,107,112],{"type":17,"tag":58,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don't add unrelated links.",{"type":17,"tag":58,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don't overload each link with too many words.",{"type":17,"tag":58,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don't use punctuation.",{"type":17,"tag":58,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don't link to documents or videos - instead, embed them.",{"type":17,"tag":58,"props":113,"children":114},{},[115],{"type":23,"value":116},"Don't include other interactive elements, like buttons.",{"title":8,"searchDepth":118,"depth":118,"links":119},2,[120],{"id":20,"depth":118,"text":24,"children":121},[122,124],{"id":49,"depth":123,"text":52},3,{"id":85,"depth":123,"text":88},"markdown","content:design-system:5.components:related-links.md","content","design-system/5.components/related-links.md","md",{"/design-system/components/related-links":131},[132,138],{"_path":133,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":134,"description":135,"layout":11,"label":12,"_type":125,"_id":136,"_source":127,"_file":137,"_extension":129},"/design-system/components/radio-button","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","content:design-system:5.components:radio-button.md","design-system/5.components/radio-button.md",{"_path":139,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":140,"description":141,"layout":11,"label":12,"_type":125,"_id":142,"_source":127,"_file":143,"_extension":129},"/design-system/components/results-listing","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","content:design-system:5.components:results-listing.md","design-system/5.components/results-listing.md",{},[146,151,392],{"title":147,"_path":148,"icon":149,"layout":150},"Ripple Design System","/","carbon:home","home",{"title":152,"_path":153,"children":154},"Design System","/design-system",[155,171,187,216,250],{"title":156,"_path":157,"children":158},"About","/design-system/about",[159,162,165,168],{"title":160,"_path":161,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":163,"_path":164,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":166,"_path":167,"layout":11},"Support","/design-system/about/getting-support",{"title":169,"_path":170,"layout":11},"Contributing","/design-system/about/contributing",{"title":172,"_path":173,"children":174},"Design","/design-system/design",[175,178,181,184],{"title":176,"_path":177,"layout":11},"Getting started","/design-system/design/getting-started",{"title":179,"_path":180,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":182,"_path":183,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":185,"_path":186,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":188,"_path":189,"children":190},"Develop","/design-system/develop",[191,193,195,198],{"title":176,"_path":192,"layout":11},"/design-system/develop/getting-started",{"title":169,"_path":194,"layout":11},"/design-system/develop/contributing",{"title":196,"_path":197,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":199,"children":200,"layout":11},"/design-system/develop/usage",[201,204,207,210,213],{"title":202,"_path":203,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":205,"_path":206,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":208,"_path":209,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":211,"_path":212,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":214,"_path":215,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":217,"_path":218,"children":219},"Styles","/design-system/styles",[220,223,226,229,232,235,238,241,244,247],{"title":221,"_path":222,"layout":11},"Colour","/design-system/styles/colour",{"title":224,"_path":225,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":227,"_path":228,"layout":11},"Grid","/design-system/styles/grid",{"title":230,"_path":231,"layout":11},"Icons","/design-system/styles/icons",{"title":233,"_path":234,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":236,"_path":237,"layout":11},"Layout","/design-system/styles/layout",{"title":239,"_path":240,"layout":11},"Logo","/design-system/styles/logo",{"title":242,"_path":243,"layout":11},"Motion","/design-system/styles/motion",{"title":245,"_path":246,"layout":11},"Spacing","/design-system/styles/spacing",{"title":248,"_path":249,"layout":11},"Typography","/design-system/styles/typography",{"title":251,"_path":252,"children":253},"Components","/design-system/components",[254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,360,361,362,365,368,371,374,377,380,383,386,389],{"title":255,"_path":256,"layout":11},"Accordion","/design-system/components/accordion",{"title":258,"_path":259,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":261,"_path":262,"layout":11},"Alert","/design-system/components/alert",{"title":264,"_path":265,"layout":11},"Block quote","/design-system/components/block-quote",{"title":267,"_path":268,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":270,"_path":271,"layout":11},"Button","/design-system/components/button",{"title":273,"_path":274,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":276,"_path":277,"layout":11},"Callout","/design-system/components/callout",{"title":279,"_path":280,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":282,"_path":283,"layout":11},"Card","/design-system/components/card",{"title":285,"_path":286,"layout":11},"Carousel","/design-system/components/carousel",{"title":288,"_path":289,"layout":11},"Category grid","/design-system/components/category-grid",{"title":291,"_path":292,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":294,"_path":295,"layout":11},"Chip","/design-system/components/chip",{"title":297,"_path":298,"layout":11},"Contact us","/design-system/components/contact-us",{"title":300,"_path":301,"layout":11},"Date input","/design-system/components/date-input",{"title":303,"_path":304,"layout":11},"Detail list","/design-system/components/detail-list",{"title":306,"_path":307,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":309,"_path":310,"layout":11},"File","/design-system/components/file",{"title":312,"_path":313,"layout":11},"Footer","/design-system/components/footer",{"title":315,"_path":316,"layout":11},"Form alert","/design-system/components/form-alert",{"title":318,"_path":319,"layout":11},"Form","/design-system/components/form",{"title":321,"_path":322,"layout":11},"Header","/design-system/components/header",{"title":324,"_path":325,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":327,"_path":328,"layout":11},"Input field","/design-system/components/input-field",{"title":330,"_path":331,"layout":11},"Key dates","/design-system/components/key-dates",{"title":333,"_path":334,"layout":11},"Media embed","/design-system/components/media-embed",{"title":336,"_path":337,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":339,"_path":340,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":342,"_path":343,"layout":11},"Media","/design-system/components/media",{"title":345,"_path":346,"layout":11},"Option button","/design-system/components/option-button",{"title":348,"_path":349,"layout":11},"Page action","/design-system/components/page-action",{"title":351,"_path":352,"layout":11},"Pagination","/design-system/components/pagination",{"title":354,"_path":355,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":357,"_path":358,"layout":11},"Profile","/design-system/components/profile",{"title":134,"_path":133,"layout":11},{"title":9,"_path":5,"layout":11},{"title":140,"_path":139,"layout":11},{"title":363,"_path":364,"layout":11},"Search bar","/design-system/components/search-bar",{"title":366,"_path":367,"layout":11},"Skip link","/design-system/components/skip-link",{"title":369,"_path":370,"layout":11},"Social share","/design-system/components/social-share",{"title":372,"_path":373,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":375,"_path":376,"layout":11},"Table","/design-system/components/table",{"title":378,"_path":379,"layout":11},"Tabs","/design-system/components/tabs",{"title":381,"_path":382,"layout":11},"Tag","/design-system/components/tag",{"title":384,"_path":385,"layout":11},"Text area","/design-system/components/text-area",{"title":387,"_path":388,"layout":11},"Timeline","/design-system/components/timeline",{"title":390,"_path":391,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":393,"_path":394,"children":395,"layout":11},"Ripple Framework","/framework",[396,397,415,437],{"title":393,"_path":394,"layout":11},{"title":398,"_path":399,"children":400},"Key Concepts","/framework/key-concepts",[401,403,406,409,412],{"title":208,"_path":402,"layout":11},"/framework/key-concepts/nuxt",{"title":404,"_path":405,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":407,"_path":408,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":410,"_path":411,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":413,"_path":414,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":416,"_path":417,"children":418},"Guides","/framework/guides",[419,422,425,428,431,434],{"title":420,"_path":421,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":423,"_path":424,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":426,"_path":427,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":429,"_path":430,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":432,"_path":433,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":435,"_path":436,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":438,"_path":439,"layout":11},"Core modules","/framework/core-modules",["Reactive",441],{"module-navigation":442},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Related links</h1><p class="rpl-type-p-large" data-v-3163c6df>The Related links component is a list of links to help users discover related content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action.<!--]--></p><p><!--[-->Use if you’re presenting the user with related information or actions to help them deep dive into content.<!--]--></p><p><!--[-->Don't use related links for linking to unrelated content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-related-links--related-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-related-links--related-links&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use to help users discover related content.<!--]--></li><li><!--[-->Only use in the sidebar section pages.<!--]--></li><li><!--[-->Use at least 2 links.<!--]--></li><li><!--[-->Use no more than 8 links.<!--]--></li><li><!--[-->Keep description clear, concise and specific to each link.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't add unrelated links.<!--]--></li><li><!--[-->Don't overload each link with too many words.<!--]--></li><li><!--[-->Don't use punctuation.<!--]--></li><li><!--[-->Don't link to documents or videos - instead, embed them.<!--]--></li><li><!--[-->Don't include other interactive elements, like buttons.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/related-links.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/related-links/_payload.json">[{"state":1,"_errors":440,"serverRendered":443,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":130,"$sdd-globals":144,"$sdd-navigation":145},{"/design-system/components/related-links":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":125,"_id":126,"_source":127,"_file":128,"_extension":129},"/design-system/components/related-links","components",false,"","Related links","The Related links component is a list of links to help users discover related content.","page","Core",{"type":14,"children":15,"toc":117},"root",[16,25,31,36,41,46,53,83,89],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use if you’re presenting the user with related information or actions to help them deep dive into content.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Don't use related links for linking to unrelated content.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-navigation-related-links--related-links",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68,73,78],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Use to help users discover related content.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Only use in the sidebar section pages.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use at least 2 links.",{"type":17,"tag":58,"props":74,"children":75},{},[76],{"type":23,"value":77},"Use no more than 8 links.",{"type":17,"tag":58,"props":79,"children":80},{},[81],{"type":23,"value":82},"Keep description clear, concise and specific to each link.",{"type":17,"tag":47,"props":84,"children":86},{"id":85},"when-and-how-not-to-use",[87],{"type":23,"value":88},"When and how not to use",{"type":17,"tag":54,"props":90,"children":91},{},[92,97,102,107,112],{"type":17,"tag":58,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don't add unrelated links.",{"type":17,"tag":58,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don't overload each link with too many words.",{"type":17,"tag":58,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don't use punctuation.",{"type":17,"tag":58,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don't link to documents or videos - instead, embed them.",{"type":17,"tag":58,"props":113,"children":114},{},[115],{"type":23,"value":116},"Don't include other interactive elements, like buttons.",{"title":8,"searchDepth":118,"depth":118,"links":119},2,[120],{"id":20,"depth":118,"text":24,"children":121},[122,124],{"id":49,"depth":123,"text":52},3,{"id":85,"depth":123,"text":88},"markdown","content:design-system:5.components:related-links.md","content","design-system/5.components/related-links.md","md",{"/design-system/components/related-links":131},[132,138],{"_path":133,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":134,"description":135,"layout":11,"label":12,"_type":125,"_id":136,"_source":127,"_file":137,"_extension":129},"/design-system/components/radio-button","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","content:design-system:5.components:radio-button.md","design-system/5.components/radio-button.md",{"_path":139,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":140,"description":141,"layout":11,"label":12,"_type":125,"_id":142,"_source":127,"_file":143,"_extension":129},"/design-system/components/results-listing","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","content:design-system:5.components:results-listing.md","design-system/5.components/results-listing.md",{},[146,151,392],{"title":147,"_path":148,"icon":149,"layout":150},"Ripple Design System","/","carbon:home","home",{"title":152,"_path":153,"children":154},"Design System","/design-system",[155,171,187,216,250],{"title":156,"_path":157,"children":158},"About","/design-system/about",[159,162,165,168],{"title":160,"_path":161,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":163,"_path":164,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":166,"_path":167,"layout":11},"Support","/design-system/about/getting-support",{"title":169,"_path":170,"layout":11},"Contributing","/design-system/about/contributing",{"title":172,"_path":173,"children":174},"Design","/design-system/design",[175,178,181,184],{"title":176,"_path":177,"layout":11},"Getting started","/design-system/design/getting-started",{"title":179,"_path":180,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":182,"_path":183,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":185,"_path":186,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":188,"_path":189,"children":190},"Develop","/design-system/develop",[191,193,195,198],{"title":176,"_path":192,"layout":11},"/design-system/develop/getting-started",{"title":169,"_path":194,"layout":11},"/design-system/develop/contributing",{"title":196,"_path":197,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":199,"children":200,"layout":11},"/design-system/develop/usage",[201,204,207,210,213],{"title":202,"_path":203,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":205,"_path":206,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":208,"_path":209,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":211,"_path":212,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":214,"_path":215,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":217,"_path":218,"children":219},"Styles","/design-system/styles",[220,223,226,229,232,235,238,241,244,247],{"title":221,"_path":222,"layout":11},"Colour","/design-system/styles/colour",{"title":224,"_path":225,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":227,"_path":228,"layout":11},"Grid","/design-system/styles/grid",{"title":230,"_path":231,"layout":11},"Icons","/design-system/styles/icons",{"title":233,"_path":234,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":236,"_path":237,"layout":11},"Layout","/design-system/styles/layout",{"title":239,"_path":240,"layout":11},"Logo","/design-system/styles/logo",{"title":242,"_path":243,"layout":11},"Motion","/design-system/styles/motion",{"title":245,"_path":246,"layout":11},"Spacing","/design-system/styles/spacing",{"title":248,"_path":249,"layout":11},"Typography","/design-system/styles/typography",{"title":251,"_path":252,"children":253},"Components","/design-system/components",[254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,360,361,362,365,368,371,374,377,380,383,386,389],{"title":255,"_path":256,"layout":11},"Accordion","/design-system/components/accordion",{"title":258,"_path":259,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":261,"_path":262,"layout":11},"Alert","/design-system/components/alert",{"title":264,"_path":265,"layout":11},"Block quote","/design-system/components/block-quote",{"title":267,"_path":268,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":270,"_path":271,"layout":11},"Button","/design-system/components/button",{"title":273,"_path":274,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":276,"_path":277,"layout":11},"Callout","/design-system/components/callout",{"title":279,"_path":280,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":282,"_path":283,"layout":11},"Card","/design-system/components/card",{"title":285,"_path":286,"layout":11},"Carousel","/design-system/components/carousel",{"title":288,"_path":289,"layout":11},"Category grid","/design-system/components/category-grid",{"title":291,"_path":292,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":294,"_path":295,"layout":11},"Chip","/design-system/components/chip",{"title":297,"_path":298,"layout":11},"Contact us","/design-system/components/contact-us",{"title":300,"_path":301,"layout":11},"Date input","/design-system/components/date-input",{"title":303,"_path":304,"layout":11},"Detail list","/design-system/components/detail-list",{"title":306,"_path":307,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":309,"_path":310,"layout":11},"File","/design-system/components/file",{"title":312,"_path":313,"layout":11},"Footer","/design-system/components/footer",{"title":315,"_path":316,"layout":11},"Form alert","/design-system/components/form-alert",{"title":318,"_path":319,"layout":11},"Form","/design-system/components/form",{"title":321,"_path":322,"layout":11},"Header","/design-system/components/header",{"title":324,"_path":325,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":327,"_path":328,"layout":11},"Input field","/design-system/components/input-field",{"title":330,"_path":331,"layout":11},"Key dates","/design-system/components/key-dates",{"title":333,"_path":334,"layout":11},"Media embed","/design-system/components/media-embed",{"title":336,"_path":337,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":339,"_path":340,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":342,"_path":343,"layout":11},"Media","/design-system/components/media",{"title":345,"_path":346,"layout":11},"Option button","/design-system/components/option-button",{"title":348,"_path":349,"layout":11},"Page action","/design-system/components/page-action",{"title":351,"_path":352,"layout":11},"Pagination","/design-system/components/pagination",{"title":354,"_path":355,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":357,"_path":358,"layout":11},"Profile","/design-system/components/profile",{"title":134,"_path":133,"layout":11},{"title":9,"_path":5,"layout":11},{"title":140,"_path":139,"layout":11},{"title":363,"_path":364,"layout":11},"Search bar","/design-system/components/search-bar",{"title":366,"_path":367,"layout":11},"Skip link","/design-system/components/skip-link",{"title":369,"_path":370,"layout":11},"Social share","/design-system/components/social-share",{"title":372,"_path":373,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":375,"_path":376,"layout":11},"Table","/design-system/components/table",{"title":378,"_path":379,"layout":11},"Tabs","/design-system/components/tabs",{"title":381,"_path":382,"layout":11},"Tag","/design-system/components/tag",{"title":384,"_path":385,"layout":11},"Text area","/design-system/components/text-area",{"title":387,"_path":388,"layout":11},"Timeline","/design-system/components/timeline",{"title":390,"_path":391,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":393,"_path":394,"children":395,"layout":11},"Ripple Framework","/framework",[396,397,415,437],{"title":393,"_path":394,"layout":11},{"title":398,"_path":399,"children":400},"Key Concepts","/framework/key-concepts",[401,403,406,409,412],{"title":208,"_path":402,"layout":11},"/framework/key-concepts/nuxt",{"title":404,"_path":405,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":407,"_path":408,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":410,"_path":411,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":413,"_path":414,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":416,"_path":417,"children":418},"Guides","/framework/guides",[419,422,425,428,431,434],{"title":420,"_path":421,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":423,"_path":424,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":426,"_path":427,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":429,"_path":430,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":432,"_path":433,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":435,"_path":436,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":438,"_path":439,"layout":11},"Core modules","/framework/core-modules",["Reactive",441],{"module-navigation":442},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/results-listing/index.html b/design-system/components/results-listing/index.html index 61c47e1aa9..d474a1eb8e 100644 --- a/design-system/components/results-listing/index.html +++ b/design-system/components/results-listing/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Results listing</h1><p class="rpl-type-p-large" data-v-3163c6df>The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user.<!--]--></p><p><!--[-->A results listing shows multiple results items, each with their own:<!--]--></p><ul><!--[--><li><!--[-->title, telling the user the name of the result<!--]--></li><li><!--[-->summary, summing up the result’s content for the user<!--]--></li><li><!--[-->URL, telling the user the website address for the result<!--]--></li><li><!--[-->featured content, visually highlighting key content from the result<!--]--></li><li><!--[-->topic/category, putting the result into its context within a broader page or site<!--]--></li><li><!--[-->date, showing a result’s published (simple variant) or updated (default variant) date<!--]--></li><li><!--[-->keyword term bold styling, showing the search term(s) in bold in the result displayed.<!--]--></li><!--]--></ul><p><!--[-->When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-result-listing--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Put the search term in bold.<!--]--></li><li><!--[-->Test results so they are correct and relevant to the search term.<!--]--></li><li><!--[-->Keep descriptions under 150 words.<!--]--></li><li><!--[-->Display up to 10 results.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't display the result title only.<!--]--></li><li><!--[-->Don’t make only the title interactive, ensure the entire result is interactive.<!--]--></li><li><!--[-->Don't use both updated date and published date, choose one only.<!--]--></li><li><!--[-->Don't display more than 10 results.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->A result listing's 2 main variants are:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->simple.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->The default results listing has the option of surfacing key information when required.<!--]--></p><p><!--[-->Key information can include:<!--]--></p><ul><!--[--><li><!--[-->audience<!--]--></li><li><!--[-->status<!--]--></li><li><!--[-->grants metadata such as grant value.<!--]--></li><!--]--></ul><p><!--[-->The default variant users the updated date by default.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-details&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-details&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="simple"><a href="#simple"><!--[-->Simple<!--]--></a></h3><p><!--[-->The simple variant displays the page title with accompanying metadata.<!--]--></p><p><!--[-->It uses the published date by default, which is automatically pulled in from the metadata.<!--]--></p><p><!--[-->We recommend using this variant when displaying simple results, like news items.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-meta&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-meta&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Results listing uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->indicating to the user there is an interaction possible<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->When displaying key information such as status, the icon should adopt the relevant semantic colour.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-details&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-details&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/results-listing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/results-listing/_payload.json">[{"state":1,"_errors":632,"serverRendered":635,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":322,"$sdd-globals":336,"$sdd-navigation":337},{"/design-system/components/results-listing":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":317,"_id":318,"_source":319,"_file":320,"_extension":321},"/design-system/components/results-listing","components",false,"","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","page","Core",{"type":14,"children":15,"toc":304},"root",[16,25,31,36,76,81,86,93,116,122,145,149,155,160,173,178,183,188,206,211,215,221,226,231,236,240,243,249,254,272,277,284],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A results listing shows multiple results items, each with their own:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56,61,66,71],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"title, telling the user the name of the result",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"summary, summing up the result’s content for the user",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"URL, telling the user the website address for the result",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"featured content, visually highlighting key content from the result",{"type":17,"tag":41,"props":62,"children":63},{},[64],{"type":23,"value":65},"topic/category, putting the result into its context within a broader page or site",{"type":17,"tag":41,"props":67,"children":68},{},[69],{"type":23,"value":70},"date, showing a result’s published (simple variant) or updated (default variant) date",{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"keyword term bold styling, showing the search term(s) in bold in the result displayed.",{"type":17,"tag":26,"props":77,"children":78},{},[79],{"type":23,"value":80},"When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision.",{"type":17,"tag":82,"props":83,"children":85},"docs-example",{"id":84},"core-navigation-result-listing--default-story",[],{"type":17,"tag":87,"props":88,"children":90},"h3",{"id":89},"when-and-how-to-use",[91],{"type":23,"value":92},"When and how to use",{"type":17,"tag":37,"props":94,"children":95},{},[96,101,106,111],{"type":17,"tag":41,"props":97,"children":98},{},[99],{"type":23,"value":100},"Put the search term in bold.",{"type":17,"tag":41,"props":102,"children":103},{},[104],{"type":23,"value":105},"Test results so they are correct and relevant to the search term.",{"type":17,"tag":41,"props":107,"children":108},{},[109],{"type":23,"value":110},"Keep descriptions under 150 words.",{"type":17,"tag":41,"props":112,"children":113},{},[114],{"type":23,"value":115},"Display up to 10 results.",{"type":17,"tag":87,"props":117,"children":119},{"id":118},"when-and-how-not-to-use",[120],{"type":23,"value":121},"When and how not to use",{"type":17,"tag":37,"props":123,"children":124},{},[125,130,135,140],{"type":17,"tag":41,"props":126,"children":127},{},[128],{"type":23,"value":129},"Don't display the result title only.",{"type":17,"tag":41,"props":131,"children":132},{},[133],{"type":23,"value":134},"Don’t make only the title interactive, ensure the entire result is interactive.",{"type":17,"tag":41,"props":136,"children":137},{},[138],{"type":23,"value":139},"Don't use both updated date and published date, choose one only.",{"type":17,"tag":41,"props":141,"children":142},{},[143],{"type":23,"value":144},"Don't display more than 10 results.",{"type":17,"tag":146,"props":147,"children":148},"hr",{},[],{"type":17,"tag":18,"props":150,"children":152},{"id":151},"variants",[153],{"type":23,"value":154},"Variants",{"type":17,"tag":26,"props":156,"children":157},{},[158],{"type":23,"value":159},"A result listing's 2 main variants are:",{"type":17,"tag":37,"props":161,"children":162},{},[163,168],{"type":17,"tag":41,"props":164,"children":165},{},[166],{"type":23,"value":167},"default",{"type":17,"tag":41,"props":169,"children":170},{},[171],{"type":23,"value":172},"simple.",{"type":17,"tag":87,"props":174,"children":175},{"id":167},[176],{"type":23,"value":177},"Default",{"type":17,"tag":26,"props":179,"children":180},{},[181],{"type":23,"value":182},"The default results listing has the option of surfacing key information when required.",{"type":17,"tag":26,"props":184,"children":185},{},[186],{"type":23,"value":187},"Key information can include:",{"type":17,"tag":37,"props":189,"children":190},{},[191,196,201],{"type":17,"tag":41,"props":192,"children":193},{},[194],{"type":23,"value":195},"audience",{"type":17,"tag":41,"props":197,"children":198},{},[199],{"type":23,"value":200},"status",{"type":17,"tag":41,"props":202,"children":203},{},[204],{"type":23,"value":205},"grants metadata such as grant value.",{"type":17,"tag":26,"props":207,"children":208},{},[209],{"type":23,"value":210},"The default variant users the updated date by default.",{"type":17,"tag":82,"props":212,"children":214},{"id":213},"core-navigation-result-listing--with-details",[],{"type":17,"tag":87,"props":216,"children":218},{"id":217},"simple",[219],{"type":23,"value":220},"Simple",{"type":17,"tag":26,"props":222,"children":223},{},[224],{"type":23,"value":225},"The simple variant displays the page title with accompanying metadata.",{"type":17,"tag":26,"props":227,"children":228},{},[229],{"type":23,"value":230},"It uses the published date by default, which is automatically pulled in from the metadata.",{"type":17,"tag":26,"props":232,"children":233},{},[234],{"type":23,"value":235},"We recommend using this variant when displaying simple results, like news items.",{"type":17,"tag":82,"props":237,"children":239},{"id":238},"core-navigation-result-listing--with-meta",[],{"type":17,"tag":146,"props":241,"children":242},{},[],{"type":17,"tag":18,"props":244,"children":246},{"id":245},"theming",[247],{"type":23,"value":248},"Theming",{"type":17,"tag":26,"props":250,"children":251},{},[252],{"type":23,"value":253},"Results listing uses colour for:",{"type":17,"tag":37,"props":255,"children":256},{},[257,262,267],{"type":17,"tag":41,"props":258,"children":259},{},[260],{"type":23,"value":261},"icons",{"type":17,"tag":41,"props":263,"children":264},{},[265],{"type":23,"value":266},"indicating to the user there is an interaction possible",{"type":17,"tag":41,"props":268,"children":269},{},[270],{"type":23,"value":271},"interactive states.",{"type":17,"tag":26,"props":273,"children":274},{},[275],{"type":23,"value":276},"When displaying key information such as status, the icon should adopt the relevant semantic colour.",{"type":17,"tag":278,"props":279,"children":280},"docs-theme-chooser",{},[281],{"type":17,"tag":82,"props":282,"children":283},{"id":213},[],{"type":17,"tag":26,"props":285,"children":286},{},[287,289,295,297,302],{"type":23,"value":288},"To create your own theme, see ",{"type":17,"tag":290,"props":291,"children":292},"a",{"href":8},[293],{"type":23,"value":294},"theming guidance for designers",{"type":23,"value":296}," or ",{"type":17,"tag":290,"props":298,"children":299},{"href":8},[300],{"type":23,"value":301},"theming guidance for developers",{"type":23,"value":303},".",{"title":8,"searchDepth":305,"depth":305,"links":306},2,[307,312,316],{"id":20,"depth":305,"text":24,"children":308},[309,311],{"id":89,"depth":310,"text":92},3,{"id":118,"depth":310,"text":121},{"id":151,"depth":305,"text":154,"children":313},[314,315],{"id":167,"depth":310,"text":177},{"id":217,"depth":310,"text":220},{"id":245,"depth":305,"text":248},"markdown","content:design-system:5.components:results-listing.md","content","design-system/5.components/results-listing.md","md",{"/design-system/components/results-listing":323},[324,330],{"_path":325,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":326,"description":327,"layout":11,"label":12,"_type":317,"_id":328,"_source":319,"_file":329,"_extension":321},"/design-system/components/related-links","Related links","The Related links component is a list of links to help users discover related content.","content:design-system:5.components:related-links.md","design-system/5.components/related-links.md",{"_path":331,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":332,"description":333,"layout":11,"label":12,"_type":317,"_id":334,"_source":319,"_file":335,"_extension":321},"/design-system/components/search-bar","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","content:design-system:5.components:search-bar.md","design-system/5.components/search-bar.md",{},[338,343,584],{"title":339,"_path":340,"icon":341,"layout":342},"Ripple Design System","/","carbon:home","home",{"title":344,"_path":345,"children":346},"Design System","/design-system",[347,363,379,408,442],{"title":348,"_path":349,"children":350},"About","/design-system/about",[351,354,357,360],{"title":352,"_path":353,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":355,"_path":356,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":358,"_path":359,"layout":11},"Support","/design-system/about/getting-support",{"title":361,"_path":362,"layout":11},"Contributing","/design-system/about/contributing",{"title":364,"_path":365,"children":366},"Design","/design-system/design",[367,370,373,376],{"title":368,"_path":369,"layout":11},"Getting started","/design-system/design/getting-started",{"title":371,"_path":372,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":374,"_path":375,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":377,"_path":378,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":380,"_path":381,"children":382},"Develop","/design-system/develop",[383,385,387,390],{"title":368,"_path":384,"layout":11},"/design-system/develop/getting-started",{"title":361,"_path":386,"layout":11},"/design-system/develop/contributing",{"title":388,"_path":389,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":391,"children":392,"layout":11},"/design-system/develop/usage",[393,396,399,402,405],{"title":394,"_path":395,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":397,"_path":398,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":400,"_path":401,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":403,"_path":404,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":406,"_path":407,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":409,"_path":410,"children":411},"Styles","/design-system/styles",[412,415,418,421,424,427,430,433,436,439],{"title":413,"_path":414,"layout":11},"Colour","/design-system/styles/colour",{"title":416,"_path":417,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":419,"_path":420,"layout":11},"Grid","/design-system/styles/grid",{"title":422,"_path":423,"layout":11},"Icons","/design-system/styles/icons",{"title":425,"_path":426,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":428,"_path":429,"layout":11},"Layout","/design-system/styles/layout",{"title":431,"_path":432,"layout":11},"Logo","/design-system/styles/logo",{"title":434,"_path":435,"layout":11},"Motion","/design-system/styles/motion",{"title":437,"_path":438,"layout":11},"Spacing","/design-system/styles/spacing",{"title":440,"_path":441,"layout":11},"Typography","/design-system/styles/typography",{"title":443,"_path":444,"children":445},"Components","/design-system/components",[446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554,555,556,557,560,563,566,569,572,575,578,581],{"title":447,"_path":448,"layout":11},"Accordion","/design-system/components/accordion",{"title":450,"_path":451,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":453,"_path":454,"layout":11},"Alert","/design-system/components/alert",{"title":456,"_path":457,"layout":11},"Block quote","/design-system/components/block-quote",{"title":459,"_path":460,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":462,"_path":463,"layout":11},"Button","/design-system/components/button",{"title":465,"_path":466,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":468,"_path":469,"layout":11},"Callout","/design-system/components/callout",{"title":471,"_path":472,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":474,"_path":475,"layout":11},"Card","/design-system/components/card",{"title":477,"_path":478,"layout":11},"Carousel","/design-system/components/carousel",{"title":480,"_path":481,"layout":11},"Category grid","/design-system/components/category-grid",{"title":483,"_path":484,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":486,"_path":487,"layout":11},"Chip","/design-system/components/chip",{"title":489,"_path":490,"layout":11},"Contact us","/design-system/components/contact-us",{"title":492,"_path":493,"layout":11},"Date input","/design-system/components/date-input",{"title":495,"_path":496,"layout":11},"Detail list","/design-system/components/detail-list",{"title":498,"_path":499,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":501,"_path":502,"layout":11},"File","/design-system/components/file",{"title":504,"_path":505,"layout":11},"Footer","/design-system/components/footer",{"title":507,"_path":508,"layout":11},"Form alert","/design-system/components/form-alert",{"title":510,"_path":511,"layout":11},"Form","/design-system/components/form",{"title":513,"_path":514,"layout":11},"Header","/design-system/components/header",{"title":516,"_path":517,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":519,"_path":520,"layout":11},"Input field","/design-system/components/input-field",{"title":522,"_path":523,"layout":11},"Key dates","/design-system/components/key-dates",{"title":525,"_path":526,"layout":11},"Media embed","/design-system/components/media-embed",{"title":528,"_path":529,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":531,"_path":532,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":534,"_path":535,"layout":11},"Media","/design-system/components/media",{"title":537,"_path":538,"layout":11},"Option button","/design-system/components/option-button",{"title":540,"_path":541,"layout":11},"Page action","/design-system/components/page-action",{"title":543,"_path":544,"layout":11},"Pagination","/design-system/components/pagination",{"title":546,"_path":547,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":549,"_path":550,"layout":11},"Profile","/design-system/components/profile",{"title":552,"_path":553,"layout":11},"Radio button","/design-system/components/radio-button",{"title":326,"_path":325,"layout":11},{"title":9,"_path":5,"layout":11},{"title":332,"_path":331,"layout":11},{"title":558,"_path":559,"layout":11},"Skip link","/design-system/components/skip-link",{"title":561,"_path":562,"layout":11},"Social share","/design-system/components/social-share",{"title":564,"_path":565,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":567,"_path":568,"layout":11},"Table","/design-system/components/table",{"title":570,"_path":571,"layout":11},"Tabs","/design-system/components/tabs",{"title":573,"_path":574,"layout":11},"Tag","/design-system/components/tag",{"title":576,"_path":577,"layout":11},"Text area","/design-system/components/text-area",{"title":579,"_path":580,"layout":11},"Timeline","/design-system/components/timeline",{"title":582,"_path":583,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":585,"_path":586,"children":587,"layout":11},"Ripple Framework","/framework",[588,589,607,629],{"title":585,"_path":586,"layout":11},{"title":590,"_path":591,"children":592},"Key Concepts","/framework/key-concepts",[593,595,598,601,604],{"title":400,"_path":594,"layout":11},"/framework/key-concepts/nuxt",{"title":596,"_path":597,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":599,"_path":600,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":602,"_path":603,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":605,"_path":606,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":608,"_path":609,"children":610},"Guides","/framework/guides",[611,614,617,620,623,626],{"title":612,"_path":613,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":615,"_path":616,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":618,"_path":619,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":621,"_path":622,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":624,"_path":625,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":627,"_path":628,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":630,"_path":631,"layout":11},"Core modules","/framework/core-modules",["Reactive",633],{"module-navigation":634},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Results listing</h1><p class="rpl-type-p-large" data-v-3163c6df>The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user.<!--]--></p><p><!--[-->A results listing shows multiple results items, each with their own:<!--]--></p><ul><!--[--><li><!--[-->title, telling the user the name of the result<!--]--></li><li><!--[-->summary, summing up the result’s content for the user<!--]--></li><li><!--[-->URL, telling the user the website address for the result<!--]--></li><li><!--[-->featured content, visually highlighting key content from the result<!--]--></li><li><!--[-->topic/category, putting the result into its context within a broader page or site<!--]--></li><li><!--[-->date, showing a result’s published (simple variant) or updated (default variant) date<!--]--></li><li><!--[-->keyword term bold styling, showing the search term(s) in bold in the result displayed.<!--]--></li><!--]--></ul><p><!--[-->When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-result-listing--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Put the search term in bold.<!--]--></li><li><!--[-->Test results so they are correct and relevant to the search term.<!--]--></li><li><!--[-->Keep descriptions under 150 words.<!--]--></li><li><!--[-->Display up to 10 results.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't display the result title only.<!--]--></li><li><!--[-->Don’t make only the title interactive, ensure the entire result is interactive.<!--]--></li><li><!--[-->Don't use both updated date and published date, choose one only.<!--]--></li><li><!--[-->Don't display more than 10 results.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->A result listing's 2 main variants are:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->simple.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->The default results listing has the option of surfacing key information when required.<!--]--></p><p><!--[-->Key information can include:<!--]--></p><ul><!--[--><li><!--[-->audience<!--]--></li><li><!--[-->status<!--]--></li><li><!--[-->grants metadata such as grant value.<!--]--></li><!--]--></ul><p><!--[-->The default variant users the updated date by default.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-details&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-details&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="simple"><a href="#simple"><!--[-->Simple<!--]--></a></h3><p><!--[-->The simple variant displays the page title with accompanying metadata.<!--]--></p><p><!--[-->It uses the published date by default, which is automatically pulled in from the metadata.<!--]--></p><p><!--[-->We recommend using this variant when displaying simple results, like news items.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-meta&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-meta&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Results listing uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->indicating to the user there is an interaction possible<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->When displaying key information such as status, the icon should adopt the relevant semantic colour.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-details&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-details&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/results-listing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/results-listing/_payload.json">[{"state":1,"_errors":632,"serverRendered":635,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":322,"$sdd-globals":336,"$sdd-navigation":337},{"/design-system/components/results-listing":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":317,"_id":318,"_source":319,"_file":320,"_extension":321},"/design-system/components/results-listing","components",false,"","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","page","Core",{"type":14,"children":15,"toc":304},"root",[16,25,31,36,76,81,86,93,116,122,145,149,155,160,173,178,183,188,206,211,215,221,226,231,236,240,243,249,254,272,277,284],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A results listing shows multiple results items, each with their own:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56,61,66,71],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"title, telling the user the name of the result",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"summary, summing up the result’s content for the user",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"URL, telling the user the website address for the result",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"featured content, visually highlighting key content from the result",{"type":17,"tag":41,"props":62,"children":63},{},[64],{"type":23,"value":65},"topic/category, putting the result into its context within a broader page or site",{"type":17,"tag":41,"props":67,"children":68},{},[69],{"type":23,"value":70},"date, showing a result’s published (simple variant) or updated (default variant) date",{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"keyword term bold styling, showing the search term(s) in bold in the result displayed.",{"type":17,"tag":26,"props":77,"children":78},{},[79],{"type":23,"value":80},"When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision.",{"type":17,"tag":82,"props":83,"children":85},"docs-example",{"id":84},"core-navigation-result-listing--default-story",[],{"type":17,"tag":87,"props":88,"children":90},"h3",{"id":89},"when-and-how-to-use",[91],{"type":23,"value":92},"When and how to use",{"type":17,"tag":37,"props":94,"children":95},{},[96,101,106,111],{"type":17,"tag":41,"props":97,"children":98},{},[99],{"type":23,"value":100},"Put the search term in bold.",{"type":17,"tag":41,"props":102,"children":103},{},[104],{"type":23,"value":105},"Test results so they are correct and relevant to the search term.",{"type":17,"tag":41,"props":107,"children":108},{},[109],{"type":23,"value":110},"Keep descriptions under 150 words.",{"type":17,"tag":41,"props":112,"children":113},{},[114],{"type":23,"value":115},"Display up to 10 results.",{"type":17,"tag":87,"props":117,"children":119},{"id":118},"when-and-how-not-to-use",[120],{"type":23,"value":121},"When and how not to use",{"type":17,"tag":37,"props":123,"children":124},{},[125,130,135,140],{"type":17,"tag":41,"props":126,"children":127},{},[128],{"type":23,"value":129},"Don't display the result title only.",{"type":17,"tag":41,"props":131,"children":132},{},[133],{"type":23,"value":134},"Don’t make only the title interactive, ensure the entire result is interactive.",{"type":17,"tag":41,"props":136,"children":137},{},[138],{"type":23,"value":139},"Don't use both updated date and published date, choose one only.",{"type":17,"tag":41,"props":141,"children":142},{},[143],{"type":23,"value":144},"Don't display more than 10 results.",{"type":17,"tag":146,"props":147,"children":148},"hr",{},[],{"type":17,"tag":18,"props":150,"children":152},{"id":151},"variants",[153],{"type":23,"value":154},"Variants",{"type":17,"tag":26,"props":156,"children":157},{},[158],{"type":23,"value":159},"A result listing's 2 main variants are:",{"type":17,"tag":37,"props":161,"children":162},{},[163,168],{"type":17,"tag":41,"props":164,"children":165},{},[166],{"type":23,"value":167},"default",{"type":17,"tag":41,"props":169,"children":170},{},[171],{"type":23,"value":172},"simple.",{"type":17,"tag":87,"props":174,"children":175},{"id":167},[176],{"type":23,"value":177},"Default",{"type":17,"tag":26,"props":179,"children":180},{},[181],{"type":23,"value":182},"The default results listing has the option of surfacing key information when required.",{"type":17,"tag":26,"props":184,"children":185},{},[186],{"type":23,"value":187},"Key information can include:",{"type":17,"tag":37,"props":189,"children":190},{},[191,196,201],{"type":17,"tag":41,"props":192,"children":193},{},[194],{"type":23,"value":195},"audience",{"type":17,"tag":41,"props":197,"children":198},{},[199],{"type":23,"value":200},"status",{"type":17,"tag":41,"props":202,"children":203},{},[204],{"type":23,"value":205},"grants metadata such as grant value.",{"type":17,"tag":26,"props":207,"children":208},{},[209],{"type":23,"value":210},"The default variant users the updated date by default.",{"type":17,"tag":82,"props":212,"children":214},{"id":213},"core-navigation-result-listing--with-details",[],{"type":17,"tag":87,"props":216,"children":218},{"id":217},"simple",[219],{"type":23,"value":220},"Simple",{"type":17,"tag":26,"props":222,"children":223},{},[224],{"type":23,"value":225},"The simple variant displays the page title with accompanying metadata.",{"type":17,"tag":26,"props":227,"children":228},{},[229],{"type":23,"value":230},"It uses the published date by default, which is automatically pulled in from the metadata.",{"type":17,"tag":26,"props":232,"children":233},{},[234],{"type":23,"value":235},"We recommend using this variant when displaying simple results, like news items.",{"type":17,"tag":82,"props":237,"children":239},{"id":238},"core-navigation-result-listing--with-meta",[],{"type":17,"tag":146,"props":241,"children":242},{},[],{"type":17,"tag":18,"props":244,"children":246},{"id":245},"theming",[247],{"type":23,"value":248},"Theming",{"type":17,"tag":26,"props":250,"children":251},{},[252],{"type":23,"value":253},"Results listing uses colour for:",{"type":17,"tag":37,"props":255,"children":256},{},[257,262,267],{"type":17,"tag":41,"props":258,"children":259},{},[260],{"type":23,"value":261},"icons",{"type":17,"tag":41,"props":263,"children":264},{},[265],{"type":23,"value":266},"indicating to the user there is an interaction possible",{"type":17,"tag":41,"props":268,"children":269},{},[270],{"type":23,"value":271},"interactive states.",{"type":17,"tag":26,"props":273,"children":274},{},[275],{"type":23,"value":276},"When displaying key information such as status, the icon should adopt the relevant semantic colour.",{"type":17,"tag":278,"props":279,"children":280},"docs-theme-chooser",{},[281],{"type":17,"tag":82,"props":282,"children":283},{"id":213},[],{"type":17,"tag":26,"props":285,"children":286},{},[287,289,295,297,302],{"type":23,"value":288},"To create your own theme, see ",{"type":17,"tag":290,"props":291,"children":292},"a",{"href":8},[293],{"type":23,"value":294},"theming guidance for designers",{"type":23,"value":296}," or ",{"type":17,"tag":290,"props":298,"children":299},{"href":8},[300],{"type":23,"value":301},"theming guidance for developers",{"type":23,"value":303},".",{"title":8,"searchDepth":305,"depth":305,"links":306},2,[307,312,316],{"id":20,"depth":305,"text":24,"children":308},[309,311],{"id":89,"depth":310,"text":92},3,{"id":118,"depth":310,"text":121},{"id":151,"depth":305,"text":154,"children":313},[314,315],{"id":167,"depth":310,"text":177},{"id":217,"depth":310,"text":220},{"id":245,"depth":305,"text":248},"markdown","content:design-system:5.components:results-listing.md","content","design-system/5.components/results-listing.md","md",{"/design-system/components/results-listing":323},[324,330],{"_path":325,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":326,"description":327,"layout":11,"label":12,"_type":317,"_id":328,"_source":319,"_file":329,"_extension":321},"/design-system/components/related-links","Related links","The Related links component is a list of links to help users discover related content.","content:design-system:5.components:related-links.md","design-system/5.components/related-links.md",{"_path":331,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":332,"description":333,"layout":11,"label":12,"_type":317,"_id":334,"_source":319,"_file":335,"_extension":321},"/design-system/components/search-bar","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","content:design-system:5.components:search-bar.md","design-system/5.components/search-bar.md",{},[338,343,584],{"title":339,"_path":340,"icon":341,"layout":342},"Ripple Design System","/","carbon:home","home",{"title":344,"_path":345,"children":346},"Design System","/design-system",[347,363,379,408,442],{"title":348,"_path":349,"children":350},"About","/design-system/about",[351,354,357,360],{"title":352,"_path":353,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":355,"_path":356,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":358,"_path":359,"layout":11},"Support","/design-system/about/getting-support",{"title":361,"_path":362,"layout":11},"Contributing","/design-system/about/contributing",{"title":364,"_path":365,"children":366},"Design","/design-system/design",[367,370,373,376],{"title":368,"_path":369,"layout":11},"Getting started","/design-system/design/getting-started",{"title":371,"_path":372,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":374,"_path":375,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":377,"_path":378,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":380,"_path":381,"children":382},"Develop","/design-system/develop",[383,385,387,390],{"title":368,"_path":384,"layout":11},"/design-system/develop/getting-started",{"title":361,"_path":386,"layout":11},"/design-system/develop/contributing",{"title":388,"_path":389,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":391,"children":392,"layout":11},"/design-system/develop/usage",[393,396,399,402,405],{"title":394,"_path":395,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":397,"_path":398,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":400,"_path":401,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":403,"_path":404,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":406,"_path":407,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":409,"_path":410,"children":411},"Styles","/design-system/styles",[412,415,418,421,424,427,430,433,436,439],{"title":413,"_path":414,"layout":11},"Colour","/design-system/styles/colour",{"title":416,"_path":417,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":419,"_path":420,"layout":11},"Grid","/design-system/styles/grid",{"title":422,"_path":423,"layout":11},"Icons","/design-system/styles/icons",{"title":425,"_path":426,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":428,"_path":429,"layout":11},"Layout","/design-system/styles/layout",{"title":431,"_path":432,"layout":11},"Logo","/design-system/styles/logo",{"title":434,"_path":435,"layout":11},"Motion","/design-system/styles/motion",{"title":437,"_path":438,"layout":11},"Spacing","/design-system/styles/spacing",{"title":440,"_path":441,"layout":11},"Typography","/design-system/styles/typography",{"title":443,"_path":444,"children":445},"Components","/design-system/components",[446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554,555,556,557,560,563,566,569,572,575,578,581],{"title":447,"_path":448,"layout":11},"Accordion","/design-system/components/accordion",{"title":450,"_path":451,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":453,"_path":454,"layout":11},"Alert","/design-system/components/alert",{"title":456,"_path":457,"layout":11},"Block quote","/design-system/components/block-quote",{"title":459,"_path":460,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":462,"_path":463,"layout":11},"Button","/design-system/components/button",{"title":465,"_path":466,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":468,"_path":469,"layout":11},"Callout","/design-system/components/callout",{"title":471,"_path":472,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":474,"_path":475,"layout":11},"Card","/design-system/components/card",{"title":477,"_path":478,"layout":11},"Carousel","/design-system/components/carousel",{"title":480,"_path":481,"layout":11},"Category grid","/design-system/components/category-grid",{"title":483,"_path":484,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":486,"_path":487,"layout":11},"Chip","/design-system/components/chip",{"title":489,"_path":490,"layout":11},"Contact us","/design-system/components/contact-us",{"title":492,"_path":493,"layout":11},"Date input","/design-system/components/date-input",{"title":495,"_path":496,"layout":11},"Detail list","/design-system/components/detail-list",{"title":498,"_path":499,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":501,"_path":502,"layout":11},"File","/design-system/components/file",{"title":504,"_path":505,"layout":11},"Footer","/design-system/components/footer",{"title":507,"_path":508,"layout":11},"Form alert","/design-system/components/form-alert",{"title":510,"_path":511,"layout":11},"Form","/design-system/components/form",{"title":513,"_path":514,"layout":11},"Header","/design-system/components/header",{"title":516,"_path":517,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":519,"_path":520,"layout":11},"Input field","/design-system/components/input-field",{"title":522,"_path":523,"layout":11},"Key dates","/design-system/components/key-dates",{"title":525,"_path":526,"layout":11},"Media embed","/design-system/components/media-embed",{"title":528,"_path":529,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":531,"_path":532,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":534,"_path":535,"layout":11},"Media","/design-system/components/media",{"title":537,"_path":538,"layout":11},"Option button","/design-system/components/option-button",{"title":540,"_path":541,"layout":11},"Page action","/design-system/components/page-action",{"title":543,"_path":544,"layout":11},"Pagination","/design-system/components/pagination",{"title":546,"_path":547,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":549,"_path":550,"layout":11},"Profile","/design-system/components/profile",{"title":552,"_path":553,"layout":11},"Radio button","/design-system/components/radio-button",{"title":326,"_path":325,"layout":11},{"title":9,"_path":5,"layout":11},{"title":332,"_path":331,"layout":11},{"title":558,"_path":559,"layout":11},"Skip link","/design-system/components/skip-link",{"title":561,"_path":562,"layout":11},"Social share","/design-system/components/social-share",{"title":564,"_path":565,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":567,"_path":568,"layout":11},"Table","/design-system/components/table",{"title":570,"_path":571,"layout":11},"Tabs","/design-system/components/tabs",{"title":573,"_path":574,"layout":11},"Tag","/design-system/components/tag",{"title":576,"_path":577,"layout":11},"Text area","/design-system/components/text-area",{"title":579,"_path":580,"layout":11},"Timeline","/design-system/components/timeline",{"title":582,"_path":583,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":585,"_path":586,"children":587,"layout":11},"Ripple Framework","/framework",[588,589,607,629],{"title":585,"_path":586,"layout":11},{"title":590,"_path":591,"children":592},"Key Concepts","/framework/key-concepts",[593,595,598,601,604],{"title":400,"_path":594,"layout":11},"/framework/key-concepts/nuxt",{"title":596,"_path":597,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":599,"_path":600,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":602,"_path":603,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":605,"_path":606,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":608,"_path":609,"children":610},"Guides","/framework/guides",[611,614,617,620,623,626],{"title":612,"_path":613,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":615,"_path":616,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":618,"_path":619,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":621,"_path":622,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":624,"_path":625,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":627,"_path":628,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":630,"_path":631,"layout":11},"Core modules","/framework/core-modules",["Reactive",633],{"module-navigation":634},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/search-bar/index.html b/design-system/components/search-bar/index.html index 0a9fe9d908..b1d3af006e 100644 --- a/design-system/components/search-bar/index.html +++ b/design-system/components/search-bar/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Search bar</h1><p class="rpl-type-p-large" data-v-3163c6df>The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the search bar to help users find what they are looking for.<!--]--></p><p><!--[-->Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation.<!--]--></p><p><!--[-->Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages.<!--]--></p><p><!--[-->The search bar includes:<!--]--></p><ul><!--[--><li><!--[-->text - placeholder and input text<!--]--></li><li><!--[-->search button label<!--]--></li><li><!--[-->search button icon<!--]--></li><li><!--[-->optional predictive list - present suggested keywords to the user<!--]--></li><li><!--[-->optional refine search link - expand to present advanced filters to the user.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><h4 id="input-text"><a href="#input-text"><!--[-->Input text<!--]--></a></h4><p><!--[-->Include short, descriptive placeholder text. This tells the user what they can search for.<!--]--></p><p><!--[-->The text the user inputs replaces the placeholder text.<!--]--></p><h4 id="search-button"><a href="#search-button"><!--[-->Search button<!--]--></a></h4><p><!--[-->The search button contains a button label and search icon.<!--]--></p><p><!--[-->Smaller devices show a responsive variant with:<!--]--></p><ul><!--[--><li><!--[-->only a search icon<!--]--></li><li><!--[-->no button label.<!--]--></li><!--]--></ul><p><!--[-->This gives the user more space to write search text. Users know that a magnifying glass represents a search function.<!--]--></p><p><!--[-->The word ‘Search’ must appear in the alt text for screen readers.<!--]--></p><p><!--[-->The button type should be a submit button. This lets a user conduct a search:<!--]--></p><ul><!--[--><li><!--[-->using the enter/return key<!--]--></li><li><!--[-->using fewer keystrokes<!--]--></li><li><!--[-->by choosing a suggestion (if applicable)<!--]--></li><li><!--[-->that afterwards, still displays the search keyword.<!--]--></li><!--]--></ul><h4 id="predictive-keyword-list"><a href="#predictive-keyword-list"><!--[-->Predictive keyword list<!--]--></a></h4><p><!--[-->Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing.<!--]--></p><p><!--[-->Use a short, ordered list of no more than 10 keyword suggestions.<!--]--></p><p><!--[-->They should appear after only a few keystrokes.<!--]--></p><p><!--[-->Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit.<!--]--></p><p><!--[-->Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use the search bar to let users search your site (site search).<!--]--></li><li><!--[-->Use default search field on white page background.<!--]--></li><li><!--[-->Use reverse search field on grey background.<!--]--></li><li><!--[-->Use menu variant in the mega menu only.<!--]--></li><li><!--[-->Use only default and reverse variants with predictive list suggestions.<!--]--></li><li><!--[-->Even if it's hidden from view, always use a form label for screen readers.<!--]--></li><li><!--[-->Keep placeholder text concise and descriptive.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use default or reverse variants in the mega menu.<!--]--></li><li><!--[-->Don't use filters or refine search with the menu variant.<!--]--></li><li><!--[-->Don't use multiline search inputs.<!--]--></li><li><!--[-->Revised search shouldn't be by default.<!--]--></li><li><!--[-->Don't use with the refine search link if no filters are available.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The 3 search variants include:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->reverse<!--]--></li><li><!--[-->menu.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->This is standard search. The button initiates search based on the text input.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><p><!--[-->Use the reverse variant when on a neutral background and you can't use the default variant.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="menu"><a href="#menu"><!--[-->Menu<!--]--></a></h3><p><!--[-->Use this in the mega menu. See <a href="/design-system/components/primary-navigation/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Primary Navigation<!--]--><!--]--><!----><!--]--></a> for more information.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--menu&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--menu&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The search bar uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating an action to users<!--]--></li><li><!--[-->interaction states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--menu&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--menu&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/search-bar.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/search-bar/_payload.json">[{"state":1,"_errors":751,"serverRendered":754,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":441,"$sdd-globals":455,"$sdd-navigation":456},{"/design-system/components/search-bar":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":436,"_id":437,"_source":438,"_file":439,"_extension":440},"/design-system/components/search-bar","components",false,"","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","page","Core",{"type":14,"children":15,"toc":421},"root",[16,25,31,36,41,46,76,81,88,95,100,105,111,116,121,134,139,144,149,172,178,183,188,193,198,203,209,247,253,281,285,291,296,314,319,324,327,332,337,341,347,361,365,368,374,379,392,402],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the search bar to help users find what they are looking for.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"The search bar includes:",{"type":17,"tag":47,"props":48,"children":49},"ul",{},[50,56,61,66,71],{"type":17,"tag":51,"props":52,"children":53},"li",{},[54],{"type":23,"value":55},"text - placeholder and input text",{"type":17,"tag":51,"props":57,"children":58},{},[59],{"type":23,"value":60},"search button label",{"type":17,"tag":51,"props":62,"children":63},{},[64],{"type":23,"value":65},"search button icon",{"type":17,"tag":51,"props":67,"children":68},{},[69],{"type":23,"value":70},"optional predictive list - present suggested keywords to the user",{"type":17,"tag":51,"props":72,"children":73},{},[74],{"type":23,"value":75},"optional refine search link - expand to present advanced filters to the user.",{"type":17,"tag":77,"props":78,"children":80},"docs-example",{"id":79},"core-navigation-search-bar--default-story",[],{"type":17,"tag":82,"props":83,"children":85},"h3",{"id":84},"how-this-component-works",[86],{"type":23,"value":87},"How this component works",{"type":17,"tag":89,"props":90,"children":92},"h4",{"id":91},"input-text",[93],{"type":23,"value":94},"Input text",{"type":17,"tag":26,"props":96,"children":97},{},[98],{"type":23,"value":99},"Include short, descriptive placeholder text. This tells the user what they can search for.",{"type":17,"tag":26,"props":101,"children":102},{},[103],{"type":23,"value":104},"The text the user inputs replaces the placeholder text.",{"type":17,"tag":89,"props":106,"children":108},{"id":107},"search-button",[109],{"type":23,"value":110},"Search button",{"type":17,"tag":26,"props":112,"children":113},{},[114],{"type":23,"value":115},"The search button contains a button label and search icon.",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"Smaller devices show a responsive variant with:",{"type":17,"tag":47,"props":122,"children":123},{},[124,129],{"type":17,"tag":51,"props":125,"children":126},{},[127],{"type":23,"value":128},"only a search icon",{"type":17,"tag":51,"props":130,"children":131},{},[132],{"type":23,"value":133},"no button label.",{"type":17,"tag":26,"props":135,"children":136},{},[137],{"type":23,"value":138},"This gives the user more space to write search text. Users know that a magnifying glass represents a search function.",{"type":17,"tag":26,"props":140,"children":141},{},[142],{"type":23,"value":143},"The word ‘Search’ must appear in the alt text for screen readers.",{"type":17,"tag":26,"props":145,"children":146},{},[147],{"type":23,"value":148},"The button type should be a submit button. This lets a user conduct a search:",{"type":17,"tag":47,"props":150,"children":151},{},[152,157,162,167],{"type":17,"tag":51,"props":153,"children":154},{},[155],{"type":23,"value":156},"using the enter/return key",{"type":17,"tag":51,"props":158,"children":159},{},[160],{"type":23,"value":161},"using fewer keystrokes",{"type":17,"tag":51,"props":163,"children":164},{},[165],{"type":23,"value":166},"by choosing a suggestion (if applicable)",{"type":17,"tag":51,"props":168,"children":169},{},[170],{"type":23,"value":171},"that afterwards, still displays the search keyword.",{"type":17,"tag":89,"props":173,"children":175},{"id":174},"predictive-keyword-list",[176],{"type":23,"value":177},"Predictive keyword list",{"type":17,"tag":26,"props":179,"children":180},{},[181],{"type":23,"value":182},"Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing.",{"type":17,"tag":26,"props":184,"children":185},{},[186],{"type":23,"value":187},"Use a short, ordered list of no more than 10 keyword suggestions.",{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"They should appear after only a few keystrokes.",{"type":17,"tag":26,"props":194,"children":195},{},[196],{"type":23,"value":197},"Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit.",{"type":17,"tag":26,"props":199,"children":200},{},[201],{"type":23,"value":202},"Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one.",{"type":17,"tag":82,"props":204,"children":206},{"id":205},"when-and-how-to-use",[207],{"type":23,"value":208},"When and how to use",{"type":17,"tag":47,"props":210,"children":211},{},[212,217,222,227,232,237,242],{"type":17,"tag":51,"props":213,"children":214},{},[215],{"type":23,"value":216},"Use the search bar to let users search your site (site search).",{"type":17,"tag":51,"props":218,"children":219},{},[220],{"type":23,"value":221},"Use default search field on white page background.",{"type":17,"tag":51,"props":223,"children":224},{},[225],{"type":23,"value":226},"Use reverse search field on grey background.",{"type":17,"tag":51,"props":228,"children":229},{},[230],{"type":23,"value":231},"Use menu variant in the mega menu only.",{"type":17,"tag":51,"props":233,"children":234},{},[235],{"type":23,"value":236},"Use only default and reverse variants with predictive list suggestions.",{"type":17,"tag":51,"props":238,"children":239},{},[240],{"type":23,"value":241},"Even if it's hidden from view, always use a form label for screen readers.",{"type":17,"tag":51,"props":243,"children":244},{},[245],{"type":23,"value":246},"Keep placeholder text concise and descriptive.",{"type":17,"tag":82,"props":248,"children":250},{"id":249},"when-and-how-not-to-use",[251],{"type":23,"value":252},"When and how not to use",{"type":17,"tag":47,"props":254,"children":255},{},[256,261,266,271,276],{"type":17,"tag":51,"props":257,"children":258},{},[259],{"type":23,"value":260},"Don't use default or reverse variants in the mega menu.",{"type":17,"tag":51,"props":262,"children":263},{},[264],{"type":23,"value":265},"Don't use filters or refine search with the menu variant.",{"type":17,"tag":51,"props":267,"children":268},{},[269],{"type":23,"value":270},"Don't use multiline search inputs.",{"type":17,"tag":51,"props":272,"children":273},{},[274],{"type":23,"value":275},"Revised search shouldn't be by default.",{"type":17,"tag":51,"props":277,"children":278},{},[279],{"type":23,"value":280},"Don't use with the refine search link if no filters are available.",{"type":17,"tag":282,"props":283,"children":284},"hr",{},[],{"type":17,"tag":18,"props":286,"children":288},{"id":287},"variants",[289],{"type":23,"value":290},"Variants",{"type":17,"tag":26,"props":292,"children":293},{},[294],{"type":23,"value":295},"The 3 search variants include:",{"type":17,"tag":47,"props":297,"children":298},{},[299,304,309],{"type":17,"tag":51,"props":300,"children":301},{},[302],{"type":23,"value":303},"default",{"type":17,"tag":51,"props":305,"children":306},{},[307],{"type":23,"value":308},"reverse",{"type":17,"tag":51,"props":310,"children":311},{},[312],{"type":23,"value":313},"menu.",{"type":17,"tag":82,"props":315,"children":316},{"id":303},[317],{"type":23,"value":318},"Default",{"type":17,"tag":26,"props":320,"children":321},{},[322],{"type":23,"value":323},"This is standard search. The button initiates search based on the text input.",{"type":17,"tag":77,"props":325,"children":326},{"id":79},[],{"type":17,"tag":82,"props":328,"children":329},{"id":308},[330],{"type":23,"value":331},"Reverse",{"type":17,"tag":26,"props":333,"children":334},{},[335],{"type":23,"value":336},"Use the reverse variant when on a neutral background and you can't use the default variant.",{"type":17,"tag":77,"props":338,"children":340},{"id":339},"core-navigation-search-bar--reverse",[],{"type":17,"tag":82,"props":342,"children":344},{"id":343},"menu",[345],{"type":23,"value":346},"Menu",{"type":17,"tag":26,"props":348,"children":349},{},[350,352,359],{"type":23,"value":351},"Use this in the mega menu. See ",{"type":17,"tag":353,"props":354,"children":356},"a",{"href":355},"/design-system/components/primary-navigation/",[357],{"type":23,"value":358},"Primary Navigation",{"type":23,"value":360}," for more information.",{"type":17,"tag":77,"props":362,"children":364},{"id":363},"core-navigation-search-bar--menu",[],{"type":17,"tag":282,"props":366,"children":367},{},[],{"type":17,"tag":18,"props":369,"children":371},{"id":370},"theming",[372],{"type":23,"value":373},"Theming",{"type":17,"tag":26,"props":375,"children":376},{},[377],{"type":23,"value":378},"The search bar uses colour for:",{"type":17,"tag":47,"props":380,"children":381},{},[382,387],{"type":17,"tag":51,"props":383,"children":384},{},[385],{"type":23,"value":386},"indicating an action to users",{"type":17,"tag":51,"props":388,"children":389},{},[390],{"type":23,"value":391},"interaction states.",{"type":17,"tag":393,"props":394,"children":395},"docs-theme-chooser",{},[396,399],{"type":17,"tag":77,"props":397,"children":398},{"id":79},[],{"type":17,"tag":77,"props":400,"children":401},{"id":363},[],{"type":17,"tag":26,"props":403,"children":404},{},[405,407,412,414,419],{"type":23,"value":406},"To create your own theme, see ",{"type":17,"tag":353,"props":408,"children":409},{"href":8},[410],{"type":23,"value":411},"theming guidance for designers",{"type":23,"value":413}," or ",{"type":17,"tag":353,"props":415,"children":416},{"href":8},[417],{"type":23,"value":418},"theming guidance for developers",{"type":23,"value":420},".",{"title":8,"searchDepth":422,"depth":422,"links":423},2,[424,430,435],{"id":20,"depth":422,"text":24,"children":425},[426,428,429],{"id":84,"depth":427,"text":87},3,{"id":205,"depth":427,"text":208},{"id":249,"depth":427,"text":252},{"id":287,"depth":422,"text":290,"children":431},[432,433,434],{"id":303,"depth":427,"text":318},{"id":308,"depth":427,"text":331},{"id":343,"depth":427,"text":346},{"id":370,"depth":422,"text":373},"markdown","content:design-system:5.components:search-bar.md","content","design-system/5.components/search-bar.md","md",{"/design-system/components/search-bar":442},[443,449],{"_path":444,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":445,"description":446,"layout":11,"label":12,"_type":436,"_id":447,"_source":438,"_file":448,"_extension":440},"/design-system/components/results-listing","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","content:design-system:5.components:results-listing.md","design-system/5.components/results-listing.md",{"_path":450,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":451,"description":452,"layout":11,"label":12,"_type":436,"_id":453,"_source":438,"_file":454,"_extension":440},"/design-system/components/skip-link","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","content:design-system:5.components:skip-link.md","design-system/5.components/skip-link.md",{},[457,462,703],{"title":458,"_path":459,"icon":460,"layout":461},"Ripple Design System","/","carbon:home","home",{"title":463,"_path":464,"children":465},"Design System","/design-system",[466,482,498,527,561],{"title":467,"_path":468,"children":469},"About","/design-system/about",[470,473,476,479],{"title":471,"_path":472,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":474,"_path":475,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":477,"_path":478,"layout":11},"Support","/design-system/about/getting-support",{"title":480,"_path":481,"layout":11},"Contributing","/design-system/about/contributing",{"title":483,"_path":484,"children":485},"Design","/design-system/design",[486,489,492,495],{"title":487,"_path":488,"layout":11},"Getting started","/design-system/design/getting-started",{"title":490,"_path":491,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":493,"_path":494,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":496,"_path":497,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":499,"_path":500,"children":501},"Develop","/design-system/develop",[502,504,506,509],{"title":487,"_path":503,"layout":11},"/design-system/develop/getting-started",{"title":480,"_path":505,"layout":11},"/design-system/develop/contributing",{"title":507,"_path":508,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":510,"children":511,"layout":11},"/design-system/develop/usage",[512,515,518,521,524],{"title":513,"_path":514,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":516,"_path":517,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":519,"_path":520,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":522,"_path":523,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":525,"_path":526,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":528,"_path":529,"children":530},"Styles","/design-system/styles",[531,534,537,540,543,546,549,552,555,558],{"title":532,"_path":533,"layout":11},"Colour","/design-system/styles/colour",{"title":535,"_path":536,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":538,"_path":539,"layout":11},"Grid","/design-system/styles/grid",{"title":541,"_path":542,"layout":11},"Icons","/design-system/styles/icons",{"title":544,"_path":545,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":547,"_path":548,"layout":11},"Layout","/design-system/styles/layout",{"title":550,"_path":551,"layout":11},"Logo","/design-system/styles/logo",{"title":553,"_path":554,"layout":11},"Motion","/design-system/styles/motion",{"title":556,"_path":557,"layout":11},"Spacing","/design-system/styles/spacing",{"title":559,"_path":560,"layout":11},"Typography","/design-system/styles/typography",{"title":562,"_path":563,"children":564},"Components","/design-system/components",[565,568,571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,649,652,655,658,661,664,667,670,673,676,677,678,679,682,685,688,691,694,697,700],{"title":566,"_path":567,"layout":11},"Accordion","/design-system/components/accordion",{"title":569,"_path":570,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":572,"_path":573,"layout":11},"Alert","/design-system/components/alert",{"title":575,"_path":576,"layout":11},"Block quote","/design-system/components/block-quote",{"title":578,"_path":579,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":581,"_path":582,"layout":11},"Button","/design-system/components/button",{"title":584,"_path":585,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":587,"_path":588,"layout":11},"Callout","/design-system/components/callout",{"title":590,"_path":591,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":593,"_path":594,"layout":11},"Card","/design-system/components/card",{"title":596,"_path":597,"layout":11},"Carousel","/design-system/components/carousel",{"title":599,"_path":600,"layout":11},"Category grid","/design-system/components/category-grid",{"title":602,"_path":603,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":605,"_path":606,"layout":11},"Chip","/design-system/components/chip",{"title":608,"_path":609,"layout":11},"Contact us","/design-system/components/contact-us",{"title":611,"_path":612,"layout":11},"Date input","/design-system/components/date-input",{"title":614,"_path":615,"layout":11},"Detail list","/design-system/components/detail-list",{"title":617,"_path":618,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":620,"_path":621,"layout":11},"File","/design-system/components/file",{"title":623,"_path":624,"layout":11},"Footer","/design-system/components/footer",{"title":626,"_path":627,"layout":11},"Form alert","/design-system/components/form-alert",{"title":629,"_path":630,"layout":11},"Form","/design-system/components/form",{"title":632,"_path":633,"layout":11},"Header","/design-system/components/header",{"title":635,"_path":636,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":638,"_path":639,"layout":11},"Input field","/design-system/components/input-field",{"title":641,"_path":642,"layout":11},"Key dates","/design-system/components/key-dates",{"title":644,"_path":645,"layout":11},"Media embed","/design-system/components/media-embed",{"title":647,"_path":648,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":650,"_path":651,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":653,"_path":654,"layout":11},"Media","/design-system/components/media",{"title":656,"_path":657,"layout":11},"Option button","/design-system/components/option-button",{"title":659,"_path":660,"layout":11},"Page action","/design-system/components/page-action",{"title":662,"_path":663,"layout":11},"Pagination","/design-system/components/pagination",{"title":665,"_path":666,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":668,"_path":669,"layout":11},"Profile","/design-system/components/profile",{"title":671,"_path":672,"layout":11},"Radio button","/design-system/components/radio-button",{"title":674,"_path":675,"layout":11},"Related links","/design-system/components/related-links",{"title":445,"_path":444,"layout":11},{"title":9,"_path":5,"layout":11},{"title":451,"_path":450,"layout":11},{"title":680,"_path":681,"layout":11},"Social share","/design-system/components/social-share",{"title":683,"_path":684,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":686,"_path":687,"layout":11},"Table","/design-system/components/table",{"title":689,"_path":690,"layout":11},"Tabs","/design-system/components/tabs",{"title":692,"_path":693,"layout":11},"Tag","/design-system/components/tag",{"title":695,"_path":696,"layout":11},"Text area","/design-system/components/text-area",{"title":698,"_path":699,"layout":11},"Timeline","/design-system/components/timeline",{"title":701,"_path":702,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":704,"_path":705,"children":706,"layout":11},"Ripple Framework","/framework",[707,708,726,748],{"title":704,"_path":705,"layout":11},{"title":709,"_path":710,"children":711},"Key Concepts","/framework/key-concepts",[712,714,717,720,723],{"title":519,"_path":713,"layout":11},"/framework/key-concepts/nuxt",{"title":715,"_path":716,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":718,"_path":719,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":721,"_path":722,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":724,"_path":725,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":727,"_path":728,"children":729},"Guides","/framework/guides",[730,733,736,739,742,745],{"title":731,"_path":732,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":734,"_path":735,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":737,"_path":738,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":740,"_path":741,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":743,"_path":744,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":746,"_path":747,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":749,"_path":750,"layout":11},"Core modules","/framework/core-modules",["Reactive",752],{"module-navigation":753},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Search bar</h1><p class="rpl-type-p-large" data-v-3163c6df>The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the search bar to help users find what they are looking for.<!--]--></p><p><!--[-->Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation.<!--]--></p><p><!--[-->Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages.<!--]--></p><p><!--[-->The search bar includes:<!--]--></p><ul><!--[--><li><!--[-->text - placeholder and input text<!--]--></li><li><!--[-->search button label<!--]--></li><li><!--[-->search button icon<!--]--></li><li><!--[-->optional predictive list - present suggested keywords to the user<!--]--></li><li><!--[-->optional refine search link - expand to present advanced filters to the user.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><h4 id="input-text"><a href="#input-text"><!--[-->Input text<!--]--></a></h4><p><!--[-->Include short, descriptive placeholder text. This tells the user what they can search for.<!--]--></p><p><!--[-->The text the user inputs replaces the placeholder text.<!--]--></p><h4 id="search-button"><a href="#search-button"><!--[-->Search button<!--]--></a></h4><p><!--[-->The search button contains a button label and search icon.<!--]--></p><p><!--[-->Smaller devices show a responsive variant with:<!--]--></p><ul><!--[--><li><!--[-->only a search icon<!--]--></li><li><!--[-->no button label.<!--]--></li><!--]--></ul><p><!--[-->This gives the user more space to write search text. Users know that a magnifying glass represents a search function.<!--]--></p><p><!--[-->The word ‘Search’ must appear in the alt text for screen readers.<!--]--></p><p><!--[-->The button type should be a submit button. This lets a user conduct a search:<!--]--></p><ul><!--[--><li><!--[-->using the enter/return key<!--]--></li><li><!--[-->using fewer keystrokes<!--]--></li><li><!--[-->by choosing a suggestion (if applicable)<!--]--></li><li><!--[-->that afterwards, still displays the search keyword.<!--]--></li><!--]--></ul><h4 id="predictive-keyword-list"><a href="#predictive-keyword-list"><!--[-->Predictive keyword list<!--]--></a></h4><p><!--[-->Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing.<!--]--></p><p><!--[-->Use a short, ordered list of no more than 10 keyword suggestions.<!--]--></p><p><!--[-->They should appear after only a few keystrokes.<!--]--></p><p><!--[-->Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit.<!--]--></p><p><!--[-->Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use the search bar to let users search your site (site search).<!--]--></li><li><!--[-->Use default search field on white page background.<!--]--></li><li><!--[-->Use reverse search field on grey background.<!--]--></li><li><!--[-->Use menu variant in the mega menu only.<!--]--></li><li><!--[-->Use only default and reverse variants with predictive list suggestions.<!--]--></li><li><!--[-->Even if it's hidden from view, always use a form label for screen readers.<!--]--></li><li><!--[-->Keep placeholder text concise and descriptive.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use default or reverse variants in the mega menu.<!--]--></li><li><!--[-->Don't use filters or refine search with the menu variant.<!--]--></li><li><!--[-->Don't use multiline search inputs.<!--]--></li><li><!--[-->Revised search shouldn't be by default.<!--]--></li><li><!--[-->Don't use with the refine search link if no filters are available.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The 3 search variants include:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->reverse<!--]--></li><li><!--[-->menu.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->This is standard search. The button initiates search based on the text input.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><p><!--[-->Use the reverse variant when on a neutral background and you can't use the default variant.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="menu"><a href="#menu"><!--[-->Menu<!--]--></a></h3><p><!--[-->Use this in the mega menu. See <a href="/design-system/components/primary-navigation/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Primary Navigation<!--]--><!--]--><!----><!--]--></a> for more information.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--menu&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--menu&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The search bar uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating an action to users<!--]--></li><li><!--[-->interaction states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-search-bar--menu&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--menu&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/search-bar.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/search-bar/_payload.json">[{"state":1,"_errors":751,"serverRendered":754,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":441,"$sdd-globals":455,"$sdd-navigation":456},{"/design-system/components/search-bar":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":436,"_id":437,"_source":438,"_file":439,"_extension":440},"/design-system/components/search-bar","components",false,"","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","page","Core",{"type":14,"children":15,"toc":421},"root",[16,25,31,36,41,46,76,81,88,95,100,105,111,116,121,134,139,144,149,172,178,183,188,193,198,203,209,247,253,281,285,291,296,314,319,324,327,332,337,341,347,361,365,368,374,379,392,402],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the search bar to help users find what they are looking for.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"The search bar includes:",{"type":17,"tag":47,"props":48,"children":49},"ul",{},[50,56,61,66,71],{"type":17,"tag":51,"props":52,"children":53},"li",{},[54],{"type":23,"value":55},"text - placeholder and input text",{"type":17,"tag":51,"props":57,"children":58},{},[59],{"type":23,"value":60},"search button label",{"type":17,"tag":51,"props":62,"children":63},{},[64],{"type":23,"value":65},"search button icon",{"type":17,"tag":51,"props":67,"children":68},{},[69],{"type":23,"value":70},"optional predictive list - present suggested keywords to the user",{"type":17,"tag":51,"props":72,"children":73},{},[74],{"type":23,"value":75},"optional refine search link - expand to present advanced filters to the user.",{"type":17,"tag":77,"props":78,"children":80},"docs-example",{"id":79},"core-navigation-search-bar--default-story",[],{"type":17,"tag":82,"props":83,"children":85},"h3",{"id":84},"how-this-component-works",[86],{"type":23,"value":87},"How this component works",{"type":17,"tag":89,"props":90,"children":92},"h4",{"id":91},"input-text",[93],{"type":23,"value":94},"Input text",{"type":17,"tag":26,"props":96,"children":97},{},[98],{"type":23,"value":99},"Include short, descriptive placeholder text. This tells the user what they can search for.",{"type":17,"tag":26,"props":101,"children":102},{},[103],{"type":23,"value":104},"The text the user inputs replaces the placeholder text.",{"type":17,"tag":89,"props":106,"children":108},{"id":107},"search-button",[109],{"type":23,"value":110},"Search button",{"type":17,"tag":26,"props":112,"children":113},{},[114],{"type":23,"value":115},"The search button contains a button label and search icon.",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"Smaller devices show a responsive variant with:",{"type":17,"tag":47,"props":122,"children":123},{},[124,129],{"type":17,"tag":51,"props":125,"children":126},{},[127],{"type":23,"value":128},"only a search icon",{"type":17,"tag":51,"props":130,"children":131},{},[132],{"type":23,"value":133},"no button label.",{"type":17,"tag":26,"props":135,"children":136},{},[137],{"type":23,"value":138},"This gives the user more space to write search text. Users know that a magnifying glass represents a search function.",{"type":17,"tag":26,"props":140,"children":141},{},[142],{"type":23,"value":143},"The word ‘Search’ must appear in the alt text for screen readers.",{"type":17,"tag":26,"props":145,"children":146},{},[147],{"type":23,"value":148},"The button type should be a submit button. This lets a user conduct a search:",{"type":17,"tag":47,"props":150,"children":151},{},[152,157,162,167],{"type":17,"tag":51,"props":153,"children":154},{},[155],{"type":23,"value":156},"using the enter/return key",{"type":17,"tag":51,"props":158,"children":159},{},[160],{"type":23,"value":161},"using fewer keystrokes",{"type":17,"tag":51,"props":163,"children":164},{},[165],{"type":23,"value":166},"by choosing a suggestion (if applicable)",{"type":17,"tag":51,"props":168,"children":169},{},[170],{"type":23,"value":171},"that afterwards, still displays the search keyword.",{"type":17,"tag":89,"props":173,"children":175},{"id":174},"predictive-keyword-list",[176],{"type":23,"value":177},"Predictive keyword list",{"type":17,"tag":26,"props":179,"children":180},{},[181],{"type":23,"value":182},"Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing.",{"type":17,"tag":26,"props":184,"children":185},{},[186],{"type":23,"value":187},"Use a short, ordered list of no more than 10 keyword suggestions.",{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"They should appear after only a few keystrokes.",{"type":17,"tag":26,"props":194,"children":195},{},[196],{"type":23,"value":197},"Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit.",{"type":17,"tag":26,"props":199,"children":200},{},[201],{"type":23,"value":202},"Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one.",{"type":17,"tag":82,"props":204,"children":206},{"id":205},"when-and-how-to-use",[207],{"type":23,"value":208},"When and how to use",{"type":17,"tag":47,"props":210,"children":211},{},[212,217,222,227,232,237,242],{"type":17,"tag":51,"props":213,"children":214},{},[215],{"type":23,"value":216},"Use the search bar to let users search your site (site search).",{"type":17,"tag":51,"props":218,"children":219},{},[220],{"type":23,"value":221},"Use default search field on white page background.",{"type":17,"tag":51,"props":223,"children":224},{},[225],{"type":23,"value":226},"Use reverse search field on grey background.",{"type":17,"tag":51,"props":228,"children":229},{},[230],{"type":23,"value":231},"Use menu variant in the mega menu only.",{"type":17,"tag":51,"props":233,"children":234},{},[235],{"type":23,"value":236},"Use only default and reverse variants with predictive list suggestions.",{"type":17,"tag":51,"props":238,"children":239},{},[240],{"type":23,"value":241},"Even if it's hidden from view, always use a form label for screen readers.",{"type":17,"tag":51,"props":243,"children":244},{},[245],{"type":23,"value":246},"Keep placeholder text concise and descriptive.",{"type":17,"tag":82,"props":248,"children":250},{"id":249},"when-and-how-not-to-use",[251],{"type":23,"value":252},"When and how not to use",{"type":17,"tag":47,"props":254,"children":255},{},[256,261,266,271,276],{"type":17,"tag":51,"props":257,"children":258},{},[259],{"type":23,"value":260},"Don't use default or reverse variants in the mega menu.",{"type":17,"tag":51,"props":262,"children":263},{},[264],{"type":23,"value":265},"Don't use filters or refine search with the menu variant.",{"type":17,"tag":51,"props":267,"children":268},{},[269],{"type":23,"value":270},"Don't use multiline search inputs.",{"type":17,"tag":51,"props":272,"children":273},{},[274],{"type":23,"value":275},"Revised search shouldn't be by default.",{"type":17,"tag":51,"props":277,"children":278},{},[279],{"type":23,"value":280},"Don't use with the refine search link if no filters are available.",{"type":17,"tag":282,"props":283,"children":284},"hr",{},[],{"type":17,"tag":18,"props":286,"children":288},{"id":287},"variants",[289],{"type":23,"value":290},"Variants",{"type":17,"tag":26,"props":292,"children":293},{},[294],{"type":23,"value":295},"The 3 search variants include:",{"type":17,"tag":47,"props":297,"children":298},{},[299,304,309],{"type":17,"tag":51,"props":300,"children":301},{},[302],{"type":23,"value":303},"default",{"type":17,"tag":51,"props":305,"children":306},{},[307],{"type":23,"value":308},"reverse",{"type":17,"tag":51,"props":310,"children":311},{},[312],{"type":23,"value":313},"menu.",{"type":17,"tag":82,"props":315,"children":316},{"id":303},[317],{"type":23,"value":318},"Default",{"type":17,"tag":26,"props":320,"children":321},{},[322],{"type":23,"value":323},"This is standard search. The button initiates search based on the text input.",{"type":17,"tag":77,"props":325,"children":326},{"id":79},[],{"type":17,"tag":82,"props":328,"children":329},{"id":308},[330],{"type":23,"value":331},"Reverse",{"type":17,"tag":26,"props":333,"children":334},{},[335],{"type":23,"value":336},"Use the reverse variant when on a neutral background and you can't use the default variant.",{"type":17,"tag":77,"props":338,"children":340},{"id":339},"core-navigation-search-bar--reverse",[],{"type":17,"tag":82,"props":342,"children":344},{"id":343},"menu",[345],{"type":23,"value":346},"Menu",{"type":17,"tag":26,"props":348,"children":349},{},[350,352,359],{"type":23,"value":351},"Use this in the mega menu. See ",{"type":17,"tag":353,"props":354,"children":356},"a",{"href":355},"/design-system/components/primary-navigation/",[357],{"type":23,"value":358},"Primary Navigation",{"type":23,"value":360}," for more information.",{"type":17,"tag":77,"props":362,"children":364},{"id":363},"core-navigation-search-bar--menu",[],{"type":17,"tag":282,"props":366,"children":367},{},[],{"type":17,"tag":18,"props":369,"children":371},{"id":370},"theming",[372],{"type":23,"value":373},"Theming",{"type":17,"tag":26,"props":375,"children":376},{},[377],{"type":23,"value":378},"The search bar uses colour for:",{"type":17,"tag":47,"props":380,"children":381},{},[382,387],{"type":17,"tag":51,"props":383,"children":384},{},[385],{"type":23,"value":386},"indicating an action to users",{"type":17,"tag":51,"props":388,"children":389},{},[390],{"type":23,"value":391},"interaction states.",{"type":17,"tag":393,"props":394,"children":395},"docs-theme-chooser",{},[396,399],{"type":17,"tag":77,"props":397,"children":398},{"id":79},[],{"type":17,"tag":77,"props":400,"children":401},{"id":363},[],{"type":17,"tag":26,"props":403,"children":404},{},[405,407,412,414,419],{"type":23,"value":406},"To create your own theme, see ",{"type":17,"tag":353,"props":408,"children":409},{"href":8},[410],{"type":23,"value":411},"theming guidance for designers",{"type":23,"value":413}," or ",{"type":17,"tag":353,"props":415,"children":416},{"href":8},[417],{"type":23,"value":418},"theming guidance for developers",{"type":23,"value":420},".",{"title":8,"searchDepth":422,"depth":422,"links":423},2,[424,430,435],{"id":20,"depth":422,"text":24,"children":425},[426,428,429],{"id":84,"depth":427,"text":87},3,{"id":205,"depth":427,"text":208},{"id":249,"depth":427,"text":252},{"id":287,"depth":422,"text":290,"children":431},[432,433,434],{"id":303,"depth":427,"text":318},{"id":308,"depth":427,"text":331},{"id":343,"depth":427,"text":346},{"id":370,"depth":422,"text":373},"markdown","content:design-system:5.components:search-bar.md","content","design-system/5.components/search-bar.md","md",{"/design-system/components/search-bar":442},[443,449],{"_path":444,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":445,"description":446,"layout":11,"label":12,"_type":436,"_id":447,"_source":438,"_file":448,"_extension":440},"/design-system/components/results-listing","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","content:design-system:5.components:results-listing.md","design-system/5.components/results-listing.md",{"_path":450,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":451,"description":452,"layout":11,"label":12,"_type":436,"_id":453,"_source":438,"_file":454,"_extension":440},"/design-system/components/skip-link","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","content:design-system:5.components:skip-link.md","design-system/5.components/skip-link.md",{},[457,462,703],{"title":458,"_path":459,"icon":460,"layout":461},"Ripple Design System","/","carbon:home","home",{"title":463,"_path":464,"children":465},"Design System","/design-system",[466,482,498,527,561],{"title":467,"_path":468,"children":469},"About","/design-system/about",[470,473,476,479],{"title":471,"_path":472,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":474,"_path":475,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":477,"_path":478,"layout":11},"Support","/design-system/about/getting-support",{"title":480,"_path":481,"layout":11},"Contributing","/design-system/about/contributing",{"title":483,"_path":484,"children":485},"Design","/design-system/design",[486,489,492,495],{"title":487,"_path":488,"layout":11},"Getting started","/design-system/design/getting-started",{"title":490,"_path":491,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":493,"_path":494,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":496,"_path":497,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":499,"_path":500,"children":501},"Develop","/design-system/develop",[502,504,506,509],{"title":487,"_path":503,"layout":11},"/design-system/develop/getting-started",{"title":480,"_path":505,"layout":11},"/design-system/develop/contributing",{"title":507,"_path":508,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":510,"children":511,"layout":11},"/design-system/develop/usage",[512,515,518,521,524],{"title":513,"_path":514,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":516,"_path":517,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":519,"_path":520,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":522,"_path":523,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":525,"_path":526,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":528,"_path":529,"children":530},"Styles","/design-system/styles",[531,534,537,540,543,546,549,552,555,558],{"title":532,"_path":533,"layout":11},"Colour","/design-system/styles/colour",{"title":535,"_path":536,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":538,"_path":539,"layout":11},"Grid","/design-system/styles/grid",{"title":541,"_path":542,"layout":11},"Icons","/design-system/styles/icons",{"title":544,"_path":545,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":547,"_path":548,"layout":11},"Layout","/design-system/styles/layout",{"title":550,"_path":551,"layout":11},"Logo","/design-system/styles/logo",{"title":553,"_path":554,"layout":11},"Motion","/design-system/styles/motion",{"title":556,"_path":557,"layout":11},"Spacing","/design-system/styles/spacing",{"title":559,"_path":560,"layout":11},"Typography","/design-system/styles/typography",{"title":562,"_path":563,"children":564},"Components","/design-system/components",[565,568,571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,649,652,655,658,661,664,667,670,673,676,677,678,679,682,685,688,691,694,697,700],{"title":566,"_path":567,"layout":11},"Accordion","/design-system/components/accordion",{"title":569,"_path":570,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":572,"_path":573,"layout":11},"Alert","/design-system/components/alert",{"title":575,"_path":576,"layout":11},"Block quote","/design-system/components/block-quote",{"title":578,"_path":579,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":581,"_path":582,"layout":11},"Button","/design-system/components/button",{"title":584,"_path":585,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":587,"_path":588,"layout":11},"Callout","/design-system/components/callout",{"title":590,"_path":591,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":593,"_path":594,"layout":11},"Card","/design-system/components/card",{"title":596,"_path":597,"layout":11},"Carousel","/design-system/components/carousel",{"title":599,"_path":600,"layout":11},"Category grid","/design-system/components/category-grid",{"title":602,"_path":603,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":605,"_path":606,"layout":11},"Chip","/design-system/components/chip",{"title":608,"_path":609,"layout":11},"Contact us","/design-system/components/contact-us",{"title":611,"_path":612,"layout":11},"Date input","/design-system/components/date-input",{"title":614,"_path":615,"layout":11},"Detail list","/design-system/components/detail-list",{"title":617,"_path":618,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":620,"_path":621,"layout":11},"File","/design-system/components/file",{"title":623,"_path":624,"layout":11},"Footer","/design-system/components/footer",{"title":626,"_path":627,"layout":11},"Form alert","/design-system/components/form-alert",{"title":629,"_path":630,"layout":11},"Form","/design-system/components/form",{"title":632,"_path":633,"layout":11},"Header","/design-system/components/header",{"title":635,"_path":636,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":638,"_path":639,"layout":11},"Input field","/design-system/components/input-field",{"title":641,"_path":642,"layout":11},"Key dates","/design-system/components/key-dates",{"title":644,"_path":645,"layout":11},"Media embed","/design-system/components/media-embed",{"title":647,"_path":648,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":650,"_path":651,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":653,"_path":654,"layout":11},"Media","/design-system/components/media",{"title":656,"_path":657,"layout":11},"Option button","/design-system/components/option-button",{"title":659,"_path":660,"layout":11},"Page action","/design-system/components/page-action",{"title":662,"_path":663,"layout":11},"Pagination","/design-system/components/pagination",{"title":665,"_path":666,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":668,"_path":669,"layout":11},"Profile","/design-system/components/profile",{"title":671,"_path":672,"layout":11},"Radio button","/design-system/components/radio-button",{"title":674,"_path":675,"layout":11},"Related links","/design-system/components/related-links",{"title":445,"_path":444,"layout":11},{"title":9,"_path":5,"layout":11},{"title":451,"_path":450,"layout":11},{"title":680,"_path":681,"layout":11},"Social share","/design-system/components/social-share",{"title":683,"_path":684,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":686,"_path":687,"layout":11},"Table","/design-system/components/table",{"title":689,"_path":690,"layout":11},"Tabs","/design-system/components/tabs",{"title":692,"_path":693,"layout":11},"Tag","/design-system/components/tag",{"title":695,"_path":696,"layout":11},"Text area","/design-system/components/text-area",{"title":698,"_path":699,"layout":11},"Timeline","/design-system/components/timeline",{"title":701,"_path":702,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":704,"_path":705,"children":706,"layout":11},"Ripple Framework","/framework",[707,708,726,748],{"title":704,"_path":705,"layout":11},{"title":709,"_path":710,"children":711},"Key Concepts","/framework/key-concepts",[712,714,717,720,723],{"title":519,"_path":713,"layout":11},"/framework/key-concepts/nuxt",{"title":715,"_path":716,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":718,"_path":719,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":721,"_path":722,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":724,"_path":725,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":727,"_path":728,"children":729},"Guides","/framework/guides",[730,733,736,739,742,745],{"title":731,"_path":732,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":734,"_path":735,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":737,"_path":738,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":740,"_path":741,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":743,"_path":744,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":746,"_path":747,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":749,"_path":750,"layout":11},"Core modules","/framework/core-modules",["Reactive",752],{"module-navigation":753},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/skip-link/index.html b/design-system/components/skip-link/index.html index 5c5c3f8059..facfaa9244 100644 --- a/design-system/components/skip-link/index.html +++ b/design-system/components/skip-link/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Skip link</h1><p class="rpl-type-p-large" data-v-3163c6df>The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use skip links to let users:<!--]--></p><ul><!--[--><li><!--[-->navigate quickly through links and form elements<!--]--></li><li><!--[-->navigate your page when interacting only through the keyboard<!--]--></li><li><!--[-->let users navigate directly to the main page content.<!--]--></li><!--]--></ul><p><!--[-->Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page).<!--]--></p><p><!--[-->Until the user activates it through a keyboard press, a skip link won’t display.<!--]--></p><p><!--[-->When visible, it's always the first item on a page and pushes down all page content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-layout-skip-links--stand-alone&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-layout-skip-links--stand-alone&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->It must be on every page.<!--]--></li><li><!--[-->When visible, it must be the first element on the page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only use at the top of the page.<!--]--></li><li><!--[-->Don't edit the styling.<!--]--></li><li><!--[-->Don't overlay page content. It must push down the page content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-layout-skip-links--stand-alone&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-layout-skip-links--stand-alone&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/skip-link.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/skip-link/_payload.json">[{"state":1,"_errors":481,"serverRendered":484,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":171,"$sdd-globals":185,"$sdd-navigation":186},{"/design-system/components/skip-link":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":166,"_id":167,"_source":168,"_file":169,"_extension":170},"/design-system/components/skip-link","components",false,"","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","page","Core",{"type":14,"children":15,"toc":157},"root",[16,25,31,51,56,61,66,71,78,91,97,115,119,125,130,137],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use skip links to let users:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41,46],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"navigate quickly through links and form elements",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"navigate your page when interacting only through the keyboard",{"type":17,"tag":36,"props":47,"children":48},{},[49],{"type":23,"value":50},"let users navigate directly to the main page content.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page).",{"type":17,"tag":26,"props":57,"children":58},{},[59],{"type":23,"value":60},"Until the user activates it through a keyboard press, a skip link won’t display.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"When visible, it's always the first item on a page and pushes down all page content.",{"type":17,"tag":67,"props":68,"children":70},"docs-example",{"id":69},"core-layout-skip-links--stand-alone",[],{"type":17,"tag":72,"props":73,"children":75},"h3",{"id":74},"when-and-how-to-use",[76],{"type":23,"value":77},"When and how to use",{"type":17,"tag":32,"props":79,"children":80},{},[81,86],{"type":17,"tag":36,"props":82,"children":83},{},[84],{"type":23,"value":85},"It must be on every page.",{"type":17,"tag":36,"props":87,"children":88},{},[89],{"type":23,"value":90},"When visible, it must be the first element on the page.",{"type":17,"tag":72,"props":92,"children":94},{"id":93},"when-and-how-not-to-use",[95],{"type":23,"value":96},"When and how not to use",{"type":17,"tag":32,"props":98,"children":99},{},[100,105,110],{"type":17,"tag":36,"props":101,"children":102},{},[103],{"type":23,"value":104},"Only use at the top of the page.",{"type":17,"tag":36,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't edit the styling.",{"type":17,"tag":36,"props":111,"children":112},{},[113],{"type":23,"value":114},"Don't overlay page content. It must push down the page content.",{"type":17,"tag":116,"props":117,"children":118},"hr",{},[],{"type":17,"tag":18,"props":120,"children":122},{"id":121},"theming",[123],{"type":23,"value":124},"Theming",{"type":17,"tag":26,"props":126,"children":127},{},[128],{"type":23,"value":129},"The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users.",{"type":17,"tag":131,"props":132,"children":133},"docs-theme-chooser",{},[134],{"type":17,"tag":67,"props":135,"children":136},{"id":69},[],{"type":17,"tag":26,"props":138,"children":139},{},[140,142,148,150,155],{"type":23,"value":141},"To create your own theme, see ",{"type":17,"tag":143,"props":144,"children":145},"a",{"href":8},[146],{"type":23,"value":147},"theming guidance for designers",{"type":23,"value":149}," or ",{"type":17,"tag":143,"props":151,"children":152},{"href":8},[153],{"type":23,"value":154},"theming guidance for developers",{"type":23,"value":156},".",{"title":8,"searchDepth":158,"depth":158,"links":159},2,[160,165],{"id":20,"depth":158,"text":24,"children":161},[162,164],{"id":74,"depth":163,"text":77},3,{"id":93,"depth":163,"text":96},{"id":121,"depth":158,"text":124},"markdown","content:design-system:5.components:skip-link.md","content","design-system/5.components/skip-link.md","md",{"/design-system/components/skip-link":172},[173,179],{"_path":174,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":175,"description":176,"layout":11,"label":12,"_type":166,"_id":177,"_source":168,"_file":178,"_extension":170},"/design-system/components/search-bar","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","content:design-system:5.components:search-bar.md","design-system/5.components/search-bar.md",{"_path":180,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":181,"description":182,"layout":11,"label":12,"_type":166,"_id":183,"_source":168,"_file":184,"_extension":170},"/design-system/components/social-share","Social share","The Social share component shows a list of links to help users to share pages to social media.","content:design-system:5.components:social-share.md","design-system/5.components/social-share.md",{},[187,192,433],{"title":188,"_path":189,"icon":190,"layout":191},"Ripple Design System","/","carbon:home","home",{"title":193,"_path":194,"children":195},"Design System","/design-system",[196,212,228,257,291],{"title":197,"_path":198,"children":199},"About","/design-system/about",[200,203,206,209],{"title":201,"_path":202,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":204,"_path":205,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":207,"_path":208,"layout":11},"Support","/design-system/about/getting-support",{"title":210,"_path":211,"layout":11},"Contributing","/design-system/about/contributing",{"title":213,"_path":214,"children":215},"Design","/design-system/design",[216,219,222,225],{"title":217,"_path":218,"layout":11},"Getting started","/design-system/design/getting-started",{"title":220,"_path":221,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":223,"_path":224,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":226,"_path":227,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":229,"_path":230,"children":231},"Develop","/design-system/develop",[232,234,236,239],{"title":217,"_path":233,"layout":11},"/design-system/develop/getting-started",{"title":210,"_path":235,"layout":11},"/design-system/develop/contributing",{"title":237,"_path":238,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":240,"children":241,"layout":11},"/design-system/develop/usage",[242,245,248,251,254],{"title":243,"_path":244,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":246,"_path":247,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":249,"_path":250,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":252,"_path":253,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":255,"_path":256,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":258,"_path":259,"children":260},"Styles","/design-system/styles",[261,264,267,270,273,276,279,282,285,288],{"title":262,"_path":263,"layout":11},"Colour","/design-system/styles/colour",{"title":265,"_path":266,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":268,"_path":269,"layout":11},"Grid","/design-system/styles/grid",{"title":271,"_path":272,"layout":11},"Icons","/design-system/styles/icons",{"title":274,"_path":275,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":277,"_path":278,"layout":11},"Layout","/design-system/styles/layout",{"title":280,"_path":281,"layout":11},"Logo","/design-system/styles/logo",{"title":283,"_path":284,"layout":11},"Motion","/design-system/styles/motion",{"title":286,"_path":287,"layout":11},"Spacing","/design-system/styles/spacing",{"title":289,"_path":290,"layout":11},"Typography","/design-system/styles/typography",{"title":292,"_path":293,"children":294},"Components","/design-system/components",[295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,410,411,412,415,418,421,424,427,430],{"title":296,"_path":297,"layout":11},"Accordion","/design-system/components/accordion",{"title":299,"_path":300,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":302,"_path":303,"layout":11},"Alert","/design-system/components/alert",{"title":305,"_path":306,"layout":11},"Block quote","/design-system/components/block-quote",{"title":308,"_path":309,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":311,"_path":312,"layout":11},"Button","/design-system/components/button",{"title":314,"_path":315,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":317,"_path":318,"layout":11},"Callout","/design-system/components/callout",{"title":320,"_path":321,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":323,"_path":324,"layout":11},"Card","/design-system/components/card",{"title":326,"_path":327,"layout":11},"Carousel","/design-system/components/carousel",{"title":329,"_path":330,"layout":11},"Category grid","/design-system/components/category-grid",{"title":332,"_path":333,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":335,"_path":336,"layout":11},"Chip","/design-system/components/chip",{"title":338,"_path":339,"layout":11},"Contact us","/design-system/components/contact-us",{"title":341,"_path":342,"layout":11},"Date input","/design-system/components/date-input",{"title":344,"_path":345,"layout":11},"Detail list","/design-system/components/detail-list",{"title":347,"_path":348,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":350,"_path":351,"layout":11},"File","/design-system/components/file",{"title":353,"_path":354,"layout":11},"Footer","/design-system/components/footer",{"title":356,"_path":357,"layout":11},"Form alert","/design-system/components/form-alert",{"title":359,"_path":360,"layout":11},"Form","/design-system/components/form",{"title":362,"_path":363,"layout":11},"Header","/design-system/components/header",{"title":365,"_path":366,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":368,"_path":369,"layout":11},"Input field","/design-system/components/input-field",{"title":371,"_path":372,"layout":11},"Key dates","/design-system/components/key-dates",{"title":374,"_path":375,"layout":11},"Media embed","/design-system/components/media-embed",{"title":377,"_path":378,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":380,"_path":381,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":383,"_path":384,"layout":11},"Media","/design-system/components/media",{"title":386,"_path":387,"layout":11},"Option button","/design-system/components/option-button",{"title":389,"_path":390,"layout":11},"Page action","/design-system/components/page-action",{"title":392,"_path":393,"layout":11},"Pagination","/design-system/components/pagination",{"title":395,"_path":396,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":398,"_path":399,"layout":11},"Profile","/design-system/components/profile",{"title":401,"_path":402,"layout":11},"Radio button","/design-system/components/radio-button",{"title":404,"_path":405,"layout":11},"Related links","/design-system/components/related-links",{"title":407,"_path":408,"layout":11},"Results listing","/design-system/components/results-listing",{"title":175,"_path":174,"layout":11},{"title":9,"_path":5,"layout":11},{"title":181,"_path":180,"layout":11},{"title":413,"_path":414,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":416,"_path":417,"layout":11},"Table","/design-system/components/table",{"title":419,"_path":420,"layout":11},"Tabs","/design-system/components/tabs",{"title":422,"_path":423,"layout":11},"Tag","/design-system/components/tag",{"title":425,"_path":426,"layout":11},"Text area","/design-system/components/text-area",{"title":428,"_path":429,"layout":11},"Timeline","/design-system/components/timeline",{"title":431,"_path":432,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":434,"_path":435,"children":436,"layout":11},"Ripple Framework","/framework",[437,438,456,478],{"title":434,"_path":435,"layout":11},{"title":439,"_path":440,"children":441},"Key Concepts","/framework/key-concepts",[442,444,447,450,453],{"title":249,"_path":443,"layout":11},"/framework/key-concepts/nuxt",{"title":445,"_path":446,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":448,"_path":449,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":451,"_path":452,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":454,"_path":455,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":457,"_path":458,"children":459},"Guides","/framework/guides",[460,463,466,469,472,475],{"title":461,"_path":462,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":464,"_path":465,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":467,"_path":468,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":470,"_path":471,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":473,"_path":474,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":476,"_path":477,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":479,"_path":480,"layout":11},"Core modules","/framework/core-modules",["Reactive",482],{"module-navigation":483},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Skip link</h1><p class="rpl-type-p-large" data-v-3163c6df>The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use skip links to let users:<!--]--></p><ul><!--[--><li><!--[-->navigate quickly through links and form elements<!--]--></li><li><!--[-->navigate your page when interacting only through the keyboard<!--]--></li><li><!--[-->let users navigate directly to the main page content.<!--]--></li><!--]--></ul><p><!--[-->Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page).<!--]--></p><p><!--[-->Until the user activates it through a keyboard press, a skip link won’t display.<!--]--></p><p><!--[-->When visible, it's always the first item on a page and pushes down all page content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-layout-skip-links--stand-alone&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-layout-skip-links--stand-alone&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->It must be on every page.<!--]--></li><li><!--[-->When visible, it must be the first element on the page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Only use at the top of the page.<!--]--></li><li><!--[-->Don't edit the styling.<!--]--></li><li><!--[-->Don't overlay page content. It must push down the page content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-layout-skip-links--stand-alone&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-layout-skip-links--stand-alone&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/skip-link.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/skip-link/_payload.json">[{"state":1,"_errors":481,"serverRendered":484,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":171,"$sdd-globals":185,"$sdd-navigation":186},{"/design-system/components/skip-link":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":166,"_id":167,"_source":168,"_file":169,"_extension":170},"/design-system/components/skip-link","components",false,"","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","page","Core",{"type":14,"children":15,"toc":157},"root",[16,25,31,51,56,61,66,71,78,91,97,115,119,125,130,137],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use skip links to let users:",{"type":17,"tag":32,"props":33,"children":34},"ul",{},[35,41,46],{"type":17,"tag":36,"props":37,"children":38},"li",{},[39],{"type":23,"value":40},"navigate quickly through links and form elements",{"type":17,"tag":36,"props":42,"children":43},{},[44],{"type":23,"value":45},"navigate your page when interacting only through the keyboard",{"type":17,"tag":36,"props":47,"children":48},{},[49],{"type":23,"value":50},"let users navigate directly to the main page content.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page).",{"type":17,"tag":26,"props":57,"children":58},{},[59],{"type":23,"value":60},"Until the user activates it through a keyboard press, a skip link won’t display.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"When visible, it's always the first item on a page and pushes down all page content.",{"type":17,"tag":67,"props":68,"children":70},"docs-example",{"id":69},"core-layout-skip-links--stand-alone",[],{"type":17,"tag":72,"props":73,"children":75},"h3",{"id":74},"when-and-how-to-use",[76],{"type":23,"value":77},"When and how to use",{"type":17,"tag":32,"props":79,"children":80},{},[81,86],{"type":17,"tag":36,"props":82,"children":83},{},[84],{"type":23,"value":85},"It must be on every page.",{"type":17,"tag":36,"props":87,"children":88},{},[89],{"type":23,"value":90},"When visible, it must be the first element on the page.",{"type":17,"tag":72,"props":92,"children":94},{"id":93},"when-and-how-not-to-use",[95],{"type":23,"value":96},"When and how not to use",{"type":17,"tag":32,"props":98,"children":99},{},[100,105,110],{"type":17,"tag":36,"props":101,"children":102},{},[103],{"type":23,"value":104},"Only use at the top of the page.",{"type":17,"tag":36,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't edit the styling.",{"type":17,"tag":36,"props":111,"children":112},{},[113],{"type":23,"value":114},"Don't overlay page content. It must push down the page content.",{"type":17,"tag":116,"props":117,"children":118},"hr",{},[],{"type":17,"tag":18,"props":120,"children":122},{"id":121},"theming",[123],{"type":23,"value":124},"Theming",{"type":17,"tag":26,"props":126,"children":127},{},[128],{"type":23,"value":129},"The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users.",{"type":17,"tag":131,"props":132,"children":133},"docs-theme-chooser",{},[134],{"type":17,"tag":67,"props":135,"children":136},{"id":69},[],{"type":17,"tag":26,"props":138,"children":139},{},[140,142,148,150,155],{"type":23,"value":141},"To create your own theme, see ",{"type":17,"tag":143,"props":144,"children":145},"a",{"href":8},[146],{"type":23,"value":147},"theming guidance for designers",{"type":23,"value":149}," or ",{"type":17,"tag":143,"props":151,"children":152},{"href":8},[153],{"type":23,"value":154},"theming guidance for developers",{"type":23,"value":156},".",{"title":8,"searchDepth":158,"depth":158,"links":159},2,[160,165],{"id":20,"depth":158,"text":24,"children":161},[162,164],{"id":74,"depth":163,"text":77},3,{"id":93,"depth":163,"text":96},{"id":121,"depth":158,"text":124},"markdown","content:design-system:5.components:skip-link.md","content","design-system/5.components/skip-link.md","md",{"/design-system/components/skip-link":172},[173,179],{"_path":174,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":175,"description":176,"layout":11,"label":12,"_type":166,"_id":177,"_source":168,"_file":178,"_extension":170},"/design-system/components/search-bar","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","content:design-system:5.components:search-bar.md","design-system/5.components/search-bar.md",{"_path":180,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":181,"description":182,"layout":11,"label":12,"_type":166,"_id":183,"_source":168,"_file":184,"_extension":170},"/design-system/components/social-share","Social share","The Social share component shows a list of links to help users to share pages to social media.","content:design-system:5.components:social-share.md","design-system/5.components/social-share.md",{},[187,192,433],{"title":188,"_path":189,"icon":190,"layout":191},"Ripple Design System","/","carbon:home","home",{"title":193,"_path":194,"children":195},"Design System","/design-system",[196,212,228,257,291],{"title":197,"_path":198,"children":199},"About","/design-system/about",[200,203,206,209],{"title":201,"_path":202,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":204,"_path":205,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":207,"_path":208,"layout":11},"Support","/design-system/about/getting-support",{"title":210,"_path":211,"layout":11},"Contributing","/design-system/about/contributing",{"title":213,"_path":214,"children":215},"Design","/design-system/design",[216,219,222,225],{"title":217,"_path":218,"layout":11},"Getting started","/design-system/design/getting-started",{"title":220,"_path":221,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":223,"_path":224,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":226,"_path":227,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":229,"_path":230,"children":231},"Develop","/design-system/develop",[232,234,236,239],{"title":217,"_path":233,"layout":11},"/design-system/develop/getting-started",{"title":210,"_path":235,"layout":11},"/design-system/develop/contributing",{"title":237,"_path":238,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":240,"children":241,"layout":11},"/design-system/develop/usage",[242,245,248,251,254],{"title":243,"_path":244,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":246,"_path":247,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":249,"_path":250,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":252,"_path":253,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":255,"_path":256,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":258,"_path":259,"children":260},"Styles","/design-system/styles",[261,264,267,270,273,276,279,282,285,288],{"title":262,"_path":263,"layout":11},"Colour","/design-system/styles/colour",{"title":265,"_path":266,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":268,"_path":269,"layout":11},"Grid","/design-system/styles/grid",{"title":271,"_path":272,"layout":11},"Icons","/design-system/styles/icons",{"title":274,"_path":275,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":277,"_path":278,"layout":11},"Layout","/design-system/styles/layout",{"title":280,"_path":281,"layout":11},"Logo","/design-system/styles/logo",{"title":283,"_path":284,"layout":11},"Motion","/design-system/styles/motion",{"title":286,"_path":287,"layout":11},"Spacing","/design-system/styles/spacing",{"title":289,"_path":290,"layout":11},"Typography","/design-system/styles/typography",{"title":292,"_path":293,"children":294},"Components","/design-system/components",[295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,410,411,412,415,418,421,424,427,430],{"title":296,"_path":297,"layout":11},"Accordion","/design-system/components/accordion",{"title":299,"_path":300,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":302,"_path":303,"layout":11},"Alert","/design-system/components/alert",{"title":305,"_path":306,"layout":11},"Block quote","/design-system/components/block-quote",{"title":308,"_path":309,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":311,"_path":312,"layout":11},"Button","/design-system/components/button",{"title":314,"_path":315,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":317,"_path":318,"layout":11},"Callout","/design-system/components/callout",{"title":320,"_path":321,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":323,"_path":324,"layout":11},"Card","/design-system/components/card",{"title":326,"_path":327,"layout":11},"Carousel","/design-system/components/carousel",{"title":329,"_path":330,"layout":11},"Category grid","/design-system/components/category-grid",{"title":332,"_path":333,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":335,"_path":336,"layout":11},"Chip","/design-system/components/chip",{"title":338,"_path":339,"layout":11},"Contact us","/design-system/components/contact-us",{"title":341,"_path":342,"layout":11},"Date input","/design-system/components/date-input",{"title":344,"_path":345,"layout":11},"Detail list","/design-system/components/detail-list",{"title":347,"_path":348,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":350,"_path":351,"layout":11},"File","/design-system/components/file",{"title":353,"_path":354,"layout":11},"Footer","/design-system/components/footer",{"title":356,"_path":357,"layout":11},"Form alert","/design-system/components/form-alert",{"title":359,"_path":360,"layout":11},"Form","/design-system/components/form",{"title":362,"_path":363,"layout":11},"Header","/design-system/components/header",{"title":365,"_path":366,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":368,"_path":369,"layout":11},"Input field","/design-system/components/input-field",{"title":371,"_path":372,"layout":11},"Key dates","/design-system/components/key-dates",{"title":374,"_path":375,"layout":11},"Media embed","/design-system/components/media-embed",{"title":377,"_path":378,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":380,"_path":381,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":383,"_path":384,"layout":11},"Media","/design-system/components/media",{"title":386,"_path":387,"layout":11},"Option button","/design-system/components/option-button",{"title":389,"_path":390,"layout":11},"Page action","/design-system/components/page-action",{"title":392,"_path":393,"layout":11},"Pagination","/design-system/components/pagination",{"title":395,"_path":396,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":398,"_path":399,"layout":11},"Profile","/design-system/components/profile",{"title":401,"_path":402,"layout":11},"Radio button","/design-system/components/radio-button",{"title":404,"_path":405,"layout":11},"Related links","/design-system/components/related-links",{"title":407,"_path":408,"layout":11},"Results listing","/design-system/components/results-listing",{"title":175,"_path":174,"layout":11},{"title":9,"_path":5,"layout":11},{"title":181,"_path":180,"layout":11},{"title":413,"_path":414,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":416,"_path":417,"layout":11},"Table","/design-system/components/table",{"title":419,"_path":420,"layout":11},"Tabs","/design-system/components/tabs",{"title":422,"_path":423,"layout":11},"Tag","/design-system/components/tag",{"title":425,"_path":426,"layout":11},"Text area","/design-system/components/text-area",{"title":428,"_path":429,"layout":11},"Timeline","/design-system/components/timeline",{"title":431,"_path":432,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":434,"_path":435,"children":436,"layout":11},"Ripple Framework","/framework",[437,438,456,478],{"title":434,"_path":435,"layout":11},{"title":439,"_path":440,"children":441},"Key Concepts","/framework/key-concepts",[442,444,447,450,453],{"title":249,"_path":443,"layout":11},"/framework/key-concepts/nuxt",{"title":445,"_path":446,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":448,"_path":449,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":451,"_path":452,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":454,"_path":455,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":457,"_path":458,"children":459},"Guides","/framework/guides",[460,463,466,469,472,475],{"title":461,"_path":462,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":464,"_path":465,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":467,"_path":468,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":470,"_path":471,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":473,"_path":474,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":476,"_path":477,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":479,"_path":480,"layout":11},"Core modules","/framework/core-modules",["Reactive",482],{"module-navigation":483},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/social-share/index.html b/design-system/components/social-share/index.html index 827e5734f0..c86daaab5d 100644 --- a/design-system/components/social-share/index.html +++ b/design-system/components/social-share/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Social share</h1><p class="rpl-type-p-large" data-v-3163c6df>The Social share component shows a list of links to help users to share pages to social media.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use social share to let users share pages to their own social media channels.<!--]--></p><p><!--[-->It uses the social media icons to:<!--]--></p><ul><!--[--><li><!--[-->provide extra context<!--]--></li><li><!--[-->distinguish between the different social media channels.<!--]--></li><!--]--></ul><p><!--[-->The link labels should clearly indicate the platform the user is sharing the page to.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-social-share--social-share&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-social-share--social-share&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use it to enable users to share pages to social media.<!--]--></li><li><!--[-->Place in sidebar section of pages.<!--]--></li><li><!--[-->Link labels should be the social media platform name.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use for links to sites that aren't social media channels.<!--]--></li><li><!--[-->Avoid placing in a page's body section.<!--]--></li><li><!--[-->Don't use with labels that aren't social media platform names.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Social share uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating an action to users<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-social-share--social-share&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-social-share--social-share&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/social-share.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/social-share/_payload.json">[{"state":1,"_errors":489,"serverRendered":492,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":181,"$sdd-globals":195,"$sdd-navigation":196},{"/design-system/components/social-share":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":176,"_id":177,"_source":178,"_file":179,"_extension":180},"/design-system/components/social-share","components",false,"","Social share","The Social share component shows a list of links to help users to share pages to social media.","page","Core",{"type":14,"children":15,"toc":167},"root",[16,25,31,36,51,56,61,68,86,92,110,114,120,125,138,145],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use social share to let users share pages to their own social media channels.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"It uses the social media icons to:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"provide extra context",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"distinguish between the different social media channels.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"The link labels should clearly indicate the platform the user is sharing the page to.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-navigation-social-share--social-share",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Use it to enable users to share pages to social media.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Place in sidebar section of pages.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Link labels should be the social media platform name.",{"type":17,"tag":62,"props":87,"children":89},{"id":88},"when-and-how-not-to-use",[90],{"type":23,"value":91},"When and how not to use",{"type":17,"tag":37,"props":93,"children":94},{},[95,100,105],{"type":17,"tag":41,"props":96,"children":97},{},[98],{"type":23,"value":99},"Don't use for links to sites that aren't social media channels.",{"type":17,"tag":41,"props":101,"children":102},{},[103],{"type":23,"value":104},"Avoid placing in a page's body section.",{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't use with labels that aren't social media platform names.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"theming",[118],{"type":23,"value":119},"Theming",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"Social share uses colour for:",{"type":17,"tag":37,"props":126,"children":127},{},[128,133],{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"indicating an action to users",{"type":17,"tag":41,"props":134,"children":135},{},[136],{"type":23,"value":137},"icons.",{"type":17,"tag":139,"props":140,"children":141},"docs-theme-chooser",{},[142],{"type":17,"tag":57,"props":143,"children":144},{"id":59},[],{"type":17,"tag":26,"props":146,"children":147},{},[148,150,157,159,165],{"type":23,"value":149},"To create your own theme see ",{"type":17,"tag":151,"props":152,"children":154},"a",{"href":153},"/design-system/design/theming-guidance-for-designers",[155],{"type":23,"value":156},"theming guidance for designers",{"type":23,"value":158}," or ",{"type":17,"tag":151,"props":160,"children":162},{"href":161},"/design-system/develop/theming",[163],{"type":23,"value":164},"theming guidance for developers",{"type":23,"value":166},".",{"title":8,"searchDepth":168,"depth":168,"links":169},2,[170,175],{"id":20,"depth":168,"text":24,"children":171},[172,174],{"id":64,"depth":173,"text":67},3,{"id":88,"depth":173,"text":91},{"id":116,"depth":168,"text":119},"markdown","content:design-system:5.components:social-share.md","content","design-system/5.components/social-share.md","md",{"/design-system/components/social-share":182},[183,189],{"_path":184,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":185,"description":186,"layout":11,"label":12,"_type":176,"_id":187,"_source":178,"_file":188,"_extension":180},"/design-system/components/skip-link","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","content:design-system:5.components:skip-link.md","design-system/5.components/skip-link.md",{"_path":190,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":191,"description":192,"layout":11,"label":12,"_type":176,"_id":193,"_source":178,"_file":194,"_extension":180},"/design-system/components/statistics-grid","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","content:design-system:5.components:statistics-grid.md","design-system/5.components/statistics-grid.md",{},[197,202,441],{"title":198,"_path":199,"icon":200,"layout":201},"Ripple Design System","/","carbon:home","home",{"title":203,"_path":204,"children":205},"Design System","/design-system",[206,222,237,265,299],{"title":207,"_path":208,"children":209},"About","/design-system/about",[210,213,216,219],{"title":211,"_path":212,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":214,"_path":215,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":217,"_path":218,"layout":11},"Support","/design-system/about/getting-support",{"title":220,"_path":221,"layout":11},"Contributing","/design-system/about/contributing",{"title":223,"_path":224,"children":225},"Design","/design-system/design",[226,229,232,235],{"title":227,"_path":228,"layout":11},"Getting started","/design-system/design/getting-started",{"title":230,"_path":231,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":233,"_path":234,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":236,"_path":153,"layout":11},"Theming guidance for designers",{"title":238,"_path":239,"children":240},"Develop","/design-system/develop",[241,243,245,247],{"title":227,"_path":242,"layout":11},"/design-system/develop/getting-started",{"title":220,"_path":244,"layout":11},"/design-system/develop/contributing",{"title":246,"_path":161,"layout":11},"Theme and brand application",{"title":24,"_path":248,"children":249,"layout":11},"/design-system/develop/usage",[250,253,256,259,262],{"title":251,"_path":252,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":254,"_path":255,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":257,"_path":258,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":260,"_path":261,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":263,"_path":264,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":266,"_path":267,"children":268},"Styles","/design-system/styles",[269,272,275,278,281,284,287,290,293,296],{"title":270,"_path":271,"layout":11},"Colour","/design-system/styles/colour",{"title":273,"_path":274,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":276,"_path":277,"layout":11},"Grid","/design-system/styles/grid",{"title":279,"_path":280,"layout":11},"Icons","/design-system/styles/icons",{"title":282,"_path":283,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":285,"_path":286,"layout":11},"Layout","/design-system/styles/layout",{"title":288,"_path":289,"layout":11},"Logo","/design-system/styles/logo",{"title":291,"_path":292,"layout":11},"Motion","/design-system/styles/motion",{"title":294,"_path":295,"layout":11},"Spacing","/design-system/styles/spacing",{"title":297,"_path":298,"layout":11},"Typography","/design-system/styles/typography",{"title":300,"_path":301,"children":302},"Components","/design-system/components",[303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,421,422,423,426,429,432,435,438],{"title":304,"_path":305,"layout":11},"Accordion","/design-system/components/accordion",{"title":307,"_path":308,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":310,"_path":311,"layout":11},"Alert","/design-system/components/alert",{"title":313,"_path":314,"layout":11},"Block quote","/design-system/components/block-quote",{"title":316,"_path":317,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":319,"_path":320,"layout":11},"Button","/design-system/components/button",{"title":322,"_path":323,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":325,"_path":326,"layout":11},"Callout","/design-system/components/callout",{"title":328,"_path":329,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":331,"_path":332,"layout":11},"Card","/design-system/components/card",{"title":334,"_path":335,"layout":11},"Carousel","/design-system/components/carousel",{"title":337,"_path":338,"layout":11},"Category grid","/design-system/components/category-grid",{"title":340,"_path":341,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":343,"_path":344,"layout":11},"Chip","/design-system/components/chip",{"title":346,"_path":347,"layout":11},"Contact us","/design-system/components/contact-us",{"title":349,"_path":350,"layout":11},"Date input","/design-system/components/date-input",{"title":352,"_path":353,"layout":11},"Detail list","/design-system/components/detail-list",{"title":355,"_path":356,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":358,"_path":359,"layout":11},"File","/design-system/components/file",{"title":361,"_path":362,"layout":11},"Footer","/design-system/components/footer",{"title":364,"_path":365,"layout":11},"Form alert","/design-system/components/form-alert",{"title":367,"_path":368,"layout":11},"Form","/design-system/components/form",{"title":370,"_path":371,"layout":11},"Header","/design-system/components/header",{"title":373,"_path":374,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":376,"_path":377,"layout":11},"Input field","/design-system/components/input-field",{"title":379,"_path":380,"layout":11},"Key dates","/design-system/components/key-dates",{"title":382,"_path":383,"layout":11},"Media embed","/design-system/components/media-embed",{"title":385,"_path":386,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":388,"_path":389,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":391,"_path":392,"layout":11},"Media","/design-system/components/media",{"title":394,"_path":395,"layout":11},"Option button","/design-system/components/option-button",{"title":397,"_path":398,"layout":11},"Page action","/design-system/components/page-action",{"title":400,"_path":401,"layout":11},"Pagination","/design-system/components/pagination",{"title":403,"_path":404,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":406,"_path":407,"layout":11},"Profile","/design-system/components/profile",{"title":409,"_path":410,"layout":11},"Radio button","/design-system/components/radio-button",{"title":412,"_path":413,"layout":11},"Related links","/design-system/components/related-links",{"title":415,"_path":416,"layout":11},"Results listing","/design-system/components/results-listing",{"title":418,"_path":419,"layout":11},"Search bar","/design-system/components/search-bar",{"title":185,"_path":184,"layout":11},{"title":9,"_path":5,"layout":11},{"title":191,"_path":190,"layout":11},{"title":424,"_path":425,"layout":11},"Table","/design-system/components/table",{"title":427,"_path":428,"layout":11},"Tabs","/design-system/components/tabs",{"title":430,"_path":431,"layout":11},"Tag","/design-system/components/tag",{"title":433,"_path":434,"layout":11},"Text area","/design-system/components/text-area",{"title":436,"_path":437,"layout":11},"Timeline","/design-system/components/timeline",{"title":439,"_path":440,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":442,"_path":443,"children":444,"layout":11},"Ripple Framework","/framework",[445,446,464,486],{"title":442,"_path":443,"layout":11},{"title":447,"_path":448,"children":449},"Key Concepts","/framework/key-concepts",[450,452,455,458,461],{"title":257,"_path":451,"layout":11},"/framework/key-concepts/nuxt",{"title":453,"_path":454,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":456,"_path":457,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":459,"_path":460,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":462,"_path":463,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,480,483],{"title":469,"_path":470,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":479,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":481,"_path":482,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":484,"_path":485,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":487,"_path":488,"layout":11},"Core modules","/framework/core-modules",["Reactive",490],{"module-navigation":491},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Social share</h1><p class="rpl-type-p-large" data-v-3163c6df>The Social share component shows a list of links to help users to share pages to social media.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use social share to let users share pages to their own social media channels.<!--]--></p><p><!--[-->It uses the social media icons to:<!--]--></p><ul><!--[--><li><!--[-->provide extra context<!--]--></li><li><!--[-->distinguish between the different social media channels.<!--]--></li><!--]--></ul><p><!--[-->The link labels should clearly indicate the platform the user is sharing the page to.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-social-share--social-share&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-social-share--social-share&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use it to enable users to share pages to social media.<!--]--></li><li><!--[-->Place in sidebar section of pages.<!--]--></li><li><!--[-->Link labels should be the social media platform name.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use for links to sites that aren't social media channels.<!--]--></li><li><!--[-->Avoid placing in a page's body section.<!--]--></li><li><!--[-->Don't use with labels that aren't social media platform names.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Social share uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating an action to users<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-social-share--social-share&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-social-share--social-share&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/social-share.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/social-share/_payload.json">[{"state":1,"_errors":489,"serverRendered":492,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":181,"$sdd-globals":195,"$sdd-navigation":196},{"/design-system/components/social-share":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":176,"_id":177,"_source":178,"_file":179,"_extension":180},"/design-system/components/social-share","components",false,"","Social share","The Social share component shows a list of links to help users to share pages to social media.","page","Core",{"type":14,"children":15,"toc":167},"root",[16,25,31,36,51,56,61,68,86,92,110,114,120,125,138,145],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use social share to let users share pages to their own social media channels.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"It uses the social media icons to:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"provide extra context",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"distinguish between the different social media channels.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"The link labels should clearly indicate the platform the user is sharing the page to.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-navigation-social-share--social-share",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Use it to enable users to share pages to social media.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Place in sidebar section of pages.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"Link labels should be the social media platform name.",{"type":17,"tag":62,"props":87,"children":89},{"id":88},"when-and-how-not-to-use",[90],{"type":23,"value":91},"When and how not to use",{"type":17,"tag":37,"props":93,"children":94},{},[95,100,105],{"type":17,"tag":41,"props":96,"children":97},{},[98],{"type":23,"value":99},"Don't use for links to sites that aren't social media channels.",{"type":17,"tag":41,"props":101,"children":102},{},[103],{"type":23,"value":104},"Avoid placing in a page's body section.",{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't use with labels that aren't social media platform names.",{"type":17,"tag":111,"props":112,"children":113},"hr",{},[],{"type":17,"tag":18,"props":115,"children":117},{"id":116},"theming",[118],{"type":23,"value":119},"Theming",{"type":17,"tag":26,"props":121,"children":122},{},[123],{"type":23,"value":124},"Social share uses colour for:",{"type":17,"tag":37,"props":126,"children":127},{},[128,133],{"type":17,"tag":41,"props":129,"children":130},{},[131],{"type":23,"value":132},"indicating an action to users",{"type":17,"tag":41,"props":134,"children":135},{},[136],{"type":23,"value":137},"icons.",{"type":17,"tag":139,"props":140,"children":141},"docs-theme-chooser",{},[142],{"type":17,"tag":57,"props":143,"children":144},{"id":59},[],{"type":17,"tag":26,"props":146,"children":147},{},[148,150,157,159,165],{"type":23,"value":149},"To create your own theme see ",{"type":17,"tag":151,"props":152,"children":154},"a",{"href":153},"/design-system/design/theming-guidance-for-designers",[155],{"type":23,"value":156},"theming guidance for designers",{"type":23,"value":158}," or ",{"type":17,"tag":151,"props":160,"children":162},{"href":161},"/design-system/develop/theming",[163],{"type":23,"value":164},"theming guidance for developers",{"type":23,"value":166},".",{"title":8,"searchDepth":168,"depth":168,"links":169},2,[170,175],{"id":20,"depth":168,"text":24,"children":171},[172,174],{"id":64,"depth":173,"text":67},3,{"id":88,"depth":173,"text":91},{"id":116,"depth":168,"text":119},"markdown","content:design-system:5.components:social-share.md","content","design-system/5.components/social-share.md","md",{"/design-system/components/social-share":182},[183,189],{"_path":184,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":185,"description":186,"layout":11,"label":12,"_type":176,"_id":187,"_source":178,"_file":188,"_extension":180},"/design-system/components/skip-link","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","content:design-system:5.components:skip-link.md","design-system/5.components/skip-link.md",{"_path":190,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":191,"description":192,"layout":11,"label":12,"_type":176,"_id":193,"_source":178,"_file":194,"_extension":180},"/design-system/components/statistics-grid","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","content:design-system:5.components:statistics-grid.md","design-system/5.components/statistics-grid.md",{},[197,202,441],{"title":198,"_path":199,"icon":200,"layout":201},"Ripple Design System","/","carbon:home","home",{"title":203,"_path":204,"children":205},"Design System","/design-system",[206,222,237,265,299],{"title":207,"_path":208,"children":209},"About","/design-system/about",[210,213,216,219],{"title":211,"_path":212,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":214,"_path":215,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":217,"_path":218,"layout":11},"Support","/design-system/about/getting-support",{"title":220,"_path":221,"layout":11},"Contributing","/design-system/about/contributing",{"title":223,"_path":224,"children":225},"Design","/design-system/design",[226,229,232,235],{"title":227,"_path":228,"layout":11},"Getting started","/design-system/design/getting-started",{"title":230,"_path":231,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":233,"_path":234,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":236,"_path":153,"layout":11},"Theming guidance for designers",{"title":238,"_path":239,"children":240},"Develop","/design-system/develop",[241,243,245,247],{"title":227,"_path":242,"layout":11},"/design-system/develop/getting-started",{"title":220,"_path":244,"layout":11},"/design-system/develop/contributing",{"title":246,"_path":161,"layout":11},"Theme and brand application",{"title":24,"_path":248,"children":249,"layout":11},"/design-system/develop/usage",[250,253,256,259,262],{"title":251,"_path":252,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":254,"_path":255,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":257,"_path":258,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":260,"_path":261,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":263,"_path":264,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":266,"_path":267,"children":268},"Styles","/design-system/styles",[269,272,275,278,281,284,287,290,293,296],{"title":270,"_path":271,"layout":11},"Colour","/design-system/styles/colour",{"title":273,"_path":274,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":276,"_path":277,"layout":11},"Grid","/design-system/styles/grid",{"title":279,"_path":280,"layout":11},"Icons","/design-system/styles/icons",{"title":282,"_path":283,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":285,"_path":286,"layout":11},"Layout","/design-system/styles/layout",{"title":288,"_path":289,"layout":11},"Logo","/design-system/styles/logo",{"title":291,"_path":292,"layout":11},"Motion","/design-system/styles/motion",{"title":294,"_path":295,"layout":11},"Spacing","/design-system/styles/spacing",{"title":297,"_path":298,"layout":11},"Typography","/design-system/styles/typography",{"title":300,"_path":301,"children":302},"Components","/design-system/components",[303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,421,422,423,426,429,432,435,438],{"title":304,"_path":305,"layout":11},"Accordion","/design-system/components/accordion",{"title":307,"_path":308,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":310,"_path":311,"layout":11},"Alert","/design-system/components/alert",{"title":313,"_path":314,"layout":11},"Block quote","/design-system/components/block-quote",{"title":316,"_path":317,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":319,"_path":320,"layout":11},"Button","/design-system/components/button",{"title":322,"_path":323,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":325,"_path":326,"layout":11},"Callout","/design-system/components/callout",{"title":328,"_path":329,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":331,"_path":332,"layout":11},"Card","/design-system/components/card",{"title":334,"_path":335,"layout":11},"Carousel","/design-system/components/carousel",{"title":337,"_path":338,"layout":11},"Category grid","/design-system/components/category-grid",{"title":340,"_path":341,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":343,"_path":344,"layout":11},"Chip","/design-system/components/chip",{"title":346,"_path":347,"layout":11},"Contact us","/design-system/components/contact-us",{"title":349,"_path":350,"layout":11},"Date input","/design-system/components/date-input",{"title":352,"_path":353,"layout":11},"Detail list","/design-system/components/detail-list",{"title":355,"_path":356,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":358,"_path":359,"layout":11},"File","/design-system/components/file",{"title":361,"_path":362,"layout":11},"Footer","/design-system/components/footer",{"title":364,"_path":365,"layout":11},"Form alert","/design-system/components/form-alert",{"title":367,"_path":368,"layout":11},"Form","/design-system/components/form",{"title":370,"_path":371,"layout":11},"Header","/design-system/components/header",{"title":373,"_path":374,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":376,"_path":377,"layout":11},"Input field","/design-system/components/input-field",{"title":379,"_path":380,"layout":11},"Key dates","/design-system/components/key-dates",{"title":382,"_path":383,"layout":11},"Media embed","/design-system/components/media-embed",{"title":385,"_path":386,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":388,"_path":389,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":391,"_path":392,"layout":11},"Media","/design-system/components/media",{"title":394,"_path":395,"layout":11},"Option button","/design-system/components/option-button",{"title":397,"_path":398,"layout":11},"Page action","/design-system/components/page-action",{"title":400,"_path":401,"layout":11},"Pagination","/design-system/components/pagination",{"title":403,"_path":404,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":406,"_path":407,"layout":11},"Profile","/design-system/components/profile",{"title":409,"_path":410,"layout":11},"Radio button","/design-system/components/radio-button",{"title":412,"_path":413,"layout":11},"Related links","/design-system/components/related-links",{"title":415,"_path":416,"layout":11},"Results listing","/design-system/components/results-listing",{"title":418,"_path":419,"layout":11},"Search bar","/design-system/components/search-bar",{"title":185,"_path":184,"layout":11},{"title":9,"_path":5,"layout":11},{"title":191,"_path":190,"layout":11},{"title":424,"_path":425,"layout":11},"Table","/design-system/components/table",{"title":427,"_path":428,"layout":11},"Tabs","/design-system/components/tabs",{"title":430,"_path":431,"layout":11},"Tag","/design-system/components/tag",{"title":433,"_path":434,"layout":11},"Text area","/design-system/components/text-area",{"title":436,"_path":437,"layout":11},"Timeline","/design-system/components/timeline",{"title":439,"_path":440,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":442,"_path":443,"children":444,"layout":11},"Ripple Framework","/framework",[445,446,464,486],{"title":442,"_path":443,"layout":11},{"title":447,"_path":448,"children":449},"Key Concepts","/framework/key-concepts",[450,452,455,458,461],{"title":257,"_path":451,"layout":11},"/framework/key-concepts/nuxt",{"title":453,"_path":454,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":456,"_path":457,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":459,"_path":460,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":462,"_path":463,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,480,483],{"title":469,"_path":470,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":479,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":481,"_path":482,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":484,"_path":485,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":487,"_path":488,"layout":11},"Core modules","/framework/core-modules",["Reactive",490],{"module-navigation":491},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/statistics-grid/index.html b/design-system/components/statistics-grid/index.html index da3b63a513..1439b53fcc 100644 --- a/design-system/components/statistics-grid/index.html +++ b/design-system/components/statistics-grid/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Statistics grid</h1><p class="rpl-type-p-large" data-v-3163c6df>The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not.<!--]--></p><p><!--[-->Each cell features:<!--]--></p><ul><!--[--><li><!--[-->a key statistic<!--]--></li><li><!--[-->content to give the statistic context.<!--]--></li><!--]--></ul><p><!--[-->A statistics grid can act as a summary to help users view multiple related pieces of content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-light&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-light&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use text or numbers in the content.<!--]--></li><li><!--[-->Give a high-level summary of key information.<!--]--></li><li><!--[-->The grid will always span the full available width.<!--]--></li><li><!--[-->Place in the body section of pages.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use with under 2 or over 8 statistics.<!--]--></li><li><!--[-->Don't overload with content.<!--]--></li><li><!--[-->Don't use when you need a large amount of text for context.<!--]--></li><li><!--[-->Don't use images or graphics.<!--]--></li><li><!--[-->Don't add links.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The statistic grid has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, for white backgrounds<!--]--></li><li><!--[-->reverse, for neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-light&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-light&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-dark&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-dark&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/statistics-grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/statistics-grid/_payload.json">[{"state":1,"_errors":499,"serverRendered":502,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":189,"$sdd-globals":203,"$sdd-navigation":204},{"/design-system/components/statistics-grid":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":184,"_id":185,"_source":186,"_file":187,"_extension":188},"/design-system/components/statistics-grid","components",false,"","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","page","Core",{"type":14,"children":15,"toc":172},"root",[16,25,31,36,51,56,61,68,91,97,125,129,135,140,153,159,162,168],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Each cell features:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"a key statistic",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"content to give the statistic context.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"A statistics grid can act as a summary to help users view multiple related pieces of content.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-containers-stats-grid--on-light",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81,86],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Use text or numbers in the content.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Give a high-level summary of key information.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"The grid will always span the full available width.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Place in the body section of pages.",{"type":17,"tag":62,"props":92,"children":94},{"id":93},"when-and-how-not-to-use",[95],{"type":23,"value":96},"When and how not to use",{"type":17,"tag":37,"props":98,"children":99},{},[100,105,110,115,120],{"type":17,"tag":41,"props":101,"children":102},{},[103],{"type":23,"value":104},"Don't use with under 2 or over 8 statistics.",{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't overload with content.",{"type":17,"tag":41,"props":111,"children":112},{},[113],{"type":23,"value":114},"Don't use when you need a large amount of text for context.",{"type":17,"tag":41,"props":116,"children":117},{},[118],{"type":23,"value":119},"Don't use images or graphics.",{"type":17,"tag":41,"props":121,"children":122},{},[123],{"type":23,"value":124},"Don't add links.",{"type":17,"tag":126,"props":127,"children":128},"hr",{},[],{"type":17,"tag":18,"props":130,"children":132},{"id":131},"variants",[133],{"type":23,"value":134},"Variants",{"type":17,"tag":26,"props":136,"children":137},{},[138],{"type":23,"value":139},"The statistic grid has 2 variants:",{"type":17,"tag":37,"props":141,"children":142},{},[143,148],{"type":17,"tag":41,"props":144,"children":145},{},[146],{"type":23,"value":147},"default, for white backgrounds",{"type":17,"tag":41,"props":149,"children":150},{},[151],{"type":23,"value":152},"reverse, for neutral backgrounds.",{"type":17,"tag":62,"props":154,"children":156},{"id":155},"default",[157],{"type":23,"value":158},"Default",{"type":17,"tag":57,"props":160,"children":161},{"id":59},[],{"type":17,"tag":62,"props":163,"children":165},{"id":164},"reverse",[166],{"type":23,"value":167},"Reverse",{"type":17,"tag":57,"props":169,"children":171},{"id":170},"core-containers-stats-grid--on-dark",[],{"title":8,"searchDepth":173,"depth":173,"links":174},2,[175,180],{"id":20,"depth":173,"text":24,"children":176},[177,179],{"id":64,"depth":178,"text":67},3,{"id":93,"depth":178,"text":96},{"id":131,"depth":173,"text":134,"children":181},[182,183],{"id":155,"depth":178,"text":158},{"id":164,"depth":178,"text":167},"markdown","content:design-system:5.components:statistics-grid.md","content","design-system/5.components/statistics-grid.md","md",{"/design-system/components/statistics-grid":190},[191,197],{"_path":192,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":193,"description":194,"layout":11,"label":12,"_type":184,"_id":195,"_source":186,"_file":196,"_extension":188},"/design-system/components/social-share","Social share","The Social share component shows a list of links to help users to share pages to social media.","content:design-system:5.components:social-share.md","design-system/5.components/social-share.md",{"_path":198,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":199,"description":200,"layout":11,"label":12,"_type":184,"_id":201,"_source":186,"_file":202,"_extension":188},"/design-system/components/table","Table","The Table component makes it easier for users to scan and compare data and content.","content:design-system:5.components:table.md","design-system/5.components/table.md",{},[205,210,451],{"title":206,"_path":207,"icon":208,"layout":209},"Ripple Design System","/","carbon:home","home",{"title":211,"_path":212,"children":213},"Design System","/design-system",[214,230,246,275,309],{"title":215,"_path":216,"children":217},"About","/design-system/about",[218,221,224,227],{"title":219,"_path":220,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":222,"_path":223,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":225,"_path":226,"layout":11},"Support","/design-system/about/getting-support",{"title":228,"_path":229,"layout":11},"Contributing","/design-system/about/contributing",{"title":231,"_path":232,"children":233},"Design","/design-system/design",[234,237,240,243],{"title":235,"_path":236,"layout":11},"Getting started","/design-system/design/getting-started",{"title":238,"_path":239,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":241,"_path":242,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":244,"_path":245,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":247,"_path":248,"children":249},"Develop","/design-system/develop",[250,252,254,257],{"title":235,"_path":251,"layout":11},"/design-system/develop/getting-started",{"title":228,"_path":253,"layout":11},"/design-system/develop/contributing",{"title":255,"_path":256,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":258,"children":259,"layout":11},"/design-system/develop/usage",[260,263,266,269,272],{"title":261,"_path":262,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":264,"_path":265,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":267,"_path":268,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":270,"_path":271,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":273,"_path":274,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":276,"_path":277,"children":278},"Styles","/design-system/styles",[279,282,285,288,291,294,297,300,303,306],{"title":280,"_path":281,"layout":11},"Colour","/design-system/styles/colour",{"title":283,"_path":284,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":286,"_path":287,"layout":11},"Grid","/design-system/styles/grid",{"title":289,"_path":290,"layout":11},"Icons","/design-system/styles/icons",{"title":292,"_path":293,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":295,"_path":296,"layout":11},"Layout","/design-system/styles/layout",{"title":298,"_path":299,"layout":11},"Logo","/design-system/styles/logo",{"title":301,"_path":302,"layout":11},"Motion","/design-system/styles/motion",{"title":304,"_path":305,"layout":11},"Spacing","/design-system/styles/spacing",{"title":307,"_path":308,"layout":11},"Typography","/design-system/styles/typography",{"title":310,"_path":311,"children":312},"Components","/design-system/components",[313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,434,435,436,439,442,445,448],{"title":314,"_path":315,"layout":11},"Accordion","/design-system/components/accordion",{"title":317,"_path":318,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":320,"_path":321,"layout":11},"Alert","/design-system/components/alert",{"title":323,"_path":324,"layout":11},"Block quote","/design-system/components/block-quote",{"title":326,"_path":327,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":329,"_path":330,"layout":11},"Button","/design-system/components/button",{"title":332,"_path":333,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":335,"_path":336,"layout":11},"Callout","/design-system/components/callout",{"title":338,"_path":339,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":341,"_path":342,"layout":11},"Card","/design-system/components/card",{"title":344,"_path":345,"layout":11},"Carousel","/design-system/components/carousel",{"title":347,"_path":348,"layout":11},"Category grid","/design-system/components/category-grid",{"title":350,"_path":351,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":353,"_path":354,"layout":11},"Chip","/design-system/components/chip",{"title":356,"_path":357,"layout":11},"Contact us","/design-system/components/contact-us",{"title":359,"_path":360,"layout":11},"Date input","/design-system/components/date-input",{"title":362,"_path":363,"layout":11},"Detail list","/design-system/components/detail-list",{"title":365,"_path":366,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":368,"_path":369,"layout":11},"File","/design-system/components/file",{"title":371,"_path":372,"layout":11},"Footer","/design-system/components/footer",{"title":374,"_path":375,"layout":11},"Form alert","/design-system/components/form-alert",{"title":377,"_path":378,"layout":11},"Form","/design-system/components/form",{"title":380,"_path":381,"layout":11},"Header","/design-system/components/header",{"title":383,"_path":384,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":386,"_path":387,"layout":11},"Input field","/design-system/components/input-field",{"title":389,"_path":390,"layout":11},"Key dates","/design-system/components/key-dates",{"title":392,"_path":393,"layout":11},"Media embed","/design-system/components/media-embed",{"title":395,"_path":396,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":398,"_path":399,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":401,"_path":402,"layout":11},"Media","/design-system/components/media",{"title":404,"_path":405,"layout":11},"Option button","/design-system/components/option-button",{"title":407,"_path":408,"layout":11},"Page action","/design-system/components/page-action",{"title":410,"_path":411,"layout":11},"Pagination","/design-system/components/pagination",{"title":413,"_path":414,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":416,"_path":417,"layout":11},"Profile","/design-system/components/profile",{"title":419,"_path":420,"layout":11},"Radio button","/design-system/components/radio-button",{"title":422,"_path":423,"layout":11},"Related links","/design-system/components/related-links",{"title":425,"_path":426,"layout":11},"Results listing","/design-system/components/results-listing",{"title":428,"_path":429,"layout":11},"Search bar","/design-system/components/search-bar",{"title":431,"_path":432,"layout":11},"Skip link","/design-system/components/skip-link",{"title":193,"_path":192,"layout":11},{"title":9,"_path":5,"layout":11},{"title":199,"_path":198,"layout":11},{"title":437,"_path":438,"layout":11},"Tabs","/design-system/components/tabs",{"title":440,"_path":441,"layout":11},"Tag","/design-system/components/tag",{"title":443,"_path":444,"layout":11},"Text area","/design-system/components/text-area",{"title":446,"_path":447,"layout":11},"Timeline","/design-system/components/timeline",{"title":449,"_path":450,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":452,"_path":453,"children":454,"layout":11},"Ripple Framework","/framework",[455,456,474,496],{"title":452,"_path":453,"layout":11},{"title":457,"_path":458,"children":459},"Key Concepts","/framework/key-concepts",[460,462,465,468,471],{"title":267,"_path":461,"layout":11},"/framework/key-concepts/nuxt",{"title":463,"_path":464,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":466,"_path":467,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":469,"_path":470,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":472,"_path":473,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":475,"_path":476,"children":477},"Guides","/framework/guides",[478,481,484,487,490,493],{"title":479,"_path":480,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":482,"_path":483,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":485,"_path":486,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":488,"_path":489,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":491,"_path":492,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":494,"_path":495,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":497,"_path":498,"layout":11},"Core modules","/framework/core-modules",["Reactive",500],{"module-navigation":501},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Statistics grid</h1><p class="rpl-type-p-large" data-v-3163c6df>The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not.<!--]--></p><p><!--[-->Each cell features:<!--]--></p><ul><!--[--><li><!--[-->a key statistic<!--]--></li><li><!--[-->content to give the statistic context.<!--]--></li><!--]--></ul><p><!--[-->A statistics grid can act as a summary to help users view multiple related pieces of content.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-light&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-light&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use text or numbers in the content.<!--]--></li><li><!--[-->Give a high-level summary of key information.<!--]--></li><li><!--[-->The grid will always span the full available width.<!--]--></li><li><!--[-->Place in the body section of pages.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use with under 2 or over 8 statistics.<!--]--></li><li><!--[-->Don't overload with content.<!--]--></li><li><!--[-->Don't use when you need a large amount of text for context.<!--]--></li><li><!--[-->Don't use images or graphics.<!--]--></li><li><!--[-->Don't add links.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The statistic grid has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, for white backgrounds<!--]--></li><li><!--[-->reverse, for neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-light&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-light&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-dark&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-dark&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/statistics-grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/statistics-grid/_payload.json">[{"state":1,"_errors":499,"serverRendered":502,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":189,"$sdd-globals":203,"$sdd-navigation":204},{"/design-system/components/statistics-grid":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":184,"_id":185,"_source":186,"_file":187,"_extension":188},"/design-system/components/statistics-grid","components",false,"","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","page","Core",{"type":14,"children":15,"toc":172},"root",[16,25,31,36,51,56,61,68,91,97,125,129,135,140,153,159,162,168],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Each cell features:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"a key statistic",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"content to give the statistic context.",{"type":17,"tag":26,"props":52,"children":53},{},[54],{"type":23,"value":55},"A statistics grid can act as a summary to help users view multiple related pieces of content.",{"type":17,"tag":57,"props":58,"children":60},"docs-example",{"id":59},"core-containers-stats-grid--on-light",[],{"type":17,"tag":62,"props":63,"children":65},"h3",{"id":64},"when-and-how-to-use",[66],{"type":23,"value":67},"When and how to use",{"type":17,"tag":37,"props":69,"children":70},{},[71,76,81,86],{"type":17,"tag":41,"props":72,"children":73},{},[74],{"type":23,"value":75},"Use text or numbers in the content.",{"type":17,"tag":41,"props":77,"children":78},{},[79],{"type":23,"value":80},"Give a high-level summary of key information.",{"type":17,"tag":41,"props":82,"children":83},{},[84],{"type":23,"value":85},"The grid will always span the full available width.",{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Place in the body section of pages.",{"type":17,"tag":62,"props":92,"children":94},{"id":93},"when-and-how-not-to-use",[95],{"type":23,"value":96},"When and how not to use",{"type":17,"tag":37,"props":98,"children":99},{},[100,105,110,115,120],{"type":17,"tag":41,"props":101,"children":102},{},[103],{"type":23,"value":104},"Don't use with under 2 or over 8 statistics.",{"type":17,"tag":41,"props":106,"children":107},{},[108],{"type":23,"value":109},"Don't overload with content.",{"type":17,"tag":41,"props":111,"children":112},{},[113],{"type":23,"value":114},"Don't use when you need a large amount of text for context.",{"type":17,"tag":41,"props":116,"children":117},{},[118],{"type":23,"value":119},"Don't use images or graphics.",{"type":17,"tag":41,"props":121,"children":122},{},[123],{"type":23,"value":124},"Don't add links.",{"type":17,"tag":126,"props":127,"children":128},"hr",{},[],{"type":17,"tag":18,"props":130,"children":132},{"id":131},"variants",[133],{"type":23,"value":134},"Variants",{"type":17,"tag":26,"props":136,"children":137},{},[138],{"type":23,"value":139},"The statistic grid has 2 variants:",{"type":17,"tag":37,"props":141,"children":142},{},[143,148],{"type":17,"tag":41,"props":144,"children":145},{},[146],{"type":23,"value":147},"default, for white backgrounds",{"type":17,"tag":41,"props":149,"children":150},{},[151],{"type":23,"value":152},"reverse, for neutral backgrounds.",{"type":17,"tag":62,"props":154,"children":156},{"id":155},"default",[157],{"type":23,"value":158},"Default",{"type":17,"tag":57,"props":160,"children":161},{"id":59},[],{"type":17,"tag":62,"props":163,"children":165},{"id":164},"reverse",[166],{"type":23,"value":167},"Reverse",{"type":17,"tag":57,"props":169,"children":171},{"id":170},"core-containers-stats-grid--on-dark",[],{"title":8,"searchDepth":173,"depth":173,"links":174},2,[175,180],{"id":20,"depth":173,"text":24,"children":176},[177,179],{"id":64,"depth":178,"text":67},3,{"id":93,"depth":178,"text":96},{"id":131,"depth":173,"text":134,"children":181},[182,183],{"id":155,"depth":178,"text":158},{"id":164,"depth":178,"text":167},"markdown","content:design-system:5.components:statistics-grid.md","content","design-system/5.components/statistics-grid.md","md",{"/design-system/components/statistics-grid":190},[191,197],{"_path":192,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":193,"description":194,"layout":11,"label":12,"_type":184,"_id":195,"_source":186,"_file":196,"_extension":188},"/design-system/components/social-share","Social share","The Social share component shows a list of links to help users to share pages to social media.","content:design-system:5.components:social-share.md","design-system/5.components/social-share.md",{"_path":198,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":199,"description":200,"layout":11,"label":12,"_type":184,"_id":201,"_source":186,"_file":202,"_extension":188},"/design-system/components/table","Table","The Table component makes it easier for users to scan and compare data and content.","content:design-system:5.components:table.md","design-system/5.components/table.md",{},[205,210,451],{"title":206,"_path":207,"icon":208,"layout":209},"Ripple Design System","/","carbon:home","home",{"title":211,"_path":212,"children":213},"Design System","/design-system",[214,230,246,275,309],{"title":215,"_path":216,"children":217},"About","/design-system/about",[218,221,224,227],{"title":219,"_path":220,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":222,"_path":223,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":225,"_path":226,"layout":11},"Support","/design-system/about/getting-support",{"title":228,"_path":229,"layout":11},"Contributing","/design-system/about/contributing",{"title":231,"_path":232,"children":233},"Design","/design-system/design",[234,237,240,243],{"title":235,"_path":236,"layout":11},"Getting started","/design-system/design/getting-started",{"title":238,"_path":239,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":241,"_path":242,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":244,"_path":245,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":247,"_path":248,"children":249},"Develop","/design-system/develop",[250,252,254,257],{"title":235,"_path":251,"layout":11},"/design-system/develop/getting-started",{"title":228,"_path":253,"layout":11},"/design-system/develop/contributing",{"title":255,"_path":256,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":258,"children":259,"layout":11},"/design-system/develop/usage",[260,263,266,269,272],{"title":261,"_path":262,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":264,"_path":265,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":267,"_path":268,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":270,"_path":271,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":273,"_path":274,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":276,"_path":277,"children":278},"Styles","/design-system/styles",[279,282,285,288,291,294,297,300,303,306],{"title":280,"_path":281,"layout":11},"Colour","/design-system/styles/colour",{"title":283,"_path":284,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":286,"_path":287,"layout":11},"Grid","/design-system/styles/grid",{"title":289,"_path":290,"layout":11},"Icons","/design-system/styles/icons",{"title":292,"_path":293,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":295,"_path":296,"layout":11},"Layout","/design-system/styles/layout",{"title":298,"_path":299,"layout":11},"Logo","/design-system/styles/logo",{"title":301,"_path":302,"layout":11},"Motion","/design-system/styles/motion",{"title":304,"_path":305,"layout":11},"Spacing","/design-system/styles/spacing",{"title":307,"_path":308,"layout":11},"Typography","/design-system/styles/typography",{"title":310,"_path":311,"children":312},"Components","/design-system/components",[313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,434,435,436,439,442,445,448],{"title":314,"_path":315,"layout":11},"Accordion","/design-system/components/accordion",{"title":317,"_path":318,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":320,"_path":321,"layout":11},"Alert","/design-system/components/alert",{"title":323,"_path":324,"layout":11},"Block quote","/design-system/components/block-quote",{"title":326,"_path":327,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":329,"_path":330,"layout":11},"Button","/design-system/components/button",{"title":332,"_path":333,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":335,"_path":336,"layout":11},"Callout","/design-system/components/callout",{"title":338,"_path":339,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":341,"_path":342,"layout":11},"Card","/design-system/components/card",{"title":344,"_path":345,"layout":11},"Carousel","/design-system/components/carousel",{"title":347,"_path":348,"layout":11},"Category grid","/design-system/components/category-grid",{"title":350,"_path":351,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":353,"_path":354,"layout":11},"Chip","/design-system/components/chip",{"title":356,"_path":357,"layout":11},"Contact us","/design-system/components/contact-us",{"title":359,"_path":360,"layout":11},"Date input","/design-system/components/date-input",{"title":362,"_path":363,"layout":11},"Detail list","/design-system/components/detail-list",{"title":365,"_path":366,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":368,"_path":369,"layout":11},"File","/design-system/components/file",{"title":371,"_path":372,"layout":11},"Footer","/design-system/components/footer",{"title":374,"_path":375,"layout":11},"Form alert","/design-system/components/form-alert",{"title":377,"_path":378,"layout":11},"Form","/design-system/components/form",{"title":380,"_path":381,"layout":11},"Header","/design-system/components/header",{"title":383,"_path":384,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":386,"_path":387,"layout":11},"Input field","/design-system/components/input-field",{"title":389,"_path":390,"layout":11},"Key dates","/design-system/components/key-dates",{"title":392,"_path":393,"layout":11},"Media embed","/design-system/components/media-embed",{"title":395,"_path":396,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":398,"_path":399,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":401,"_path":402,"layout":11},"Media","/design-system/components/media",{"title":404,"_path":405,"layout":11},"Option button","/design-system/components/option-button",{"title":407,"_path":408,"layout":11},"Page action","/design-system/components/page-action",{"title":410,"_path":411,"layout":11},"Pagination","/design-system/components/pagination",{"title":413,"_path":414,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":416,"_path":417,"layout":11},"Profile","/design-system/components/profile",{"title":419,"_path":420,"layout":11},"Radio button","/design-system/components/radio-button",{"title":422,"_path":423,"layout":11},"Related links","/design-system/components/related-links",{"title":425,"_path":426,"layout":11},"Results listing","/design-system/components/results-listing",{"title":428,"_path":429,"layout":11},"Search bar","/design-system/components/search-bar",{"title":431,"_path":432,"layout":11},"Skip link","/design-system/components/skip-link",{"title":193,"_path":192,"layout":11},{"title":9,"_path":5,"layout":11},{"title":199,"_path":198,"layout":11},{"title":437,"_path":438,"layout":11},"Tabs","/design-system/components/tabs",{"title":440,"_path":441,"layout":11},"Tag","/design-system/components/tag",{"title":443,"_path":444,"layout":11},"Text area","/design-system/components/text-area",{"title":446,"_path":447,"layout":11},"Timeline","/design-system/components/timeline",{"title":449,"_path":450,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":452,"_path":453,"children":454,"layout":11},"Ripple Framework","/framework",[455,456,474,496],{"title":452,"_path":453,"layout":11},{"title":457,"_path":458,"children":459},"Key Concepts","/framework/key-concepts",[460,462,465,468,471],{"title":267,"_path":461,"layout":11},"/framework/key-concepts/nuxt",{"title":463,"_path":464,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":466,"_path":467,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":469,"_path":470,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":472,"_path":473,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":475,"_path":476,"children":477},"Guides","/framework/guides",[478,481,484,487,490,493],{"title":479,"_path":480,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":482,"_path":483,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":485,"_path":486,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":488,"_path":489,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":491,"_path":492,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":494,"_path":495,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":497,"_path":498,"layout":11},"Core modules","/framework/core-modules",["Reactive",500],{"module-navigation":501},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/table/index.html b/design-system/components/table/index.html index a5396a110b..94b5bd83b2 100644 --- a/design-system/components/table/index.html +++ b/design-system/components/table/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Table</h1><p class="rpl-type-p-large" data-v-3163c6df>The Table component makes it easier for users to scan and compare data and content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information.<!--]--></p><p><!--[-->Users tend to read tables one row or column at a time. So, it's important that content is simple and logical.<!--]--></p><p><!--[-->A table can include a combination of:<!--]--></p><ul><!--[--><li><!--[-->row and/or column headings that help users know what the rows and columns represent<!--]--></li><li><!--[-->body rows that display data or content<!--]--></li><li><!--[-->a table caption describing its content and helping users find, navigate and understand its information<!--]--></li><li><!--[-->a table footer that provides additional details, if required<!--]--></li><li><!--[-->an expandable section with expandable rows, which can show extra related or supplementary information or data.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-data-table--structured-content&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--structured-content&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Table content should be left-aligned because we read from left to right. However, tables with financial figures should have columns that contain numerals set to right-aligned.<!--]--></p><p><!--[-->Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data.<!--]--></p><p><!--[-->The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information.<!--]--></p><p><!--[-->Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns.<!--]--></p><p><!--[-->Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically.<!--]--></p><p><!--[-->The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Add a caption or footer, if required.<!--]--></li><li><!--[-->Use for complex content and data sets.<!--]--></li><li><!--[-->Align numbers to the right (except nominal numbers).<!--]--></li><li><!--[-->Align headers according to their column data.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't repeat the same content in both the caption and summary.<!--]--></li><li><!--[-->Don't use with long form content. Cell content should be brief and scannable.<!--]--></li><li><!--[-->Don't use without zebra-stripe styling..<!--]--></li><li><!--[-->Don't centre-align content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Table has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->simple, best used for simple data.<!--]--></li><li><!--[-->complex, best used for complex data.<!--]--></li><!--]--></ul><h3 id="simple"><a href="#simple"><!--[-->Simple<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--table-scrollable&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--table-scrollable&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="complex"><a href="#complex"><!--[-->Complex<!--]--></a></h3><p><!--[-->The complex variant is best used to display complex data sets.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-data-table--structured-content&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--structured-content&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Table data uses colour to indicate an action to the user.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-data-table--custom-content&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--custom-content&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/table.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/table/_payload.json">[{"state":1,"_errors":594,"serverRendered":597,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":286,"$sdd-globals":300,"$sdd-navigation":301},{"/design-system/components/table":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":281,"_id":282,"_source":283,"_file":284,"_extension":285},"/design-system/components/table","components",false,"","Table","The Table component makes it easier for users to scan and compare data and content.","page","Core",{"type":14,"children":15,"toc":267},"root",[16,25,31,36,41,71,76,83,88,93,98,103,108,113,119,142,148,171,175,181,186,199,205,209,215,220,223,226,232,237,245],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Users tend to read tables one row or column at a time. So, it's important that content is simple and logical.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"A table can include a combination of:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51,56,61,66],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"row and/or column headings that help users know what the rows and columns represent",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"body rows that display data or content",{"type":17,"tag":46,"props":57,"children":58},{},[59],{"type":23,"value":60},"a table caption describing its content and helping users find, navigate and understand its information",{"type":17,"tag":46,"props":62,"children":63},{},[64],{"type":23,"value":65},"a table footer that provides additional details, if required",{"type":17,"tag":46,"props":67,"children":68},{},[69],{"type":23,"value":70},"an expandable section with expandable rows, which can show extra related or supplementary information or data.",{"type":17,"tag":72,"props":73,"children":75},"docs-example",{"id":74},"core-containers-data-table--structured-content",[],{"type":17,"tag":77,"props":78,"children":80},"h3",{"id":79},"how-this-component-works",[81],{"type":23,"value":82},"How this component works",{"type":17,"tag":26,"props":84,"children":85},{},[86],{"type":23,"value":87},"Table content should be left-aligned because we read from left to right. However, tables with financial figures should have columns that contain numerals set to right-aligned.",{"type":17,"tag":26,"props":89,"children":90},{},[91],{"type":23,"value":92},"Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data.",{"type":17,"tag":26,"props":94,"children":95},{},[96],{"type":23,"value":97},"The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information.",{"type":17,"tag":26,"props":99,"children":100},{},[101],{"type":23,"value":102},"Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns.",{"type":17,"tag":26,"props":104,"children":105},{},[106],{"type":23,"value":107},"Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically.",{"type":17,"tag":26,"props":109,"children":110},{},[111],{"type":23,"value":112},"The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle.",{"type":17,"tag":77,"props":114,"children":116},{"id":115},"when-and-how-to-use",[117],{"type":23,"value":118},"When and how to use",{"type":17,"tag":42,"props":120,"children":121},{},[122,127,132,137],{"type":17,"tag":46,"props":123,"children":124},{},[125],{"type":23,"value":126},"Add a caption or footer, if required.",{"type":17,"tag":46,"props":128,"children":129},{},[130],{"type":23,"value":131},"Use for complex content and data sets.",{"type":17,"tag":46,"props":133,"children":134},{},[135],{"type":23,"value":136},"Align numbers to the right (except nominal numbers).",{"type":17,"tag":46,"props":138,"children":139},{},[140],{"type":23,"value":141},"Align headers according to their column data.",{"type":17,"tag":77,"props":143,"children":145},{"id":144},"when-and-how-not-to-use",[146],{"type":23,"value":147},"When and how not to use",{"type":17,"tag":42,"props":149,"children":150},{},[151,156,161,166],{"type":17,"tag":46,"props":152,"children":153},{},[154],{"type":23,"value":155},"Don't repeat the same content in both the caption and summary.",{"type":17,"tag":46,"props":157,"children":158},{},[159],{"type":23,"value":160},"Don't use with long form content. Cell content should be brief and scannable.",{"type":17,"tag":46,"props":162,"children":163},{},[164],{"type":23,"value":165},"Don't use without zebra-stripe styling..",{"type":17,"tag":46,"props":167,"children":168},{},[169],{"type":23,"value":170},"Don't centre-align content.",{"type":17,"tag":172,"props":173,"children":174},"hr",{},[],{"type":17,"tag":18,"props":176,"children":178},{"id":177},"variants",[179],{"type":23,"value":180},"Variants",{"type":17,"tag":26,"props":182,"children":183},{},[184],{"type":23,"value":185},"Table has 2 variants:",{"type":17,"tag":42,"props":187,"children":188},{},[189,194],{"type":17,"tag":46,"props":190,"children":191},{},[192],{"type":23,"value":193},"simple, best used for simple data.",{"type":17,"tag":46,"props":195,"children":196},{},[197],{"type":23,"value":198},"complex, best used for complex data.",{"type":17,"tag":77,"props":200,"children":202},{"id":201},"simple",[203],{"type":23,"value":204},"Simple",{"type":17,"tag":72,"props":206,"children":208},{"id":207},"core-containers-content--table-scrollable",[],{"type":17,"tag":77,"props":210,"children":212},{"id":211},"complex",[213],{"type":23,"value":214},"Complex",{"type":17,"tag":26,"props":216,"children":217},{},[218],{"type":23,"value":219},"The complex variant is best used to display complex data sets.",{"type":17,"tag":72,"props":221,"children":222},{"id":74},[],{"type":17,"tag":172,"props":224,"children":225},{},[],{"type":17,"tag":18,"props":227,"children":229},{"id":228},"theming",[230],{"type":23,"value":231},"Theming",{"type":17,"tag":26,"props":233,"children":234},{},[235],{"type":23,"value":236},"Table data uses colour to indicate an action to the user.",{"type":17,"tag":238,"props":239,"children":240},"docs-theme-chooser",{},[241],{"type":17,"tag":72,"props":242,"children":244},{"id":243},"core-containers-data-table--custom-content",[],{"type":17,"tag":26,"props":246,"children":247},{},[248,250,257,259,265],{"type":23,"value":249},"To create your own theme see ",{"type":17,"tag":251,"props":252,"children":254},"a",{"href":253},"/design-system/design/theming-guidance-for-designers",[255],{"type":23,"value":256},"theming guidance for designers",{"type":23,"value":258}," or ",{"type":17,"tag":251,"props":260,"children":262},{"href":261},"/design-system/develop/theming",[263],{"type":23,"value":264},"theming guidance for developers",{"type":23,"value":266},".",{"title":8,"searchDepth":268,"depth":268,"links":269},2,[270,276,280],{"id":20,"depth":268,"text":24,"children":271},[272,274,275],{"id":79,"depth":273,"text":82},3,{"id":115,"depth":273,"text":118},{"id":144,"depth":273,"text":147},{"id":177,"depth":268,"text":180,"children":277},[278,279],{"id":201,"depth":273,"text":204},{"id":211,"depth":273,"text":214},{"id":228,"depth":268,"text":231},"markdown","content:design-system:5.components:table.md","content","design-system/5.components/table.md","md",{"/design-system/components/table":287},[288,294],{"_path":289,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":290,"description":291,"layout":11,"label":12,"_type":281,"_id":292,"_source":283,"_file":293,"_extension":285},"/design-system/components/statistics-grid","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","content:design-system:5.components:statistics-grid.md","design-system/5.components/statistics-grid.md",{"_path":295,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":296,"description":297,"layout":11,"label":12,"_type":281,"_id":298,"_source":283,"_file":299,"_extension":285},"/design-system/components/tabs","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","content:design-system:5.components:tabs.md","design-system/5.components/tabs.md",{},[302,307,546],{"title":303,"_path":304,"icon":305,"layout":306},"Ripple Design System","/","carbon:home","home",{"title":308,"_path":309,"children":310},"Design System","/design-system",[311,327,342,370,404],{"title":312,"_path":313,"children":314},"About","/design-system/about",[315,318,321,324],{"title":316,"_path":317,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":319,"_path":320,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":322,"_path":323,"layout":11},"Support","/design-system/about/getting-support",{"title":325,"_path":326,"layout":11},"Contributing","/design-system/about/contributing",{"title":328,"_path":329,"children":330},"Design","/design-system/design",[331,334,337,340],{"title":332,"_path":333,"layout":11},"Getting started","/design-system/design/getting-started",{"title":335,"_path":336,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":338,"_path":339,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":341,"_path":253,"layout":11},"Theming guidance for designers",{"title":343,"_path":344,"children":345},"Develop","/design-system/develop",[346,348,350,352],{"title":332,"_path":347,"layout":11},"/design-system/develop/getting-started",{"title":325,"_path":349,"layout":11},"/design-system/develop/contributing",{"title":351,"_path":261,"layout":11},"Theme and brand application",{"title":24,"_path":353,"children":354,"layout":11},"/design-system/develop/usage",[355,358,361,364,367],{"title":356,"_path":357,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":359,"_path":360,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":362,"_path":363,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":365,"_path":366,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":368,"_path":369,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":371,"_path":372,"children":373},"Styles","/design-system/styles",[374,377,380,383,386,389,392,395,398,401],{"title":375,"_path":376,"layout":11},"Colour","/design-system/styles/colour",{"title":378,"_path":379,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":381,"_path":382,"layout":11},"Grid","/design-system/styles/grid",{"title":384,"_path":385,"layout":11},"Icons","/design-system/styles/icons",{"title":387,"_path":388,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":390,"_path":391,"layout":11},"Layout","/design-system/styles/layout",{"title":393,"_path":394,"layout":11},"Logo","/design-system/styles/logo",{"title":396,"_path":397,"layout":11},"Motion","/design-system/styles/motion",{"title":399,"_path":400,"layout":11},"Spacing","/design-system/styles/spacing",{"title":402,"_path":403,"layout":11},"Typography","/design-system/styles/typography",{"title":405,"_path":406,"children":407},"Components","/design-system/components",[408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,532,533,534,537,540,543],{"title":409,"_path":410,"layout":11},"Accordion","/design-system/components/accordion",{"title":412,"_path":413,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":415,"_path":416,"layout":11},"Alert","/design-system/components/alert",{"title":418,"_path":419,"layout":11},"Block quote","/design-system/components/block-quote",{"title":421,"_path":422,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":424,"_path":425,"layout":11},"Button","/design-system/components/button",{"title":427,"_path":428,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":430,"_path":431,"layout":11},"Callout","/design-system/components/callout",{"title":433,"_path":434,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":436,"_path":437,"layout":11},"Card","/design-system/components/card",{"title":439,"_path":440,"layout":11},"Carousel","/design-system/components/carousel",{"title":442,"_path":443,"layout":11},"Category grid","/design-system/components/category-grid",{"title":445,"_path":446,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":448,"_path":449,"layout":11},"Chip","/design-system/components/chip",{"title":451,"_path":452,"layout":11},"Contact us","/design-system/components/contact-us",{"title":454,"_path":455,"layout":11},"Date input","/design-system/components/date-input",{"title":457,"_path":458,"layout":11},"Detail list","/design-system/components/detail-list",{"title":460,"_path":461,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":463,"_path":464,"layout":11},"File","/design-system/components/file",{"title":466,"_path":467,"layout":11},"Footer","/design-system/components/footer",{"title":469,"_path":470,"layout":11},"Form alert","/design-system/components/form-alert",{"title":472,"_path":473,"layout":11},"Form","/design-system/components/form",{"title":475,"_path":476,"layout":11},"Header","/design-system/components/header",{"title":478,"_path":479,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":481,"_path":482,"layout":11},"Input field","/design-system/components/input-field",{"title":484,"_path":485,"layout":11},"Key dates","/design-system/components/key-dates",{"title":487,"_path":488,"layout":11},"Media embed","/design-system/components/media-embed",{"title":490,"_path":491,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":493,"_path":494,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":496,"_path":497,"layout":11},"Media","/design-system/components/media",{"title":499,"_path":500,"layout":11},"Option button","/design-system/components/option-button",{"title":502,"_path":503,"layout":11},"Page action","/design-system/components/page-action",{"title":505,"_path":506,"layout":11},"Pagination","/design-system/components/pagination",{"title":508,"_path":509,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":511,"_path":512,"layout":11},"Profile","/design-system/components/profile",{"title":514,"_path":515,"layout":11},"Radio button","/design-system/components/radio-button",{"title":517,"_path":518,"layout":11},"Related links","/design-system/components/related-links",{"title":520,"_path":521,"layout":11},"Results listing","/design-system/components/results-listing",{"title":523,"_path":524,"layout":11},"Search bar","/design-system/components/search-bar",{"title":526,"_path":527,"layout":11},"Skip link","/design-system/components/skip-link",{"title":529,"_path":530,"layout":11},"Social share","/design-system/components/social-share",{"title":290,"_path":289,"layout":11},{"title":9,"_path":5,"layout":11},{"title":296,"_path":295,"layout":11},{"title":535,"_path":536,"layout":11},"Tag","/design-system/components/tag",{"title":538,"_path":539,"layout":11},"Text area","/design-system/components/text-area",{"title":541,"_path":542,"layout":11},"Timeline","/design-system/components/timeline",{"title":544,"_path":545,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":547,"_path":548,"children":549,"layout":11},"Ripple Framework","/framework",[550,551,569,591],{"title":547,"_path":548,"layout":11},{"title":552,"_path":553,"children":554},"Key Concepts","/framework/key-concepts",[555,557,560,563,566],{"title":362,"_path":556,"layout":11},"/framework/key-concepts/nuxt",{"title":558,"_path":559,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":561,"_path":562,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":564,"_path":565,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":567,"_path":568,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":570,"_path":571,"children":572},"Guides","/framework/guides",[573,576,579,582,585,588],{"title":574,"_path":575,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":577,"_path":578,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":580,"_path":581,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":583,"_path":584,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":586,"_path":587,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":589,"_path":590,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":592,"_path":593,"layout":11},"Core modules","/framework/core-modules",["Reactive",595],{"module-navigation":596},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Table</h1><p class="rpl-type-p-large" data-v-3163c6df>The Table component makes it easier for users to scan and compare data and content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information.<!--]--></p><p><!--[-->Users tend to read tables one row or column at a time. So, it's important that content is simple and logical.<!--]--></p><p><!--[-->A table can include a combination of:<!--]--></p><ul><!--[--><li><!--[-->row and/or column headings that help users know what the rows and columns represent<!--]--></li><li><!--[-->body rows that display data or content<!--]--></li><li><!--[-->a table caption describing its content and helping users find, navigate and understand its information<!--]--></li><li><!--[-->a table footer that provides additional details, if required<!--]--></li><li><!--[-->an expandable section with expandable rows, which can show extra related or supplementary information or data.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-data-table--structured-content&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--structured-content&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->Table content should be left-aligned because we read from left to right. However, tables with financial figures should have columns that contain numerals set to right-aligned.<!--]--></p><p><!--[-->Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data.<!--]--></p><p><!--[-->The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information.<!--]--></p><p><!--[-->Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns.<!--]--></p><p><!--[-->Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically.<!--]--></p><p><!--[-->The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Add a caption or footer, if required.<!--]--></li><li><!--[-->Use for complex content and data sets.<!--]--></li><li><!--[-->Align numbers to the right (except nominal numbers).<!--]--></li><li><!--[-->Align headers according to their column data.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't repeat the same content in both the caption and summary.<!--]--></li><li><!--[-->Don't use with long form content. Cell content should be brief and scannable.<!--]--></li><li><!--[-->Don't use without zebra-stripe styling..<!--]--></li><li><!--[-->Don't centre-align content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Table has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->simple, best used for simple data.<!--]--></li><li><!--[-->complex, best used for complex data.<!--]--></li><!--]--></ul><h3 id="simple"><a href="#simple"><!--[-->Simple<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-content--table-scrollable&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--table-scrollable&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="complex"><a href="#complex"><!--[-->Complex<!--]--></a></h3><p><!--[-->The complex variant is best used to display complex data sets.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-data-table--structured-content&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--structured-content&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Table data uses colour to indicate an action to the user.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-data-table--custom-content&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--custom-content&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/table.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/table/_payload.json">[{"state":1,"_errors":594,"serverRendered":597,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":286,"$sdd-globals":300,"$sdd-navigation":301},{"/design-system/components/table":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":281,"_id":282,"_source":283,"_file":284,"_extension":285},"/design-system/components/table","components",false,"","Table","The Table component makes it easier for users to scan and compare data and content.","page","Core",{"type":14,"children":15,"toc":267},"root",[16,25,31,36,41,71,76,83,88,93,98,103,108,113,119,142,148,171,175,181,186,199,205,209,215,220,223,226,232,237,245],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Users tend to read tables one row or column at a time. So, it's important that content is simple and logical.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"A table can include a combination of:",{"type":17,"tag":42,"props":43,"children":44},"ul",{},[45,51,56,61,66],{"type":17,"tag":46,"props":47,"children":48},"li",{},[49],{"type":23,"value":50},"row and/or column headings that help users know what the rows and columns represent",{"type":17,"tag":46,"props":52,"children":53},{},[54],{"type":23,"value":55},"body rows that display data or content",{"type":17,"tag":46,"props":57,"children":58},{},[59],{"type":23,"value":60},"a table caption describing its content and helping users find, navigate and understand its information",{"type":17,"tag":46,"props":62,"children":63},{},[64],{"type":23,"value":65},"a table footer that provides additional details, if required",{"type":17,"tag":46,"props":67,"children":68},{},[69],{"type":23,"value":70},"an expandable section with expandable rows, which can show extra related or supplementary information or data.",{"type":17,"tag":72,"props":73,"children":75},"docs-example",{"id":74},"core-containers-data-table--structured-content",[],{"type":17,"tag":77,"props":78,"children":80},"h3",{"id":79},"how-this-component-works",[81],{"type":23,"value":82},"How this component works",{"type":17,"tag":26,"props":84,"children":85},{},[86],{"type":23,"value":87},"Table content should be left-aligned because we read from left to right. However, tables with financial figures should have columns that contain numerals set to right-aligned.",{"type":17,"tag":26,"props":89,"children":90},{},[91],{"type":23,"value":92},"Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data.",{"type":17,"tag":26,"props":94,"children":95},{},[96],{"type":23,"value":97},"The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information.",{"type":17,"tag":26,"props":99,"children":100},{},[101],{"type":23,"value":102},"Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns.",{"type":17,"tag":26,"props":104,"children":105},{},[106],{"type":23,"value":107},"Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically.",{"type":17,"tag":26,"props":109,"children":110},{},[111],{"type":23,"value":112},"The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle.",{"type":17,"tag":77,"props":114,"children":116},{"id":115},"when-and-how-to-use",[117],{"type":23,"value":118},"When and how to use",{"type":17,"tag":42,"props":120,"children":121},{},[122,127,132,137],{"type":17,"tag":46,"props":123,"children":124},{},[125],{"type":23,"value":126},"Add a caption or footer, if required.",{"type":17,"tag":46,"props":128,"children":129},{},[130],{"type":23,"value":131},"Use for complex content and data sets.",{"type":17,"tag":46,"props":133,"children":134},{},[135],{"type":23,"value":136},"Align numbers to the right (except nominal numbers).",{"type":17,"tag":46,"props":138,"children":139},{},[140],{"type":23,"value":141},"Align headers according to their column data.",{"type":17,"tag":77,"props":143,"children":145},{"id":144},"when-and-how-not-to-use",[146],{"type":23,"value":147},"When and how not to use",{"type":17,"tag":42,"props":149,"children":150},{},[151,156,161,166],{"type":17,"tag":46,"props":152,"children":153},{},[154],{"type":23,"value":155},"Don't repeat the same content in both the caption and summary.",{"type":17,"tag":46,"props":157,"children":158},{},[159],{"type":23,"value":160},"Don't use with long form content. Cell content should be brief and scannable.",{"type":17,"tag":46,"props":162,"children":163},{},[164],{"type":23,"value":165},"Don't use without zebra-stripe styling..",{"type":17,"tag":46,"props":167,"children":168},{},[169],{"type":23,"value":170},"Don't centre-align content.",{"type":17,"tag":172,"props":173,"children":174},"hr",{},[],{"type":17,"tag":18,"props":176,"children":178},{"id":177},"variants",[179],{"type":23,"value":180},"Variants",{"type":17,"tag":26,"props":182,"children":183},{},[184],{"type":23,"value":185},"Table has 2 variants:",{"type":17,"tag":42,"props":187,"children":188},{},[189,194],{"type":17,"tag":46,"props":190,"children":191},{},[192],{"type":23,"value":193},"simple, best used for simple data.",{"type":17,"tag":46,"props":195,"children":196},{},[197],{"type":23,"value":198},"complex, best used for complex data.",{"type":17,"tag":77,"props":200,"children":202},{"id":201},"simple",[203],{"type":23,"value":204},"Simple",{"type":17,"tag":72,"props":206,"children":208},{"id":207},"core-containers-content--table-scrollable",[],{"type":17,"tag":77,"props":210,"children":212},{"id":211},"complex",[213],{"type":23,"value":214},"Complex",{"type":17,"tag":26,"props":216,"children":217},{},[218],{"type":23,"value":219},"The complex variant is best used to display complex data sets.",{"type":17,"tag":72,"props":221,"children":222},{"id":74},[],{"type":17,"tag":172,"props":224,"children":225},{},[],{"type":17,"tag":18,"props":227,"children":229},{"id":228},"theming",[230],{"type":23,"value":231},"Theming",{"type":17,"tag":26,"props":233,"children":234},{},[235],{"type":23,"value":236},"Table data uses colour to indicate an action to the user.",{"type":17,"tag":238,"props":239,"children":240},"docs-theme-chooser",{},[241],{"type":17,"tag":72,"props":242,"children":244},{"id":243},"core-containers-data-table--custom-content",[],{"type":17,"tag":26,"props":246,"children":247},{},[248,250,257,259,265],{"type":23,"value":249},"To create your own theme see ",{"type":17,"tag":251,"props":252,"children":254},"a",{"href":253},"/design-system/design/theming-guidance-for-designers",[255],{"type":23,"value":256},"theming guidance for designers",{"type":23,"value":258}," or ",{"type":17,"tag":251,"props":260,"children":262},{"href":261},"/design-system/develop/theming",[263],{"type":23,"value":264},"theming guidance for developers",{"type":23,"value":266},".",{"title":8,"searchDepth":268,"depth":268,"links":269},2,[270,276,280],{"id":20,"depth":268,"text":24,"children":271},[272,274,275],{"id":79,"depth":273,"text":82},3,{"id":115,"depth":273,"text":118},{"id":144,"depth":273,"text":147},{"id":177,"depth":268,"text":180,"children":277},[278,279],{"id":201,"depth":273,"text":204},{"id":211,"depth":273,"text":214},{"id":228,"depth":268,"text":231},"markdown","content:design-system:5.components:table.md","content","design-system/5.components/table.md","md",{"/design-system/components/table":287},[288,294],{"_path":289,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":290,"description":291,"layout":11,"label":12,"_type":281,"_id":292,"_source":283,"_file":293,"_extension":285},"/design-system/components/statistics-grid","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","content:design-system:5.components:statistics-grid.md","design-system/5.components/statistics-grid.md",{"_path":295,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":296,"description":297,"layout":11,"label":12,"_type":281,"_id":298,"_source":283,"_file":299,"_extension":285},"/design-system/components/tabs","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","content:design-system:5.components:tabs.md","design-system/5.components/tabs.md",{},[302,307,546],{"title":303,"_path":304,"icon":305,"layout":306},"Ripple Design System","/","carbon:home","home",{"title":308,"_path":309,"children":310},"Design System","/design-system",[311,327,342,370,404],{"title":312,"_path":313,"children":314},"About","/design-system/about",[315,318,321,324],{"title":316,"_path":317,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":319,"_path":320,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":322,"_path":323,"layout":11},"Support","/design-system/about/getting-support",{"title":325,"_path":326,"layout":11},"Contributing","/design-system/about/contributing",{"title":328,"_path":329,"children":330},"Design","/design-system/design",[331,334,337,340],{"title":332,"_path":333,"layout":11},"Getting started","/design-system/design/getting-started",{"title":335,"_path":336,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":338,"_path":339,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":341,"_path":253,"layout":11},"Theming guidance for designers",{"title":343,"_path":344,"children":345},"Develop","/design-system/develop",[346,348,350,352],{"title":332,"_path":347,"layout":11},"/design-system/develop/getting-started",{"title":325,"_path":349,"layout":11},"/design-system/develop/contributing",{"title":351,"_path":261,"layout":11},"Theme and brand application",{"title":24,"_path":353,"children":354,"layout":11},"/design-system/develop/usage",[355,358,361,364,367],{"title":356,"_path":357,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":359,"_path":360,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":362,"_path":363,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":365,"_path":366,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":368,"_path":369,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":371,"_path":372,"children":373},"Styles","/design-system/styles",[374,377,380,383,386,389,392,395,398,401],{"title":375,"_path":376,"layout":11},"Colour","/design-system/styles/colour",{"title":378,"_path":379,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":381,"_path":382,"layout":11},"Grid","/design-system/styles/grid",{"title":384,"_path":385,"layout":11},"Icons","/design-system/styles/icons",{"title":387,"_path":388,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":390,"_path":391,"layout":11},"Layout","/design-system/styles/layout",{"title":393,"_path":394,"layout":11},"Logo","/design-system/styles/logo",{"title":396,"_path":397,"layout":11},"Motion","/design-system/styles/motion",{"title":399,"_path":400,"layout":11},"Spacing","/design-system/styles/spacing",{"title":402,"_path":403,"layout":11},"Typography","/design-system/styles/typography",{"title":405,"_path":406,"children":407},"Components","/design-system/components",[408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,532,533,534,537,540,543],{"title":409,"_path":410,"layout":11},"Accordion","/design-system/components/accordion",{"title":412,"_path":413,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":415,"_path":416,"layout":11},"Alert","/design-system/components/alert",{"title":418,"_path":419,"layout":11},"Block quote","/design-system/components/block-quote",{"title":421,"_path":422,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":424,"_path":425,"layout":11},"Button","/design-system/components/button",{"title":427,"_path":428,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":430,"_path":431,"layout":11},"Callout","/design-system/components/callout",{"title":433,"_path":434,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":436,"_path":437,"layout":11},"Card","/design-system/components/card",{"title":439,"_path":440,"layout":11},"Carousel","/design-system/components/carousel",{"title":442,"_path":443,"layout":11},"Category grid","/design-system/components/category-grid",{"title":445,"_path":446,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":448,"_path":449,"layout":11},"Chip","/design-system/components/chip",{"title":451,"_path":452,"layout":11},"Contact us","/design-system/components/contact-us",{"title":454,"_path":455,"layout":11},"Date input","/design-system/components/date-input",{"title":457,"_path":458,"layout":11},"Detail list","/design-system/components/detail-list",{"title":460,"_path":461,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":463,"_path":464,"layout":11},"File","/design-system/components/file",{"title":466,"_path":467,"layout":11},"Footer","/design-system/components/footer",{"title":469,"_path":470,"layout":11},"Form alert","/design-system/components/form-alert",{"title":472,"_path":473,"layout":11},"Form","/design-system/components/form",{"title":475,"_path":476,"layout":11},"Header","/design-system/components/header",{"title":478,"_path":479,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":481,"_path":482,"layout":11},"Input field","/design-system/components/input-field",{"title":484,"_path":485,"layout":11},"Key dates","/design-system/components/key-dates",{"title":487,"_path":488,"layout":11},"Media embed","/design-system/components/media-embed",{"title":490,"_path":491,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":493,"_path":494,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":496,"_path":497,"layout":11},"Media","/design-system/components/media",{"title":499,"_path":500,"layout":11},"Option button","/design-system/components/option-button",{"title":502,"_path":503,"layout":11},"Page action","/design-system/components/page-action",{"title":505,"_path":506,"layout":11},"Pagination","/design-system/components/pagination",{"title":508,"_path":509,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":511,"_path":512,"layout":11},"Profile","/design-system/components/profile",{"title":514,"_path":515,"layout":11},"Radio button","/design-system/components/radio-button",{"title":517,"_path":518,"layout":11},"Related links","/design-system/components/related-links",{"title":520,"_path":521,"layout":11},"Results listing","/design-system/components/results-listing",{"title":523,"_path":524,"layout":11},"Search bar","/design-system/components/search-bar",{"title":526,"_path":527,"layout":11},"Skip link","/design-system/components/skip-link",{"title":529,"_path":530,"layout":11},"Social share","/design-system/components/social-share",{"title":290,"_path":289,"layout":11},{"title":9,"_path":5,"layout":11},{"title":296,"_path":295,"layout":11},{"title":535,"_path":536,"layout":11},"Tag","/design-system/components/tag",{"title":538,"_path":539,"layout":11},"Text area","/design-system/components/text-area",{"title":541,"_path":542,"layout":11},"Timeline","/design-system/components/timeline",{"title":544,"_path":545,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":547,"_path":548,"children":549,"layout":11},"Ripple Framework","/framework",[550,551,569,591],{"title":547,"_path":548,"layout":11},{"title":552,"_path":553,"children":554},"Key Concepts","/framework/key-concepts",[555,557,560,563,566],{"title":362,"_path":556,"layout":11},"/framework/key-concepts/nuxt",{"title":558,"_path":559,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":561,"_path":562,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":564,"_path":565,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":567,"_path":568,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":570,"_path":571,"children":572},"Guides","/framework/guides",[573,576,579,582,585,588],{"title":574,"_path":575,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":577,"_path":578,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":580,"_path":581,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":583,"_path":584,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":586,"_path":587,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":589,"_path":590,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":592,"_path":593,"layout":11},"Core modules","/framework/core-modules",["Reactive",595],{"module-navigation":596},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/tabs/index.html b/design-system/components/tabs/index.html index 1f7ed6cfa9..01d08a31a2 100644 --- a/design-system/components/tabs/index.html +++ b/design-system/components/tabs/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Tabs</h1><p class="rpl-type-p-large" data-v-3163c6df>The Tab component lets you organise related content so that users can switch between related information on the same page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use tabs to let users stay on the same page, but access more content.<!--]--></p><p><!--[-->Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:<!--]--></p><ul><!--[--><li><!--[-->you can split, categorise and clearly label the content<!--]--></li><li><!--[-->there is a section more relevant for most users, which is placed first<!--]--></li><li><!--[-->seeing the all sections at the same time is not needed<!--]--></li><li><!--[-->you have a minimum of 2 tabs.<!--]--></li><!--]--></ul><p><!--[-->Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards.<!--]--></p><p><!--[-->Never use tabs if your content is sequential. Use it to present related content together, as a group.<!--]--></p><p><!--[-->Tabs include:<!--]--></p><ul><!--[--><li><!--[-->labels<!--]--></li><li><!--[-->an optional icon.<!--]--></li><!--]--></ul><p><!--[-->Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Order your tabs according to importance.<!--]--></li><li><!--[-->Labels should clearly and succinctly describe the content within the tab.<!--]--></li><li><!--[-->Only use tabs to group content that all sits at the same level of hierarchy.<!--]--></li><li><!--[-->Limit labels to one word and ensure they are unique.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use tabs within tabs.<!--]--></li><li><!--[-->Don't display disabled tabs.<!--]--></li><li><!--[-->Don't display more than one row of tabs when using the horizontal variant.<!--]--></li><li><!--[-->Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content.<!--]--></li><li><!--[-->Don't use if your content is short, instead use lists or paragraph text.<!--]--></li><li><!--[-->Tabs are not a substitute for primary navigation, so never use tabs as primary navigation.<!--]--></li><li><!--[-->Don't use tabs to tell the user about their progress through a page or content.<!--]--></li><li><!--[-->Don’t use tabs when the user needs to compare information, since only one tab is visible at a time.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Tabs have 2 display variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->vertical.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->The default variant sets the tab group bottom border to span the full available content width.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="vertical"><a href="#vertical"><!--[-->Vertical<!--]--></a></h3><p><!--[-->The vertical variant sets the tab group left border to span the height of the tab group.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-tabs--vertical&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--vertical&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Tabs use colour to represent interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/tabs.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/tabs/_payload.json">[{"state":1,"_errors":603,"serverRendered":606,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":295,"$sdd-globals":309,"$sdd-navigation":310},{"/design-system/components/tabs":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":290,"_id":291,"_source":292,"_file":293,"_extension":294},"/design-system/components/tabs","components",false,"","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","page","Core",{"type":14,"children":15,"toc":277},"root",[16,25,31,36,61,66,71,76,89,94,99,106,129,135,178,182,188,193,206,211,216,219,225,230,234,237,243,248,255],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use tabs to let users stay on the same page, but access more content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"you can split, categorise and clearly label the content",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"there is a section more relevant for most users, which is placed first",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"seeing the all sections at the same time is not needed",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"you have a minimum of 2 tabs.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"Never use tabs if your content is sequential. Use it to present related content together, as a group.",{"type":17,"tag":26,"props":72,"children":73},{},[74],{"type":23,"value":75},"Tabs include:",{"type":17,"tag":37,"props":77,"children":78},{},[79,84],{"type":17,"tag":41,"props":80,"children":81},{},[82],{"type":23,"value":83},"labels",{"type":17,"tag":41,"props":85,"children":86},{},[87],{"type":23,"value":88},"an optional icon.",{"type":17,"tag":26,"props":90,"children":91},{},[92],{"type":23,"value":93},"Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label.",{"type":17,"tag":95,"props":96,"children":98},"docs-example",{"id":97},"core-navigation-tabs--default-story",[],{"type":17,"tag":100,"props":101,"children":103},"h3",{"id":102},"when-and-how-to-use",[104],{"type":23,"value":105},"When and how to use",{"type":17,"tag":37,"props":107,"children":108},{},[109,114,119,124],{"type":17,"tag":41,"props":110,"children":111},{},[112],{"type":23,"value":113},"Order your tabs according to importance.",{"type":17,"tag":41,"props":115,"children":116},{},[117],{"type":23,"value":118},"Labels should clearly and succinctly describe the content within the tab.",{"type":17,"tag":41,"props":120,"children":121},{},[122],{"type":23,"value":123},"Only use tabs to group content that all sits at the same level of hierarchy.",{"type":17,"tag":41,"props":125,"children":126},{},[127],{"type":23,"value":128},"Limit labels to one word and ensure they are unique.",{"type":17,"tag":100,"props":130,"children":132},{"id":131},"when-and-how-not-to-use",[133],{"type":23,"value":134},"When and how not to use",{"type":17,"tag":37,"props":136,"children":137},{},[138,143,148,153,158,163,168,173],{"type":17,"tag":41,"props":139,"children":140},{},[141],{"type":23,"value":142},"Never use tabs within tabs.",{"type":17,"tag":41,"props":144,"children":145},{},[146],{"type":23,"value":147},"Don't display disabled tabs.",{"type":17,"tag":41,"props":149,"children":150},{},[151],{"type":23,"value":152},"Don't display more than one row of tabs when using the horizontal variant.",{"type":17,"tag":41,"props":154,"children":155},{},[156],{"type":23,"value":157},"Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content.",{"type":17,"tag":41,"props":159,"children":160},{},[161],{"type":23,"value":162},"Don't use if your content is short, instead use lists or paragraph text.",{"type":17,"tag":41,"props":164,"children":165},{},[166],{"type":23,"value":167},"Tabs are not a substitute for primary navigation, so never use tabs as primary navigation.",{"type":17,"tag":41,"props":169,"children":170},{},[171],{"type":23,"value":172},"Don't use tabs to tell the user about their progress through a page or content.",{"type":17,"tag":41,"props":174,"children":175},{},[176],{"type":23,"value":177},"Don’t use tabs when the user needs to compare information, since only one tab is visible at a time.",{"type":17,"tag":179,"props":180,"children":181},"hr",{},[],{"type":17,"tag":18,"props":183,"children":185},{"id":184},"variants",[186],{"type":23,"value":187},"Variants",{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"Tabs have 2 display variants:",{"type":17,"tag":37,"props":194,"children":195},{},[196,201],{"type":17,"tag":41,"props":197,"children":198},{},[199],{"type":23,"value":200},"default",{"type":17,"tag":41,"props":202,"children":203},{},[204],{"type":23,"value":205},"vertical.",{"type":17,"tag":100,"props":207,"children":208},{"id":200},[209],{"type":23,"value":210},"Default",{"type":17,"tag":26,"props":212,"children":213},{},[214],{"type":23,"value":215},"The default variant sets the tab group bottom border to span the full available content width.",{"type":17,"tag":95,"props":217,"children":218},{"id":97},[],{"type":17,"tag":100,"props":220,"children":222},{"id":221},"vertical",[223],{"type":23,"value":224},"Vertical",{"type":17,"tag":26,"props":226,"children":227},{},[228],{"type":23,"value":229},"The vertical variant sets the tab group left border to span the height of the tab group.",{"type":17,"tag":95,"props":231,"children":233},{"id":232},"core-navigation-tabs--vertical",[],{"type":17,"tag":179,"props":235,"children":236},{},[],{"type":17,"tag":18,"props":238,"children":240},{"id":239},"theming",[241],{"type":23,"value":242},"Theming",{"type":17,"tag":26,"props":244,"children":245},{},[246],{"type":23,"value":247},"Tabs use colour to represent interaction states.",{"type":17,"tag":249,"props":250,"children":251},"docs-theme-chooser",{},[252],{"type":17,"tag":95,"props":253,"children":254},{"id":97},[],{"type":17,"tag":26,"props":256,"children":257},{},[258,260,267,269,275],{"type":23,"value":259},"To create your own theme see ",{"type":17,"tag":261,"props":262,"children":264},"a",{"href":263},"/design-system/design/theming-guidance-for-designers",[265],{"type":23,"value":266},"theming guidance for designers",{"type":23,"value":268}," or ",{"type":17,"tag":261,"props":270,"children":272},{"href":271},"/design-system/develop/theming",[273],{"type":23,"value":274},"theming guidance for developers",{"type":23,"value":276},".",{"title":8,"searchDepth":278,"depth":278,"links":279},2,[280,285,289],{"id":20,"depth":278,"text":24,"children":281},[282,284],{"id":102,"depth":283,"text":105},3,{"id":131,"depth":283,"text":134},{"id":184,"depth":278,"text":187,"children":286},[287,288],{"id":200,"depth":283,"text":210},{"id":221,"depth":283,"text":224},{"id":239,"depth":278,"text":242},"markdown","content:design-system:5.components:tabs.md","content","design-system/5.components/tabs.md","md",{"/design-system/components/tabs":296},[297,303],{"_path":298,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":299,"description":300,"layout":11,"label":12,"_type":290,"_id":301,"_source":292,"_file":302,"_extension":294},"/design-system/components/table","Table","The Table component makes it easier for users to scan and compare data and content.","content:design-system:5.components:table.md","design-system/5.components/table.md",{"_path":304,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":305,"description":306,"layout":11,"label":12,"_type":290,"_id":307,"_source":292,"_file":308,"_extension":294},"/design-system/components/tag","Tag","The Tag component adds, and draws attention to, a category name for your content.","content:design-system:5.components:tag.md","design-system/5.components/tag.md",{},[311,316,555],{"title":312,"_path":313,"icon":314,"layout":315},"Ripple Design System","/","carbon:home","home",{"title":317,"_path":318,"children":319},"Design System","/design-system",[320,336,351,379,413],{"title":321,"_path":322,"children":323},"About","/design-system/about",[324,327,330,333],{"title":325,"_path":326,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":328,"_path":329,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":331,"_path":332,"layout":11},"Support","/design-system/about/getting-support",{"title":334,"_path":335,"layout":11},"Contributing","/design-system/about/contributing",{"title":337,"_path":338,"children":339},"Design","/design-system/design",[340,343,346,349],{"title":341,"_path":342,"layout":11},"Getting started","/design-system/design/getting-started",{"title":344,"_path":345,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":347,"_path":348,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":350,"_path":263,"layout":11},"Theming guidance for designers",{"title":352,"_path":353,"children":354},"Develop","/design-system/develop",[355,357,359,361],{"title":341,"_path":356,"layout":11},"/design-system/develop/getting-started",{"title":334,"_path":358,"layout":11},"/design-system/develop/contributing",{"title":360,"_path":271,"layout":11},"Theme and brand application",{"title":24,"_path":362,"children":363,"layout":11},"/design-system/develop/usage",[364,367,370,373,376],{"title":365,"_path":366,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":368,"_path":369,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":371,"_path":372,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":374,"_path":375,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":377,"_path":378,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":380,"_path":381,"children":382},"Styles","/design-system/styles",[383,386,389,392,395,398,401,404,407,410],{"title":384,"_path":385,"layout":11},"Colour","/design-system/styles/colour",{"title":387,"_path":388,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":390,"_path":391,"layout":11},"Grid","/design-system/styles/grid",{"title":393,"_path":394,"layout":11},"Icons","/design-system/styles/icons",{"title":396,"_path":397,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":399,"_path":400,"layout":11},"Layout","/design-system/styles/layout",{"title":402,"_path":403,"layout":11},"Logo","/design-system/styles/logo",{"title":405,"_path":406,"layout":11},"Motion","/design-system/styles/motion",{"title":408,"_path":409,"layout":11},"Spacing","/design-system/styles/spacing",{"title":411,"_path":412,"layout":11},"Typography","/design-system/styles/typography",{"title":414,"_path":415,"children":416},"Components","/design-system/components",[417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,544,545,546,549,552],{"title":418,"_path":419,"layout":11},"Accordion","/design-system/components/accordion",{"title":421,"_path":422,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":424,"_path":425,"layout":11},"Alert","/design-system/components/alert",{"title":427,"_path":428,"layout":11},"Block quote","/design-system/components/block-quote",{"title":430,"_path":431,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":433,"_path":434,"layout":11},"Button","/design-system/components/button",{"title":436,"_path":437,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":439,"_path":440,"layout":11},"Callout","/design-system/components/callout",{"title":442,"_path":443,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":445,"_path":446,"layout":11},"Card","/design-system/components/card",{"title":448,"_path":449,"layout":11},"Carousel","/design-system/components/carousel",{"title":451,"_path":452,"layout":11},"Category grid","/design-system/components/category-grid",{"title":454,"_path":455,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":457,"_path":458,"layout":11},"Chip","/design-system/components/chip",{"title":460,"_path":461,"layout":11},"Contact us","/design-system/components/contact-us",{"title":463,"_path":464,"layout":11},"Date input","/design-system/components/date-input",{"title":466,"_path":467,"layout":11},"Detail list","/design-system/components/detail-list",{"title":469,"_path":470,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":472,"_path":473,"layout":11},"File","/design-system/components/file",{"title":475,"_path":476,"layout":11},"Footer","/design-system/components/footer",{"title":478,"_path":479,"layout":11},"Form alert","/design-system/components/form-alert",{"title":481,"_path":482,"layout":11},"Form","/design-system/components/form",{"title":484,"_path":485,"layout":11},"Header","/design-system/components/header",{"title":487,"_path":488,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":490,"_path":491,"layout":11},"Input field","/design-system/components/input-field",{"title":493,"_path":494,"layout":11},"Key dates","/design-system/components/key-dates",{"title":496,"_path":497,"layout":11},"Media embed","/design-system/components/media-embed",{"title":499,"_path":500,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":502,"_path":503,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":505,"_path":506,"layout":11},"Media","/design-system/components/media",{"title":508,"_path":509,"layout":11},"Option button","/design-system/components/option-button",{"title":511,"_path":512,"layout":11},"Page action","/design-system/components/page-action",{"title":514,"_path":515,"layout":11},"Pagination","/design-system/components/pagination",{"title":517,"_path":518,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":520,"_path":521,"layout":11},"Profile","/design-system/components/profile",{"title":523,"_path":524,"layout":11},"Radio button","/design-system/components/radio-button",{"title":526,"_path":527,"layout":11},"Related links","/design-system/components/related-links",{"title":529,"_path":530,"layout":11},"Results listing","/design-system/components/results-listing",{"title":532,"_path":533,"layout":11},"Search bar","/design-system/components/search-bar",{"title":535,"_path":536,"layout":11},"Skip link","/design-system/components/skip-link",{"title":538,"_path":539,"layout":11},"Social share","/design-system/components/social-share",{"title":541,"_path":542,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":299,"_path":298,"layout":11},{"title":9,"_path":5,"layout":11},{"title":305,"_path":304,"layout":11},{"title":547,"_path":548,"layout":11},"Text area","/design-system/components/text-area",{"title":550,"_path":551,"layout":11},"Timeline","/design-system/components/timeline",{"title":553,"_path":554,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":556,"_path":557,"children":558,"layout":11},"Ripple Framework","/framework",[559,560,578,600],{"title":556,"_path":557,"layout":11},{"title":561,"_path":562,"children":563},"Key Concepts","/framework/key-concepts",[564,566,569,572,575],{"title":371,"_path":565,"layout":11},"/framework/key-concepts/nuxt",{"title":567,"_path":568,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":570,"_path":571,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":573,"_path":574,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":576,"_path":577,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":579,"_path":580,"children":581},"Guides","/framework/guides",[582,585,588,591,594,597],{"title":583,"_path":584,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":586,"_path":587,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":589,"_path":590,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":592,"_path":593,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":595,"_path":596,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":598,"_path":599,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":601,"_path":602,"layout":11},"Core modules","/framework/core-modules",["Reactive",604],{"module-navigation":605},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Tabs</h1><p class="rpl-type-p-large" data-v-3163c6df>The Tab component lets you organise related content so that users can switch between related information on the same page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use tabs to let users stay on the same page, but access more content.<!--]--></p><p><!--[-->Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:<!--]--></p><ul><!--[--><li><!--[-->you can split, categorise and clearly label the content<!--]--></li><li><!--[-->there is a section more relevant for most users, which is placed first<!--]--></li><li><!--[-->seeing the all sections at the same time is not needed<!--]--></li><li><!--[-->you have a minimum of 2 tabs.<!--]--></li><!--]--></ul><p><!--[-->Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards.<!--]--></p><p><!--[-->Never use tabs if your content is sequential. Use it to present related content together, as a group.<!--]--></p><p><!--[-->Tabs include:<!--]--></p><ul><!--[--><li><!--[-->labels<!--]--></li><li><!--[-->an optional icon.<!--]--></li><!--]--></ul><p><!--[-->Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Order your tabs according to importance.<!--]--></li><li><!--[-->Labels should clearly and succinctly describe the content within the tab.<!--]--></li><li><!--[-->Only use tabs to group content that all sits at the same level of hierarchy.<!--]--></li><li><!--[-->Limit labels to one word and ensure they are unique.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use tabs within tabs.<!--]--></li><li><!--[-->Don't display disabled tabs.<!--]--></li><li><!--[-->Don't display more than one row of tabs when using the horizontal variant.<!--]--></li><li><!--[-->Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content.<!--]--></li><li><!--[-->Don't use if your content is short, instead use lists or paragraph text.<!--]--></li><li><!--[-->Tabs are not a substitute for primary navigation, so never use tabs as primary navigation.<!--]--></li><li><!--[-->Don't use tabs to tell the user about their progress through a page or content.<!--]--></li><li><!--[-->Don’t use tabs when the user needs to compare information, since only one tab is visible at a time.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Tabs have 2 display variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->vertical.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->The default variant sets the tab group bottom border to span the full available content width.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="vertical"><a href="#vertical"><!--[-->Vertical<!--]--></a></h3><p><!--[-->The vertical variant sets the tab group left border to span the height of the tab group.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-tabs--vertical&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--vertical&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Tabs use colour to represent interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/tabs.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/tabs/_payload.json">[{"state":1,"_errors":603,"serverRendered":606,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":295,"$sdd-globals":309,"$sdd-navigation":310},{"/design-system/components/tabs":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":290,"_id":291,"_source":292,"_file":293,"_extension":294},"/design-system/components/tabs","components",false,"","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","page","Core",{"type":14,"children":15,"toc":277},"root",[16,25,31,36,61,66,71,76,89,94,99,106,129,135,178,182,188,193,206,211,216,219,225,230,234,237,243,248,255],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use tabs to let users stay on the same page, but access more content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"you can split, categorise and clearly label the content",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"there is a section more relevant for most users, which is placed first",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"seeing the all sections at the same time is not needed",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"you have a minimum of 2 tabs.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"Never use tabs if your content is sequential. Use it to present related content together, as a group.",{"type":17,"tag":26,"props":72,"children":73},{},[74],{"type":23,"value":75},"Tabs include:",{"type":17,"tag":37,"props":77,"children":78},{},[79,84],{"type":17,"tag":41,"props":80,"children":81},{},[82],{"type":23,"value":83},"labels",{"type":17,"tag":41,"props":85,"children":86},{},[87],{"type":23,"value":88},"an optional icon.",{"type":17,"tag":26,"props":90,"children":91},{},[92],{"type":23,"value":93},"Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label.",{"type":17,"tag":95,"props":96,"children":98},"docs-example",{"id":97},"core-navigation-tabs--default-story",[],{"type":17,"tag":100,"props":101,"children":103},"h3",{"id":102},"when-and-how-to-use",[104],{"type":23,"value":105},"When and how to use",{"type":17,"tag":37,"props":107,"children":108},{},[109,114,119,124],{"type":17,"tag":41,"props":110,"children":111},{},[112],{"type":23,"value":113},"Order your tabs according to importance.",{"type":17,"tag":41,"props":115,"children":116},{},[117],{"type":23,"value":118},"Labels should clearly and succinctly describe the content within the tab.",{"type":17,"tag":41,"props":120,"children":121},{},[122],{"type":23,"value":123},"Only use tabs to group content that all sits at the same level of hierarchy.",{"type":17,"tag":41,"props":125,"children":126},{},[127],{"type":23,"value":128},"Limit labels to one word and ensure they are unique.",{"type":17,"tag":100,"props":130,"children":132},{"id":131},"when-and-how-not-to-use",[133],{"type":23,"value":134},"When and how not to use",{"type":17,"tag":37,"props":136,"children":137},{},[138,143,148,153,158,163,168,173],{"type":17,"tag":41,"props":139,"children":140},{},[141],{"type":23,"value":142},"Never use tabs within tabs.",{"type":17,"tag":41,"props":144,"children":145},{},[146],{"type":23,"value":147},"Don't display disabled tabs.",{"type":17,"tag":41,"props":149,"children":150},{},[151],{"type":23,"value":152},"Don't display more than one row of tabs when using the horizontal variant.",{"type":17,"tag":41,"props":154,"children":155},{},[156],{"type":23,"value":157},"Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content.",{"type":17,"tag":41,"props":159,"children":160},{},[161],{"type":23,"value":162},"Don't use if your content is short, instead use lists or paragraph text.",{"type":17,"tag":41,"props":164,"children":165},{},[166],{"type":23,"value":167},"Tabs are not a substitute for primary navigation, so never use tabs as primary navigation.",{"type":17,"tag":41,"props":169,"children":170},{},[171],{"type":23,"value":172},"Don't use tabs to tell the user about their progress through a page or content.",{"type":17,"tag":41,"props":174,"children":175},{},[176],{"type":23,"value":177},"Don’t use tabs when the user needs to compare information, since only one tab is visible at a time.",{"type":17,"tag":179,"props":180,"children":181},"hr",{},[],{"type":17,"tag":18,"props":183,"children":185},{"id":184},"variants",[186],{"type":23,"value":187},"Variants",{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"Tabs have 2 display variants:",{"type":17,"tag":37,"props":194,"children":195},{},[196,201],{"type":17,"tag":41,"props":197,"children":198},{},[199],{"type":23,"value":200},"default",{"type":17,"tag":41,"props":202,"children":203},{},[204],{"type":23,"value":205},"vertical.",{"type":17,"tag":100,"props":207,"children":208},{"id":200},[209],{"type":23,"value":210},"Default",{"type":17,"tag":26,"props":212,"children":213},{},[214],{"type":23,"value":215},"The default variant sets the tab group bottom border to span the full available content width.",{"type":17,"tag":95,"props":217,"children":218},{"id":97},[],{"type":17,"tag":100,"props":220,"children":222},{"id":221},"vertical",[223],{"type":23,"value":224},"Vertical",{"type":17,"tag":26,"props":226,"children":227},{},[228],{"type":23,"value":229},"The vertical variant sets the tab group left border to span the height of the tab group.",{"type":17,"tag":95,"props":231,"children":233},{"id":232},"core-navigation-tabs--vertical",[],{"type":17,"tag":179,"props":235,"children":236},{},[],{"type":17,"tag":18,"props":238,"children":240},{"id":239},"theming",[241],{"type":23,"value":242},"Theming",{"type":17,"tag":26,"props":244,"children":245},{},[246],{"type":23,"value":247},"Tabs use colour to represent interaction states.",{"type":17,"tag":249,"props":250,"children":251},"docs-theme-chooser",{},[252],{"type":17,"tag":95,"props":253,"children":254},{"id":97},[],{"type":17,"tag":26,"props":256,"children":257},{},[258,260,267,269,275],{"type":23,"value":259},"To create your own theme see ",{"type":17,"tag":261,"props":262,"children":264},"a",{"href":263},"/design-system/design/theming-guidance-for-designers",[265],{"type":23,"value":266},"theming guidance for designers",{"type":23,"value":268}," or ",{"type":17,"tag":261,"props":270,"children":272},{"href":271},"/design-system/develop/theming",[273],{"type":23,"value":274},"theming guidance for developers",{"type":23,"value":276},".",{"title":8,"searchDepth":278,"depth":278,"links":279},2,[280,285,289],{"id":20,"depth":278,"text":24,"children":281},[282,284],{"id":102,"depth":283,"text":105},3,{"id":131,"depth":283,"text":134},{"id":184,"depth":278,"text":187,"children":286},[287,288],{"id":200,"depth":283,"text":210},{"id":221,"depth":283,"text":224},{"id":239,"depth":278,"text":242},"markdown","content:design-system:5.components:tabs.md","content","design-system/5.components/tabs.md","md",{"/design-system/components/tabs":296},[297,303],{"_path":298,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":299,"description":300,"layout":11,"label":12,"_type":290,"_id":301,"_source":292,"_file":302,"_extension":294},"/design-system/components/table","Table","The Table component makes it easier for users to scan and compare data and content.","content:design-system:5.components:table.md","design-system/5.components/table.md",{"_path":304,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":305,"description":306,"layout":11,"label":12,"_type":290,"_id":307,"_source":292,"_file":308,"_extension":294},"/design-system/components/tag","Tag","The Tag component adds, and draws attention to, a category name for your content.","content:design-system:5.components:tag.md","design-system/5.components/tag.md",{},[311,316,555],{"title":312,"_path":313,"icon":314,"layout":315},"Ripple Design System","/","carbon:home","home",{"title":317,"_path":318,"children":319},"Design System","/design-system",[320,336,351,379,413],{"title":321,"_path":322,"children":323},"About","/design-system/about",[324,327,330,333],{"title":325,"_path":326,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":328,"_path":329,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":331,"_path":332,"layout":11},"Support","/design-system/about/getting-support",{"title":334,"_path":335,"layout":11},"Contributing","/design-system/about/contributing",{"title":337,"_path":338,"children":339},"Design","/design-system/design",[340,343,346,349],{"title":341,"_path":342,"layout":11},"Getting started","/design-system/design/getting-started",{"title":344,"_path":345,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":347,"_path":348,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":350,"_path":263,"layout":11},"Theming guidance for designers",{"title":352,"_path":353,"children":354},"Develop","/design-system/develop",[355,357,359,361],{"title":341,"_path":356,"layout":11},"/design-system/develop/getting-started",{"title":334,"_path":358,"layout":11},"/design-system/develop/contributing",{"title":360,"_path":271,"layout":11},"Theme and brand application",{"title":24,"_path":362,"children":363,"layout":11},"/design-system/develop/usage",[364,367,370,373,376],{"title":365,"_path":366,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":368,"_path":369,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":371,"_path":372,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":374,"_path":375,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":377,"_path":378,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":380,"_path":381,"children":382},"Styles","/design-system/styles",[383,386,389,392,395,398,401,404,407,410],{"title":384,"_path":385,"layout":11},"Colour","/design-system/styles/colour",{"title":387,"_path":388,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":390,"_path":391,"layout":11},"Grid","/design-system/styles/grid",{"title":393,"_path":394,"layout":11},"Icons","/design-system/styles/icons",{"title":396,"_path":397,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":399,"_path":400,"layout":11},"Layout","/design-system/styles/layout",{"title":402,"_path":403,"layout":11},"Logo","/design-system/styles/logo",{"title":405,"_path":406,"layout":11},"Motion","/design-system/styles/motion",{"title":408,"_path":409,"layout":11},"Spacing","/design-system/styles/spacing",{"title":411,"_path":412,"layout":11},"Typography","/design-system/styles/typography",{"title":414,"_path":415,"children":416},"Components","/design-system/components",[417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,544,545,546,549,552],{"title":418,"_path":419,"layout":11},"Accordion","/design-system/components/accordion",{"title":421,"_path":422,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":424,"_path":425,"layout":11},"Alert","/design-system/components/alert",{"title":427,"_path":428,"layout":11},"Block quote","/design-system/components/block-quote",{"title":430,"_path":431,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":433,"_path":434,"layout":11},"Button","/design-system/components/button",{"title":436,"_path":437,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":439,"_path":440,"layout":11},"Callout","/design-system/components/callout",{"title":442,"_path":443,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":445,"_path":446,"layout":11},"Card","/design-system/components/card",{"title":448,"_path":449,"layout":11},"Carousel","/design-system/components/carousel",{"title":451,"_path":452,"layout":11},"Category grid","/design-system/components/category-grid",{"title":454,"_path":455,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":457,"_path":458,"layout":11},"Chip","/design-system/components/chip",{"title":460,"_path":461,"layout":11},"Contact us","/design-system/components/contact-us",{"title":463,"_path":464,"layout":11},"Date input","/design-system/components/date-input",{"title":466,"_path":467,"layout":11},"Detail list","/design-system/components/detail-list",{"title":469,"_path":470,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":472,"_path":473,"layout":11},"File","/design-system/components/file",{"title":475,"_path":476,"layout":11},"Footer","/design-system/components/footer",{"title":478,"_path":479,"layout":11},"Form alert","/design-system/components/form-alert",{"title":481,"_path":482,"layout":11},"Form","/design-system/components/form",{"title":484,"_path":485,"layout":11},"Header","/design-system/components/header",{"title":487,"_path":488,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":490,"_path":491,"layout":11},"Input field","/design-system/components/input-field",{"title":493,"_path":494,"layout":11},"Key dates","/design-system/components/key-dates",{"title":496,"_path":497,"layout":11},"Media embed","/design-system/components/media-embed",{"title":499,"_path":500,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":502,"_path":503,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":505,"_path":506,"layout":11},"Media","/design-system/components/media",{"title":508,"_path":509,"layout":11},"Option button","/design-system/components/option-button",{"title":511,"_path":512,"layout":11},"Page action","/design-system/components/page-action",{"title":514,"_path":515,"layout":11},"Pagination","/design-system/components/pagination",{"title":517,"_path":518,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":520,"_path":521,"layout":11},"Profile","/design-system/components/profile",{"title":523,"_path":524,"layout":11},"Radio button","/design-system/components/radio-button",{"title":526,"_path":527,"layout":11},"Related links","/design-system/components/related-links",{"title":529,"_path":530,"layout":11},"Results listing","/design-system/components/results-listing",{"title":532,"_path":533,"layout":11},"Search bar","/design-system/components/search-bar",{"title":535,"_path":536,"layout":11},"Skip link","/design-system/components/skip-link",{"title":538,"_path":539,"layout":11},"Social share","/design-system/components/social-share",{"title":541,"_path":542,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":299,"_path":298,"layout":11},{"title":9,"_path":5,"layout":11},{"title":305,"_path":304,"layout":11},{"title":547,"_path":548,"layout":11},"Text area","/design-system/components/text-area",{"title":550,"_path":551,"layout":11},"Timeline","/design-system/components/timeline",{"title":553,"_path":554,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":556,"_path":557,"children":558,"layout":11},"Ripple Framework","/framework",[559,560,578,600],{"title":556,"_path":557,"layout":11},{"title":561,"_path":562,"children":563},"Key Concepts","/framework/key-concepts",[564,566,569,572,575],{"title":371,"_path":565,"layout":11},"/framework/key-concepts/nuxt",{"title":567,"_path":568,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":570,"_path":571,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":573,"_path":574,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":576,"_path":577,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":579,"_path":580,"children":581},"Guides","/framework/guides",[582,585,588,591,594,597],{"title":583,"_path":584,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":586,"_path":587,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":589,"_path":590,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":592,"_path":593,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":595,"_path":596,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":598,"_path":599,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":601,"_path":602,"layout":11},"Core modules","/framework/core-modules",["Reactive",604],{"module-navigation":605},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/tag/index.html b/design-system/components/tag/index.html index 9fd3f2665f..6841313803 100644 --- a/design-system/components/tag/index.html +++ b/design-system/components/tag/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Tag</h1><p class="rpl-type-p-large" data-v-3163c6df>The Tag component adds, and draws attention to, a category name for your content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use tags to help categorise content. Tags help users to scan and find content that's relevant to them.<!--]--></p><p><!--[-->Content can have more than one category or theme. Using the tag component helps indicate this to the user.<!--]--></p><p><!--[-->When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-tag--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use keywords.<!--]--></li><li><!--[-->Use to draw attention to a category of content or information.<!--]--></li><li><!--[-->Use nouns or adjectives.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use punctuation.<!--]--></li><li><!--[-->Don't overuse tags.<!--]--></li><li><!--[-->Don't use icons in the tags.<!--]--></li><li><!--[-->Don't use as a heading.<!--]--></li><li><!--[-->Don't use more than 2 words.<!--]--></li><li><!--[-->Don't use as a link or action.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Tags have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, for use on neutral backgrounds<!--]--></li><li><!--[-->neutral, for use on white backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-tag--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="neutral"><a href="#neutral"><!--[-->Neutral<!--]--></a></h3><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-tag--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/tag.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/tag/_payload.json">[{"state":1,"_errors":491,"serverRendered":494,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":181,"$sdd-globals":195,"$sdd-navigation":196},{"/design-system/components/tag":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":176,"_id":177,"_source":178,"_file":179,"_extension":180},"/design-system/components/tag","components",false,"","Tag","The Tag component adds, and draws attention to, a category name for your content.","page","Core",{"type":14,"children":15,"toc":164},"root",[16,25,31,36,41,46,53,73,79,112,116,122,127,140,146,150,156,161],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use tags to help categorise content. Tags help users to scan and find content that's relevant to them.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Content can have more than one category or theme. Using the tag component helps indicate this to the user.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-containers-tag--neutral",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Use keywords.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Use to draw attention to a category of content or information.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use nouns or adjectives.",{"type":17,"tag":47,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":54,"props":80,"children":81},{},[82,87,92,97,102,107],{"type":17,"tag":58,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don't use punctuation.",{"type":17,"tag":58,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don't overuse tags.",{"type":17,"tag":58,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don't use icons in the tags.",{"type":17,"tag":58,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don't use as a heading.",{"type":17,"tag":58,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don't use more than 2 words.",{"type":17,"tag":58,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don't use as a link or action.",{"type":17,"tag":113,"props":114,"children":115},"hr",{},[],{"type":17,"tag":18,"props":117,"children":119},{"id":118},"variants",[120],{"type":23,"value":121},"Variants",{"type":17,"tag":26,"props":123,"children":124},{},[125],{"type":23,"value":126},"Tags have 2 variants:",{"type":17,"tag":54,"props":128,"children":129},{},[130,135],{"type":17,"tag":58,"props":131,"children":132},{},[133],{"type":23,"value":134},"default, for use on neutral backgrounds",{"type":17,"tag":58,"props":136,"children":137},{},[138],{"type":23,"value":139},"neutral, for use on white backgrounds.",{"type":17,"tag":47,"props":141,"children":143},{"id":142},"default",[144],{"type":23,"value":145},"Default",{"type":17,"tag":42,"props":147,"children":149},{"id":148},"core-containers-tag--default-story",[],{"type":17,"tag":47,"props":151,"children":153},{"id":152},"neutral",[154],{"type":23,"value":155},"Neutral",{"type":17,"tag":26,"props":157,"children":158},{},[159],{"type":23,"value":160},"Use the reverse variant when the chip appears on the primary colour.",{"type":17,"tag":42,"props":162,"children":163},{"id":44},[],{"title":8,"searchDepth":165,"depth":165,"links":166},2,[167,172],{"id":20,"depth":165,"text":24,"children":168},[169,171],{"id":49,"depth":170,"text":52},3,{"id":75,"depth":170,"text":78},{"id":118,"depth":165,"text":121,"children":173},[174,175],{"id":142,"depth":170,"text":145},{"id":152,"depth":170,"text":155},"markdown","content:design-system:5.components:tag.md","content","design-system/5.components/tag.md","md",{"/design-system/components/tag":182},[183,189],{"_path":184,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":185,"description":186,"layout":11,"label":12,"_type":176,"_id":187,"_source":178,"_file":188,"_extension":180},"/design-system/components/tabs","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","content:design-system:5.components:tabs.md","design-system/5.components/tabs.md",{"_path":190,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":191,"description":192,"layout":11,"label":12,"_type":176,"_id":193,"_source":178,"_file":194,"_extension":180},"/design-system/components/text-area","Text area","The Text area component lets users select one option from a list.","content:design-system:5.components:text-area.md","design-system/5.components/text-area.md",{},[197,202,443],{"title":198,"_path":199,"icon":200,"layout":201},"Ripple Design System","/","carbon:home","home",{"title":203,"_path":204,"children":205},"Design System","/design-system",[206,222,238,267,301],{"title":207,"_path":208,"children":209},"About","/design-system/about",[210,213,216,219],{"title":211,"_path":212,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":214,"_path":215,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":217,"_path":218,"layout":11},"Support","/design-system/about/getting-support",{"title":220,"_path":221,"layout":11},"Contributing","/design-system/about/contributing",{"title":223,"_path":224,"children":225},"Design","/design-system/design",[226,229,232,235],{"title":227,"_path":228,"layout":11},"Getting started","/design-system/design/getting-started",{"title":230,"_path":231,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":233,"_path":234,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":236,"_path":237,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":239,"_path":240,"children":241},"Develop","/design-system/develop",[242,244,246,249],{"title":227,"_path":243,"layout":11},"/design-system/develop/getting-started",{"title":220,"_path":245,"layout":11},"/design-system/develop/contributing",{"title":247,"_path":248,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":250,"children":251,"layout":11},"/design-system/develop/usage",[252,255,258,261,264],{"title":253,"_path":254,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":256,"_path":257,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":259,"_path":260,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":262,"_path":263,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":265,"_path":266,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":268,"_path":269,"children":270},"Styles","/design-system/styles",[271,274,277,280,283,286,289,292,295,298],{"title":272,"_path":273,"layout":11},"Colour","/design-system/styles/colour",{"title":275,"_path":276,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":278,"_path":279,"layout":11},"Grid","/design-system/styles/grid",{"title":281,"_path":282,"layout":11},"Icons","/design-system/styles/icons",{"title":284,"_path":285,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":287,"_path":288,"layout":11},"Layout","/design-system/styles/layout",{"title":290,"_path":291,"layout":11},"Logo","/design-system/styles/logo",{"title":293,"_path":294,"layout":11},"Motion","/design-system/styles/motion",{"title":296,"_path":297,"layout":11},"Spacing","/design-system/styles/spacing",{"title":299,"_path":300,"layout":11},"Typography","/design-system/styles/typography",{"title":302,"_path":303,"children":304},"Components","/design-system/components",[305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,435,436,437,440],{"title":306,"_path":307,"layout":11},"Accordion","/design-system/components/accordion",{"title":309,"_path":310,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":312,"_path":313,"layout":11},"Alert","/design-system/components/alert",{"title":315,"_path":316,"layout":11},"Block quote","/design-system/components/block-quote",{"title":318,"_path":319,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":321,"_path":322,"layout":11},"Button","/design-system/components/button",{"title":324,"_path":325,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":327,"_path":328,"layout":11},"Callout","/design-system/components/callout",{"title":330,"_path":331,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":333,"_path":334,"layout":11},"Card","/design-system/components/card",{"title":336,"_path":337,"layout":11},"Carousel","/design-system/components/carousel",{"title":339,"_path":340,"layout":11},"Category grid","/design-system/components/category-grid",{"title":342,"_path":343,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":345,"_path":346,"layout":11},"Chip","/design-system/components/chip",{"title":348,"_path":349,"layout":11},"Contact us","/design-system/components/contact-us",{"title":351,"_path":352,"layout":11},"Date input","/design-system/components/date-input",{"title":354,"_path":355,"layout":11},"Detail list","/design-system/components/detail-list",{"title":357,"_path":358,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":360,"_path":361,"layout":11},"File","/design-system/components/file",{"title":363,"_path":364,"layout":11},"Footer","/design-system/components/footer",{"title":366,"_path":367,"layout":11},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":11},"Form","/design-system/components/form",{"title":372,"_path":373,"layout":11},"Header","/design-system/components/header",{"title":375,"_path":376,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":378,"_path":379,"layout":11},"Input field","/design-system/components/input-field",{"title":381,"_path":382,"layout":11},"Key dates","/design-system/components/key-dates",{"title":384,"_path":385,"layout":11},"Media embed","/design-system/components/media-embed",{"title":387,"_path":388,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":390,"_path":391,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":393,"_path":394,"layout":11},"Media","/design-system/components/media",{"title":396,"_path":397,"layout":11},"Option button","/design-system/components/option-button",{"title":399,"_path":400,"layout":11},"Page action","/design-system/components/page-action",{"title":402,"_path":403,"layout":11},"Pagination","/design-system/components/pagination",{"title":405,"_path":406,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":408,"_path":409,"layout":11},"Profile","/design-system/components/profile",{"title":411,"_path":412,"layout":11},"Radio button","/design-system/components/radio-button",{"title":414,"_path":415,"layout":11},"Related links","/design-system/components/related-links",{"title":417,"_path":418,"layout":11},"Results listing","/design-system/components/results-listing",{"title":420,"_path":421,"layout":11},"Search bar","/design-system/components/search-bar",{"title":423,"_path":424,"layout":11},"Skip link","/design-system/components/skip-link",{"title":426,"_path":427,"layout":11},"Social share","/design-system/components/social-share",{"title":429,"_path":430,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":432,"_path":433,"layout":11},"Table","/design-system/components/table",{"title":185,"_path":184,"layout":11},{"title":9,"_path":5,"layout":11},{"title":191,"_path":190,"layout":11},{"title":438,"_path":439,"layout":11},"Timeline","/design-system/components/timeline",{"title":441,"_path":442,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":444,"_path":445,"children":446,"layout":11},"Ripple Framework","/framework",[447,448,466,488],{"title":444,"_path":445,"layout":11},{"title":449,"_path":450,"children":451},"Key Concepts","/framework/key-concepts",[452,454,457,460,463],{"title":259,"_path":453,"layout":11},"/framework/key-concepts/nuxt",{"title":455,"_path":456,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":458,"_path":459,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":461,"_path":462,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":464,"_path":465,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":467,"_path":468,"children":469},"Guides","/framework/guides",[470,473,476,479,482,485],{"title":471,"_path":472,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":474,"_path":475,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":477,"_path":478,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":480,"_path":481,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":483,"_path":484,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":486,"_path":487,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":489,"_path":490,"layout":11},"Core modules","/framework/core-modules",["Reactive",492],{"module-navigation":493},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Tag</h1><p class="rpl-type-p-large" data-v-3163c6df>The Tag component adds, and draws attention to, a category name for your content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use tags to help categorise content. Tags help users to scan and find content that's relevant to them.<!--]--></p><p><!--[-->Content can have more than one category or theme. Using the tag component helps indicate this to the user.<!--]--></p><p><!--[-->When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-tag--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use keywords.<!--]--></li><li><!--[-->Use to draw attention to a category of content or information.<!--]--></li><li><!--[-->Use nouns or adjectives.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't use punctuation.<!--]--></li><li><!--[-->Don't overuse tags.<!--]--></li><li><!--[-->Don't use icons in the tags.<!--]--></li><li><!--[-->Don't use as a heading.<!--]--></li><li><!--[-->Don't use more than 2 words.<!--]--></li><li><!--[-->Don't use as a link or action.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Tags have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, for use on neutral backgrounds<!--]--></li><li><!--[-->neutral, for use on white backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-tag--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="neutral"><a href="#neutral"><!--[-->Neutral<!--]--></a></h3><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-tag--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--neutral&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/tag.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/tag/_payload.json">[{"state":1,"_errors":491,"serverRendered":494,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":181,"$sdd-globals":195,"$sdd-navigation":196},{"/design-system/components/tag":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":176,"_id":177,"_source":178,"_file":179,"_extension":180},"/design-system/components/tag","components",false,"","Tag","The Tag component adds, and draws attention to, a category name for your content.","page","Core",{"type":14,"children":15,"toc":164},"root",[16,25,31,36,41,46,53,73,79,112,116,122,127,140,146,150,156,161],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use tags to help categorise content. Tags help users to scan and find content that's relevant to them.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Content can have more than one category or theme. Using the tag component helps indicate this to the user.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action.",{"type":17,"tag":42,"props":43,"children":45},"docs-example",{"id":44},"core-containers-tag--neutral",[],{"type":17,"tag":47,"props":48,"children":50},"h3",{"id":49},"when-and-how-to-use",[51],{"type":23,"value":52},"When and how to use",{"type":17,"tag":54,"props":55,"children":56},"ul",{},[57,63,68],{"type":17,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Use keywords.",{"type":17,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Use to draw attention to a category of content or information.",{"type":17,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Use nouns or adjectives.",{"type":17,"tag":47,"props":74,"children":76},{"id":75},"when-and-how-not-to-use",[77],{"type":23,"value":78},"When and how not to use",{"type":17,"tag":54,"props":80,"children":81},{},[82,87,92,97,102,107],{"type":17,"tag":58,"props":83,"children":84},{},[85],{"type":23,"value":86},"Don't use punctuation.",{"type":17,"tag":58,"props":88,"children":89},{},[90],{"type":23,"value":91},"Don't overuse tags.",{"type":17,"tag":58,"props":93,"children":94},{},[95],{"type":23,"value":96},"Don't use icons in the tags.",{"type":17,"tag":58,"props":98,"children":99},{},[100],{"type":23,"value":101},"Don't use as a heading.",{"type":17,"tag":58,"props":103,"children":104},{},[105],{"type":23,"value":106},"Don't use more than 2 words.",{"type":17,"tag":58,"props":108,"children":109},{},[110],{"type":23,"value":111},"Don't use as a link or action.",{"type":17,"tag":113,"props":114,"children":115},"hr",{},[],{"type":17,"tag":18,"props":117,"children":119},{"id":118},"variants",[120],{"type":23,"value":121},"Variants",{"type":17,"tag":26,"props":123,"children":124},{},[125],{"type":23,"value":126},"Tags have 2 variants:",{"type":17,"tag":54,"props":128,"children":129},{},[130,135],{"type":17,"tag":58,"props":131,"children":132},{},[133],{"type":23,"value":134},"default, for use on neutral backgrounds",{"type":17,"tag":58,"props":136,"children":137},{},[138],{"type":23,"value":139},"neutral, for use on white backgrounds.",{"type":17,"tag":47,"props":141,"children":143},{"id":142},"default",[144],{"type":23,"value":145},"Default",{"type":17,"tag":42,"props":147,"children":149},{"id":148},"core-containers-tag--default-story",[],{"type":17,"tag":47,"props":151,"children":153},{"id":152},"neutral",[154],{"type":23,"value":155},"Neutral",{"type":17,"tag":26,"props":157,"children":158},{},[159],{"type":23,"value":160},"Use the reverse variant when the chip appears on the primary colour.",{"type":17,"tag":42,"props":162,"children":163},{"id":44},[],{"title":8,"searchDepth":165,"depth":165,"links":166},2,[167,172],{"id":20,"depth":165,"text":24,"children":168},[169,171],{"id":49,"depth":170,"text":52},3,{"id":75,"depth":170,"text":78},{"id":118,"depth":165,"text":121,"children":173},[174,175],{"id":142,"depth":170,"text":145},{"id":152,"depth":170,"text":155},"markdown","content:design-system:5.components:tag.md","content","design-system/5.components/tag.md","md",{"/design-system/components/tag":182},[183,189],{"_path":184,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":185,"description":186,"layout":11,"label":12,"_type":176,"_id":187,"_source":178,"_file":188,"_extension":180},"/design-system/components/tabs","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","content:design-system:5.components:tabs.md","design-system/5.components/tabs.md",{"_path":190,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":191,"description":192,"layout":11,"label":12,"_type":176,"_id":193,"_source":178,"_file":194,"_extension":180},"/design-system/components/text-area","Text area","The Text area component lets users select one option from a list.","content:design-system:5.components:text-area.md","design-system/5.components/text-area.md",{},[197,202,443],{"title":198,"_path":199,"icon":200,"layout":201},"Ripple Design System","/","carbon:home","home",{"title":203,"_path":204,"children":205},"Design System","/design-system",[206,222,238,267,301],{"title":207,"_path":208,"children":209},"About","/design-system/about",[210,213,216,219],{"title":211,"_path":212,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":214,"_path":215,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":217,"_path":218,"layout":11},"Support","/design-system/about/getting-support",{"title":220,"_path":221,"layout":11},"Contributing","/design-system/about/contributing",{"title":223,"_path":224,"children":225},"Design","/design-system/design",[226,229,232,235],{"title":227,"_path":228,"layout":11},"Getting started","/design-system/design/getting-started",{"title":230,"_path":231,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":233,"_path":234,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":236,"_path":237,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":239,"_path":240,"children":241},"Develop","/design-system/develop",[242,244,246,249],{"title":227,"_path":243,"layout":11},"/design-system/develop/getting-started",{"title":220,"_path":245,"layout":11},"/design-system/develop/contributing",{"title":247,"_path":248,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":24,"_path":250,"children":251,"layout":11},"/design-system/develop/usage",[252,255,258,261,264],{"title":253,"_path":254,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":256,"_path":257,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":259,"_path":260,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":262,"_path":263,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":265,"_path":266,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":268,"_path":269,"children":270},"Styles","/design-system/styles",[271,274,277,280,283,286,289,292,295,298],{"title":272,"_path":273,"layout":11},"Colour","/design-system/styles/colour",{"title":275,"_path":276,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":278,"_path":279,"layout":11},"Grid","/design-system/styles/grid",{"title":281,"_path":282,"layout":11},"Icons","/design-system/styles/icons",{"title":284,"_path":285,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":287,"_path":288,"layout":11},"Layout","/design-system/styles/layout",{"title":290,"_path":291,"layout":11},"Logo","/design-system/styles/logo",{"title":293,"_path":294,"layout":11},"Motion","/design-system/styles/motion",{"title":296,"_path":297,"layout":11},"Spacing","/design-system/styles/spacing",{"title":299,"_path":300,"layout":11},"Typography","/design-system/styles/typography",{"title":302,"_path":303,"children":304},"Components","/design-system/components",[305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,435,436,437,440],{"title":306,"_path":307,"layout":11},"Accordion","/design-system/components/accordion",{"title":309,"_path":310,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":312,"_path":313,"layout":11},"Alert","/design-system/components/alert",{"title":315,"_path":316,"layout":11},"Block quote","/design-system/components/block-quote",{"title":318,"_path":319,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":321,"_path":322,"layout":11},"Button","/design-system/components/button",{"title":324,"_path":325,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":327,"_path":328,"layout":11},"Callout","/design-system/components/callout",{"title":330,"_path":331,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":333,"_path":334,"layout":11},"Card","/design-system/components/card",{"title":336,"_path":337,"layout":11},"Carousel","/design-system/components/carousel",{"title":339,"_path":340,"layout":11},"Category grid","/design-system/components/category-grid",{"title":342,"_path":343,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":345,"_path":346,"layout":11},"Chip","/design-system/components/chip",{"title":348,"_path":349,"layout":11},"Contact us","/design-system/components/contact-us",{"title":351,"_path":352,"layout":11},"Date input","/design-system/components/date-input",{"title":354,"_path":355,"layout":11},"Detail list","/design-system/components/detail-list",{"title":357,"_path":358,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":360,"_path":361,"layout":11},"File","/design-system/components/file",{"title":363,"_path":364,"layout":11},"Footer","/design-system/components/footer",{"title":366,"_path":367,"layout":11},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":11},"Form","/design-system/components/form",{"title":372,"_path":373,"layout":11},"Header","/design-system/components/header",{"title":375,"_path":376,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":378,"_path":379,"layout":11},"Input field","/design-system/components/input-field",{"title":381,"_path":382,"layout":11},"Key dates","/design-system/components/key-dates",{"title":384,"_path":385,"layout":11},"Media embed","/design-system/components/media-embed",{"title":387,"_path":388,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":390,"_path":391,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":393,"_path":394,"layout":11},"Media","/design-system/components/media",{"title":396,"_path":397,"layout":11},"Option button","/design-system/components/option-button",{"title":399,"_path":400,"layout":11},"Page action","/design-system/components/page-action",{"title":402,"_path":403,"layout":11},"Pagination","/design-system/components/pagination",{"title":405,"_path":406,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":408,"_path":409,"layout":11},"Profile","/design-system/components/profile",{"title":411,"_path":412,"layout":11},"Radio button","/design-system/components/radio-button",{"title":414,"_path":415,"layout":11},"Related links","/design-system/components/related-links",{"title":417,"_path":418,"layout":11},"Results listing","/design-system/components/results-listing",{"title":420,"_path":421,"layout":11},"Search bar","/design-system/components/search-bar",{"title":423,"_path":424,"layout":11},"Skip link","/design-system/components/skip-link",{"title":426,"_path":427,"layout":11},"Social share","/design-system/components/social-share",{"title":429,"_path":430,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":432,"_path":433,"layout":11},"Table","/design-system/components/table",{"title":185,"_path":184,"layout":11},{"title":9,"_path":5,"layout":11},{"title":191,"_path":190,"layout":11},{"title":438,"_path":439,"layout":11},"Timeline","/design-system/components/timeline",{"title":441,"_path":442,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":444,"_path":445,"children":446,"layout":11},"Ripple Framework","/framework",[447,448,466,488],{"title":444,"_path":445,"layout":11},{"title":449,"_path":450,"children":451},"Key Concepts","/framework/key-concepts",[452,454,457,460,463],{"title":259,"_path":453,"layout":11},"/framework/key-concepts/nuxt",{"title":455,"_path":456,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":458,"_path":459,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":461,"_path":462,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":464,"_path":465,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":467,"_path":468,"children":469},"Guides","/framework/guides",[470,473,476,479,482,485],{"title":471,"_path":472,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":474,"_path":475,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":477,"_path":478,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":480,"_path":481,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":483,"_path":484,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":486,"_path":487,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":489,"_path":490,"layout":11},"Core modules","/framework/core-modules",["Reactive",492],{"module-navigation":493},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/text-area/index.html b/design-system/components/text-area/index.html index b124c814cf..0ccb3b98f5 100644 --- a/design-system/components/text-area/index.html +++ b/design-system/components/text-area/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Text area</h1><p class="rpl-type-p-large" data-v-3163c6df>The Text area component lets users select one option from a list.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use text area so users can enter multiple lines of text.<!--]--></p><p><!--[-->Text area is used when information longer than a single line of text is needed or expected. For example, comments fields.<!--]--></p><p><!--[-->Text areas can be resized and can be used with a character counter.<!--]--></p><p><!--[-->Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->You must use a form label with a text area component.<!--]--></p><p><!--[-->You can use text area with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->metadata<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><p><!--[-->Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px.<!--]--></p><h4 id="resize-handle"><a href="#resize-handle"><!--[-->Resize handle<!--]--></a></h4><p><!--[-->Users can change the text area height (but not width) with the resize handle. They can also scroll within the container.<!--]--></p><h4 id="avoid-placeholder-text"><a href="#avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></a></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a text area.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the text area<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 id="character-count"><a href="#character-count"><!--[-->Character count<!--]--></a></h4><p><!--[-->A character count can sit below the text area field. It tells users the maximum characters and their input’s current count.<!--]--></p><p><!--[-->Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer.<!--]--></p><p><!--[-->Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters.<!--]--></p><p><!--[-->Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always use a label for text areas.<!--]--></li><li><!--[-->Use hint text to specify helpful information such as specific formatting or information requirements.<!--]--></li><li><!--[-->Specify character counts when required.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use without a label<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t set a minimum or maximum input limit without explicitly saying this in the character count.<!--]--></li><li><!--[-->Do not use hint text if it isn’t relevant or meaningful to the user.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The text area has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for an input field, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: empty input<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Enter [the missing information]'.<!--]--></li><li><!--[-->Example: 'Enter your name'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or less'.<!--]--></li><li><!--[-->Example: 'Delivery address must be 56 characters or less'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or more'.<!--]--></li><li><!--[-->Example: 'Previous employer must be 3 characters or more'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long or to short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be between [number] and [number] characters'.<!--]--></li><li><!--[-->Example: 'Justification must be between 3 and 56 characters'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must not include [characters]'.<!--]--></li><li><!--[-->Example: ‘Reasons must not include + & ~'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must only include [list of allowed characters]'.<!--]--></li><li><!--[-->Example: ‘Explanations must only include letters, numbers and commas'.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/text-area.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/text-area/_payload.json">[{"state":1,"_errors":849,"serverRendered":852,"path":853,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":541,"$sdd-globals":555,"$sdd-navigation":556},{"/design-system/components/text-area":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":536,"_id":537,"_source":538,"_file":539,"_extension":540},"/design-system/components/text-area","components",false,"","Text area","The Text area component lets users select one option from a list.","page","Core",{"type":14,"children":15,"toc":520},"root",[16,25,31,36,41,46,51,58,63,68,93,98,105,110,116,121,126,132,137,142,160,165,171,176,181,186,191,197,215,221,259,263,269,274,287,293,296,302,306,312,317,322,327,336,349,357,370,378,391,399,412,420,433,441,454,458,461,467,472,479,501,504,510,515],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use text area so users can enter multiple lines of text.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Text area is used when information longer than a single line of text is needed or expected. For example, comments fields.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Text areas can be resized and can be used with a character counter.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"forms-textarea--default-story",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"how-this-component-works",[56],{"type":23,"value":57},"How this component works",{"type":17,"tag":26,"props":59,"children":60},{},[61],{"type":23,"value":62},"You must use a form label with a text area component.",{"type":17,"tag":26,"props":64,"children":65},{},[66],{"type":23,"value":67},"You can use text area with:",{"type":17,"tag":69,"props":70,"children":71},"ul",{},[72,78,83,88],{"type":17,"tag":73,"props":74,"children":75},"li",{},[76],{"type":23,"value":77},"requirement label",{"type":17,"tag":73,"props":79,"children":80},{},[81],{"type":23,"value":82},"hint text",{"type":17,"tag":73,"props":84,"children":85},{},[86],{"type":23,"value":87},"metadata",{"type":17,"tag":73,"props":89,"children":90},{},[91],{"type":23,"value":92},"placeholder text.",{"type":17,"tag":26,"props":94,"children":95},{},[96],{"type":23,"value":97},"Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px.",{"type":17,"tag":99,"props":100,"children":102},"h4",{"id":101},"resize-handle",[103],{"type":23,"value":104},"Resize handle",{"type":17,"tag":26,"props":106,"children":107},{},[108],{"type":23,"value":109},"Users can change the text area height (but not width) with the resize handle. They can also scroll within the container.",{"type":17,"tag":99,"props":111,"children":113},{"id":112},"avoid-placeholder-text",[114],{"type":23,"value":115},"Avoid placeholder text",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":122,"children":123},{},[124],{"type":23,"value":125},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":17,"tag":99,"props":127,"children":129},{"id":128},"hint-text",[130],{"type":23,"value":131},"Hint text",{"type":17,"tag":26,"props":133,"children":134},{},[135],{"type":23,"value":136},"Hint text can be used to tell the user what, or how, to successfully complete a text area.",{"type":17,"tag":26,"props":138,"children":139},{},[140],{"type":23,"value":141},"For example, hint text can include:",{"type":17,"tag":69,"props":143,"children":144},{},[145,150,155],{"type":17,"tag":73,"props":146,"children":147},{},[148],{"type":23,"value":149},"an overall description of the text area",{"type":17,"tag":73,"props":151,"children":152},{},[153],{"type":23,"value":154},"hints for what kind of information needs to be input",{"type":17,"tag":73,"props":156,"children":157},{},[158],{"type":23,"value":159},"specific formatting examples or requirements.",{"type":17,"tag":26,"props":161,"children":162},{},[163],{"type":23,"value":164},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":99,"props":166,"children":168},{"id":167},"character-count",[169],{"type":23,"value":170},"Character count",{"type":17,"tag":26,"props":172,"children":173},{},[174],{"type":23,"value":175},"A character count can sit below the text area field. It tells users the maximum characters and their input’s current count.",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer.",{"type":17,"tag":26,"props":182,"children":183},{},[184],{"type":23,"value":185},"Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters.",{"type":17,"tag":26,"props":187,"children":188},{},[189],{"type":23,"value":190},"Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed.",{"type":17,"tag":52,"props":192,"children":194},{"id":193},"when-and-how-to-use",[195],{"type":23,"value":196},"When and how to use",{"type":17,"tag":69,"props":198,"children":199},{},[200,205,210],{"type":17,"tag":73,"props":201,"children":202},{},[203],{"type":23,"value":204},"Always use a label for text areas.",{"type":17,"tag":73,"props":206,"children":207},{},[208],{"type":23,"value":209},"Use hint text to specify helpful information such as specific formatting or information requirements.",{"type":17,"tag":73,"props":211,"children":212},{},[213],{"type":23,"value":214},"Specify character counts when required.",{"type":17,"tag":52,"props":216,"children":218},{"id":217},"when-and-how-not-to-use",[219],{"type":23,"value":220},"When and how not to use",{"type":17,"tag":69,"props":222,"children":223},{},[224,229,234,239,244,249,254],{"type":17,"tag":73,"props":225,"children":226},{},[227],{"type":23,"value":228},"Never use without a label",{"type":17,"tag":73,"props":230,"children":231},{},[232],{"type":23,"value":233},"Avoid placeholder text because it can cause accessibility issues.",{"type":17,"tag":73,"props":235,"children":236},{},[237],{"type":23,"value":238},"Don’t disable copy and paste.",{"type":17,"tag":73,"props":240,"children":241},{},[242],{"type":23,"value":243},"Don’t set a minimum or maximum input limit without explicitly saying this in the character count.",{"type":17,"tag":73,"props":245,"children":246},{},[247],{"type":23,"value":248},"Do not use hint text if it isn’t relevant or meaningful to the user.",{"type":17,"tag":73,"props":250,"children":251},{},[252],{"type":23,"value":253},"Don’t use placeholder text to give instructions.",{"type":17,"tag":73,"props":255,"children":256},{},[257],{"type":23,"value":258},"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.",{"type":17,"tag":260,"props":261,"children":262},"hr",{},[],{"type":17,"tag":18,"props":264,"children":266},{"id":265},"variants",[267],{"type":23,"value":268},"Variants",{"type":17,"tag":26,"props":270,"children":271},{},[272],{"type":23,"value":273},"The text area has 2 variants:",{"type":17,"tag":69,"props":275,"children":276},{},[277,282],{"type":17,"tag":73,"props":278,"children":279},{},[280],{"type":23,"value":281},"default, used on white backgrounds",{"type":17,"tag":73,"props":283,"children":284},{},[285],{"type":23,"value":286},"reverse, used on neutral backgrounds.",{"type":17,"tag":52,"props":288,"children":290},{"id":289},"default",[291],{"type":23,"value":292},"Default",{"type":17,"tag":47,"props":294,"children":295},{"id":49},[],{"type":17,"tag":52,"props":297,"children":299},{"id":298},"reverse",[300],{"type":23,"value":301},"Reverse",{"type":17,"tag":47,"props":303,"children":305},{"id":304},"forms-textarea--reverse",[],{"type":17,"tag":52,"props":307,"children":309},{"id":308},"error",[310],{"type":23,"value":311},"Error",{"type":17,"tag":26,"props":313,"children":314},{},[315],{"type":23,"value":316},"All form inputs share error state styling.",{"type":17,"tag":26,"props":318,"children":319},{},[320],{"type":23,"value":321},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":323,"children":324},{},[325],{"type":23,"value":326},"When creating an error message for an input field, use the wording below.",{"type":17,"tag":26,"props":328,"children":329},{},[330],{"type":17,"tag":331,"props":332,"children":333},"strong",{},[334],{"type":23,"value":335},"Error: empty input",{"type":17,"tag":69,"props":337,"children":338},{},[339,344],{"type":17,"tag":73,"props":340,"children":341},{},[342],{"type":23,"value":343},"Error message: ‘Enter [the missing information]'.",{"type":17,"tag":73,"props":345,"children":346},{},[347],{"type":23,"value":348},"Example: 'Enter your name'.",{"type":17,"tag":26,"props":350,"children":351},{},[352],{"type":17,"tag":331,"props":353,"children":354},{},[355],{"type":23,"value":356},"Error: input is too long",{"type":17,"tag":69,"props":358,"children":359},{},[360,365],{"type":17,"tag":73,"props":361,"children":362},{},[363],{"type":23,"value":364},"Error message: ‘[The input] must be [number] characters or less'.",{"type":17,"tag":73,"props":366,"children":367},{},[368],{"type":23,"value":369},"Example: 'Delivery address must be 56 characters or less'.",{"type":17,"tag":26,"props":371,"children":372},{},[373],{"type":17,"tag":331,"props":374,"children":375},{},[376],{"type":23,"value":377},"Error: input is too short",{"type":17,"tag":69,"props":379,"children":380},{},[381,386],{"type":17,"tag":73,"props":382,"children":383},{},[384],{"type":23,"value":385},"Error message: ‘[The input] must be [number] characters or more'.",{"type":17,"tag":73,"props":387,"children":388},{},[389],{"type":23,"value":390},"Example: 'Previous employer must be 3 characters or more'.",{"type":17,"tag":26,"props":392,"children":393},{},[394],{"type":17,"tag":331,"props":395,"children":396},{},[397],{"type":23,"value":398},"Error: input is too long or to short",{"type":17,"tag":69,"props":400,"children":401},{},[402,407],{"type":17,"tag":73,"props":403,"children":404},{},[405],{"type":23,"value":406},"Error message: ‘[The input] must be between [number] and [number] characters'.",{"type":17,"tag":73,"props":408,"children":409},{},[410],{"type":23,"value":411},"Example: 'Justification must be between 3 and 56 characters'.",{"type":17,"tag":26,"props":413,"children":414},{},[415],{"type":17,"tag":331,"props":416,"children":417},{},[418],{"type":23,"value":419},"Error: input uses known characters that aren’t allowed",{"type":17,"tag":69,"props":421,"children":422},{},[423,428],{"type":17,"tag":73,"props":424,"children":425},{},[426],{"type":23,"value":427},"Error message: ‘[The input] must not include [characters]'.",{"type":17,"tag":73,"props":429,"children":430},{},[431],{"type":23,"value":432},"Example: ‘Reasons must not include + & ~'.",{"type":17,"tag":26,"props":434,"children":435},{},[436],{"type":17,"tag":331,"props":437,"children":438},{},[439],{"type":23,"value":440},"Error: input uses unknown characters that aren’t allowed",{"type":17,"tag":69,"props":442,"children":443},{},[444,449],{"type":17,"tag":73,"props":445,"children":446},{},[447],{"type":23,"value":448},"Error message: ‘[The input] must only include [list of allowed characters]'.",{"type":17,"tag":73,"props":450,"children":451},{},[452],{"type":23,"value":453},"Example: ‘Explanations must only include letters, numbers and commas'.",{"type":17,"tag":47,"props":455,"children":457},{"id":456},"forms-textarea--error",[],{"type":17,"tag":260,"props":459,"children":460},{},[],{"type":17,"tag":18,"props":462,"children":464},{"id":463},"theming",[465],{"type":23,"value":466},"Theming",{"type":17,"tag":26,"props":468,"children":469},{},[470],{"type":23,"value":471},"Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":473,"props":474,"children":475},"docs-theme-chooser",{},[476],{"type":17,"tag":47,"props":477,"children":478},{"id":49},[],{"type":17,"tag":26,"props":480,"children":481},{},[482,484,491,493,499],{"type":23,"value":483},"To create your own theme see ",{"type":17,"tag":485,"props":486,"children":488},"a",{"href":487},"/design-system/design/theming-guidance-for-designers",[489],{"type":23,"value":490},"theming guidance for designers",{"type":23,"value":492}," or ",{"type":17,"tag":485,"props":494,"children":496},{"href":495},"/design-system/develop/theming",[497],{"type":23,"value":498},"theming guidance for developers",{"type":23,"value":500},".",{"type":17,"tag":260,"props":502,"children":503},{},[],{"type":17,"tag":18,"props":505,"children":507},{"id":506},"rationale",[508],{"type":23,"value":509},"Rationale",{"type":17,"tag":26,"props":511,"children":512},{},[513],{"type":23,"value":514},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":516,"children":517},{},[518],{"type":23,"value":519},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":521,"depth":521,"links":522},2,[523,529,534,535],{"id":20,"depth":521,"text":24,"children":524},[525,527,528],{"id":54,"depth":526,"text":57},3,{"id":193,"depth":526,"text":196},{"id":217,"depth":526,"text":220},{"id":265,"depth":521,"text":268,"children":530},[531,532,533],{"id":289,"depth":526,"text":292},{"id":298,"depth":526,"text":301},{"id":308,"depth":526,"text":311},{"id":463,"depth":521,"text":466},{"id":506,"depth":521,"text":509},"markdown","content:design-system:5.components:text-area.md","content","design-system/5.components/text-area.md","md",{"/design-system/components/text-area":542},[543,549],{"_path":544,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":545,"description":546,"layout":11,"label":12,"_type":536,"_id":547,"_source":538,"_file":548,"_extension":540},"/design-system/components/tag","Tag","The Tag component adds, and draws attention to, a category name for your content.","content:design-system:5.components:tag.md","design-system/5.components/tag.md",{"_path":550,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":551,"description":552,"layout":11,"label":12,"_type":536,"_id":553,"_source":538,"_file":554,"_extension":540},"/design-system/components/timeline","Timeline","The Timeline component contains blocks of content displayed in a linear order.","content:design-system:5.components:timeline.md","design-system/5.components/timeline.md",{},[557,562,801],{"title":558,"_path":559,"icon":560,"layout":561},"Ripple Design System","/","carbon:home","home",{"title":563,"_path":564,"children":565},"Design System","/design-system",[566,582,597,625,659],{"title":567,"_path":568,"children":569},"About","/design-system/about",[570,573,576,579],{"title":571,"_path":572,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":574,"_path":575,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":577,"_path":578,"layout":11},"Support","/design-system/about/getting-support",{"title":580,"_path":581,"layout":11},"Contributing","/design-system/about/contributing",{"title":583,"_path":584,"children":585},"Design","/design-system/design",[586,589,592,595],{"title":587,"_path":588,"layout":11},"Getting started","/design-system/design/getting-started",{"title":590,"_path":591,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":593,"_path":594,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":596,"_path":487,"layout":11},"Theming guidance for designers",{"title":598,"_path":599,"children":600},"Develop","/design-system/develop",[601,603,605,607],{"title":587,"_path":602,"layout":11},"/design-system/develop/getting-started",{"title":580,"_path":604,"layout":11},"/design-system/develop/contributing",{"title":606,"_path":495,"layout":11},"Theme and brand application",{"title":24,"_path":608,"children":609,"layout":11},"/design-system/develop/usage",[610,613,616,619,622],{"title":611,"_path":612,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":614,"_path":615,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":617,"_path":618,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":620,"_path":621,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":623,"_path":624,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":626,"_path":627,"children":628},"Styles","/design-system/styles",[629,632,635,638,641,644,647,650,653,656],{"title":630,"_path":631,"layout":11},"Colour","/design-system/styles/colour",{"title":633,"_path":634,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":636,"_path":637,"layout":11},"Grid","/design-system/styles/grid",{"title":639,"_path":640,"layout":11},"Icons","/design-system/styles/icons",{"title":642,"_path":643,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":645,"_path":646,"layout":11},"Layout","/design-system/styles/layout",{"title":648,"_path":649,"layout":11},"Logo","/design-system/styles/logo",{"title":651,"_path":652,"layout":11},"Motion","/design-system/styles/motion",{"title":654,"_path":655,"layout":11},"Spacing","/design-system/styles/spacing",{"title":657,"_path":658,"layout":11},"Typography","/design-system/styles/typography",{"title":660,"_path":661,"children":662},"Components","/design-system/components",[663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,789,792,795,796,797,798],{"title":664,"_path":665,"layout":11},"Accordion","/design-system/components/accordion",{"title":667,"_path":668,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":670,"_path":671,"layout":11},"Alert","/design-system/components/alert",{"title":673,"_path":674,"layout":11},"Block quote","/design-system/components/block-quote",{"title":676,"_path":677,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":679,"_path":680,"layout":11},"Button","/design-system/components/button",{"title":682,"_path":683,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":685,"_path":686,"layout":11},"Callout","/design-system/components/callout",{"title":688,"_path":689,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":691,"_path":692,"layout":11},"Card","/design-system/components/card",{"title":694,"_path":695,"layout":11},"Carousel","/design-system/components/carousel",{"title":697,"_path":698,"layout":11},"Category grid","/design-system/components/category-grid",{"title":700,"_path":701,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":703,"_path":704,"layout":11},"Chip","/design-system/components/chip",{"title":706,"_path":707,"layout":11},"Contact us","/design-system/components/contact-us",{"title":709,"_path":710,"layout":11},"Date input","/design-system/components/date-input",{"title":712,"_path":713,"layout":11},"Detail list","/design-system/components/detail-list",{"title":715,"_path":716,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":718,"_path":719,"layout":11},"File","/design-system/components/file",{"title":721,"_path":722,"layout":11},"Footer","/design-system/components/footer",{"title":724,"_path":725,"layout":11},"Form alert","/design-system/components/form-alert",{"title":727,"_path":728,"layout":11},"Form","/design-system/components/form",{"title":730,"_path":731,"layout":11},"Header","/design-system/components/header",{"title":733,"_path":734,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":736,"_path":737,"layout":11},"Input field","/design-system/components/input-field",{"title":739,"_path":740,"layout":11},"Key dates","/design-system/components/key-dates",{"title":742,"_path":743,"layout":11},"Media embed","/design-system/components/media-embed",{"title":745,"_path":746,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":748,"_path":749,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":751,"_path":752,"layout":11},"Media","/design-system/components/media",{"title":754,"_path":755,"layout":11},"Option button","/design-system/components/option-button",{"title":757,"_path":758,"layout":11},"Page action","/design-system/components/page-action",{"title":760,"_path":761,"layout":11},"Pagination","/design-system/components/pagination",{"title":763,"_path":764,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":766,"_path":767,"layout":11},"Profile","/design-system/components/profile",{"title":769,"_path":770,"layout":11},"Radio button","/design-system/components/radio-button",{"title":772,"_path":773,"layout":11},"Related links","/design-system/components/related-links",{"title":775,"_path":776,"layout":11},"Results listing","/design-system/components/results-listing",{"title":778,"_path":779,"layout":11},"Search bar","/design-system/components/search-bar",{"title":781,"_path":782,"layout":11},"Skip link","/design-system/components/skip-link",{"title":784,"_path":785,"layout":11},"Social share","/design-system/components/social-share",{"title":787,"_path":788,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":790,"_path":791,"layout":11},"Table","/design-system/components/table",{"title":793,"_path":794,"layout":11},"Tabs","/design-system/components/tabs",{"title":545,"_path":544,"layout":11},{"title":9,"_path":5,"layout":11},{"title":551,"_path":550,"layout":11},{"title":799,"_path":800,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":802,"_path":803,"children":804,"layout":11},"Ripple Framework","/framework",[805,806,824,846],{"title":802,"_path":803,"layout":11},{"title":807,"_path":808,"children":809},"Key Concepts","/framework/key-concepts",[810,812,815,818,821],{"title":617,"_path":811,"layout":11},"/framework/key-concepts/nuxt",{"title":813,"_path":814,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":816,"_path":817,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":819,"_path":820,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":822,"_path":823,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":825,"_path":826,"children":827},"Guides","/framework/guides",[828,831,834,837,840,843],{"title":829,"_path":830,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":832,"_path":833,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":835,"_path":836,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":838,"_path":839,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":841,"_path":842,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":844,"_path":845,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":847,"_path":848,"layout":11},"Core modules","/framework/core-modules",["Reactive",850],{"module-navigation":851},null,true,"/design-system/components/text-area/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Text area</h1><p class="rpl-type-p-large" data-v-3163c6df>The Text area component lets users select one option from a list.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use text area so users can enter multiple lines of text.<!--]--></p><p><!--[-->Text area is used when information longer than a single line of text is needed or expected. For example, comments fields.<!--]--></p><p><!--[-->Text areas can be resized and can be used with a character counter.<!--]--></p><p><!--[-->Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="how-this-component-works"><a href="#how-this-component-works"><!--[-->How this component works<!--]--></a></h3><p><!--[-->You must use a form label with a text area component.<!--]--></p><p><!--[-->You can use text area with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->metadata<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><p><!--[-->Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px.<!--]--></p><h4 id="resize-handle"><a href="#resize-handle"><!--[-->Resize handle<!--]--></a></h4><p><!--[-->Users can change the text area height (but not width) with the resize handle. They can also scroll within the container.<!--]--></p><h4 id="avoid-placeholder-text"><a href="#avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></a></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 id="hint-text"><a href="#hint-text"><!--[-->Hint text<!--]--></a></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a text area.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the text area<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 id="character-count"><a href="#character-count"><!--[-->Character count<!--]--></a></h4><p><!--[-->A character count can sit below the text area field. It tells users the maximum characters and their input’s current count.<!--]--></p><p><!--[-->Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer.<!--]--></p><p><!--[-->Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters.<!--]--></p><p><!--[-->Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed.<!--]--></p><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always use a label for text areas.<!--]--></li><li><!--[-->Use hint text to specify helpful information such as specific formatting or information requirements.<!--]--></li><li><!--[-->Specify character counts when required.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Never use without a label<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t set a minimum or maximum input limit without explicitly saying this in the character count.<!--]--></li><li><!--[-->Do not use hint text if it isn’t relevant or meaningful to the user.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->The text area has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="reverse"><a href="#reverse"><!--[-->Reverse<!--]--></a></h3><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--reverse&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="error"><a href="#error"><!--[-->Error<!--]--></a></h3><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for an input field, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: empty input<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Enter [the missing information]'.<!--]--></li><li><!--[-->Example: 'Enter your name'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or less'.<!--]--></li><li><!--[-->Example: 'Delivery address must be 56 characters or less'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or more'.<!--]--></li><li><!--[-->Example: 'Previous employer must be 3 characters or more'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long or to short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be between [number] and [number] characters'.<!--]--></li><li><!--[-->Example: 'Justification must be between 3 and 56 characters'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must not include [characters]'.<!--]--></li><li><!--[-->Example: ‘Reasons must not include + & ~'.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must only include [list of allowed characters]'.<!--]--></li><li><!--[-->Example: ‘Explanations must only include letters, numbers and commas'.<!--]--></li><!--]--></ul><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--error&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=forms-textarea--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/text-area.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/text-area/_payload.json">[{"state":1,"_errors":849,"serverRendered":852,"path":853,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":541,"$sdd-globals":555,"$sdd-navigation":556},{"/design-system/components/text-area":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":536,"_id":537,"_source":538,"_file":539,"_extension":540},"/design-system/components/text-area","components",false,"","Text area","The Text area component lets users select one option from a list.","page","Core",{"type":14,"children":15,"toc":520},"root",[16,25,31,36,41,46,51,58,63,68,93,98,105,110,116,121,126,132,137,142,160,165,171,176,181,186,191,197,215,221,259,263,269,274,287,293,296,302,306,312,317,322,327,336,349,357,370,378,391,399,412,420,433,441,454,458,461,467,472,479,501,504,510,515],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use text area so users can enter multiple lines of text.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Text area is used when information longer than a single line of text is needed or expected. For example, comments fields.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"Text areas can be resized and can be used with a character counter.",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component.",{"type":17,"tag":47,"props":48,"children":50},"docs-example",{"id":49},"forms-textarea--default-story",[],{"type":17,"tag":52,"props":53,"children":55},"h3",{"id":54},"how-this-component-works",[56],{"type":23,"value":57},"How this component works",{"type":17,"tag":26,"props":59,"children":60},{},[61],{"type":23,"value":62},"You must use a form label with a text area component.",{"type":17,"tag":26,"props":64,"children":65},{},[66],{"type":23,"value":67},"You can use text area with:",{"type":17,"tag":69,"props":70,"children":71},"ul",{},[72,78,83,88],{"type":17,"tag":73,"props":74,"children":75},"li",{},[76],{"type":23,"value":77},"requirement label",{"type":17,"tag":73,"props":79,"children":80},{},[81],{"type":23,"value":82},"hint text",{"type":17,"tag":73,"props":84,"children":85},{},[86],{"type":23,"value":87},"metadata",{"type":17,"tag":73,"props":89,"children":90},{},[91],{"type":23,"value":92},"placeholder text.",{"type":17,"tag":26,"props":94,"children":95},{},[96],{"type":23,"value":97},"Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px.",{"type":17,"tag":99,"props":100,"children":102},"h4",{"id":101},"resize-handle",[103],{"type":23,"value":104},"Resize handle",{"type":17,"tag":26,"props":106,"children":107},{},[108],{"type":23,"value":109},"Users can change the text area height (but not width) with the resize handle. They can also scroll within the container.",{"type":17,"tag":99,"props":111,"children":113},{"id":112},"avoid-placeholder-text",[114],{"type":23,"value":115},"Avoid placeholder text",{"type":17,"tag":26,"props":117,"children":118},{},[119],{"type":23,"value":120},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":17,"tag":26,"props":122,"children":123},{},[124],{"type":23,"value":125},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":17,"tag":99,"props":127,"children":129},{"id":128},"hint-text",[130],{"type":23,"value":131},"Hint text",{"type":17,"tag":26,"props":133,"children":134},{},[135],{"type":23,"value":136},"Hint text can be used to tell the user what, or how, to successfully complete a text area.",{"type":17,"tag":26,"props":138,"children":139},{},[140],{"type":23,"value":141},"For example, hint text can include:",{"type":17,"tag":69,"props":143,"children":144},{},[145,150,155],{"type":17,"tag":73,"props":146,"children":147},{},[148],{"type":23,"value":149},"an overall description of the text area",{"type":17,"tag":73,"props":151,"children":152},{},[153],{"type":23,"value":154},"hints for what kind of information needs to be input",{"type":17,"tag":73,"props":156,"children":157},{},[158],{"type":23,"value":159},"specific formatting examples or requirements.",{"type":17,"tag":26,"props":161,"children":162},{},[163],{"type":23,"value":164},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":17,"tag":99,"props":166,"children":168},{"id":167},"character-count",[169],{"type":23,"value":170},"Character count",{"type":17,"tag":26,"props":172,"children":173},{},[174],{"type":23,"value":175},"A character count can sit below the text area field. It tells users the maximum characters and their input’s current count.",{"type":17,"tag":26,"props":177,"children":178},{},[179],{"type":23,"value":180},"Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer.",{"type":17,"tag":26,"props":182,"children":183},{},[184],{"type":23,"value":185},"Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters.",{"type":17,"tag":26,"props":187,"children":188},{},[189],{"type":23,"value":190},"Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed.",{"type":17,"tag":52,"props":192,"children":194},{"id":193},"when-and-how-to-use",[195],{"type":23,"value":196},"When and how to use",{"type":17,"tag":69,"props":198,"children":199},{},[200,205,210],{"type":17,"tag":73,"props":201,"children":202},{},[203],{"type":23,"value":204},"Always use a label for text areas.",{"type":17,"tag":73,"props":206,"children":207},{},[208],{"type":23,"value":209},"Use hint text to specify helpful information such as specific formatting or information requirements.",{"type":17,"tag":73,"props":211,"children":212},{},[213],{"type":23,"value":214},"Specify character counts when required.",{"type":17,"tag":52,"props":216,"children":218},{"id":217},"when-and-how-not-to-use",[219],{"type":23,"value":220},"When and how not to use",{"type":17,"tag":69,"props":222,"children":223},{},[224,229,234,239,244,249,254],{"type":17,"tag":73,"props":225,"children":226},{},[227],{"type":23,"value":228},"Never use without a label",{"type":17,"tag":73,"props":230,"children":231},{},[232],{"type":23,"value":233},"Avoid placeholder text because it can cause accessibility issues.",{"type":17,"tag":73,"props":235,"children":236},{},[237],{"type":23,"value":238},"Don’t disable copy and paste.",{"type":17,"tag":73,"props":240,"children":241},{},[242],{"type":23,"value":243},"Don’t set a minimum or maximum input limit without explicitly saying this in the character count.",{"type":17,"tag":73,"props":245,"children":246},{},[247],{"type":23,"value":248},"Do not use hint text if it isn’t relevant or meaningful to the user.",{"type":17,"tag":73,"props":250,"children":251},{},[252],{"type":23,"value":253},"Don’t use placeholder text to give instructions.",{"type":17,"tag":73,"props":255,"children":256},{},[257],{"type":23,"value":258},"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.",{"type":17,"tag":260,"props":261,"children":262},"hr",{},[],{"type":17,"tag":18,"props":264,"children":266},{"id":265},"variants",[267],{"type":23,"value":268},"Variants",{"type":17,"tag":26,"props":270,"children":271},{},[272],{"type":23,"value":273},"The text area has 2 variants:",{"type":17,"tag":69,"props":275,"children":276},{},[277,282],{"type":17,"tag":73,"props":278,"children":279},{},[280],{"type":23,"value":281},"default, used on white backgrounds",{"type":17,"tag":73,"props":283,"children":284},{},[285],{"type":23,"value":286},"reverse, used on neutral backgrounds.",{"type":17,"tag":52,"props":288,"children":290},{"id":289},"default",[291],{"type":23,"value":292},"Default",{"type":17,"tag":47,"props":294,"children":295},{"id":49},[],{"type":17,"tag":52,"props":297,"children":299},{"id":298},"reverse",[300],{"type":23,"value":301},"Reverse",{"type":17,"tag":47,"props":303,"children":305},{"id":304},"forms-textarea--reverse",[],{"type":17,"tag":52,"props":307,"children":309},{"id":308},"error",[310],{"type":23,"value":311},"Error",{"type":17,"tag":26,"props":313,"children":314},{},[315],{"type":23,"value":316},"All form inputs share error state styling.",{"type":17,"tag":26,"props":318,"children":319},{},[320],{"type":23,"value":321},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":17,"tag":26,"props":323,"children":324},{},[325],{"type":23,"value":326},"When creating an error message for an input field, use the wording below.",{"type":17,"tag":26,"props":328,"children":329},{},[330],{"type":17,"tag":331,"props":332,"children":333},"strong",{},[334],{"type":23,"value":335},"Error: empty input",{"type":17,"tag":69,"props":337,"children":338},{},[339,344],{"type":17,"tag":73,"props":340,"children":341},{},[342],{"type":23,"value":343},"Error message: ‘Enter [the missing information]'.",{"type":17,"tag":73,"props":345,"children":346},{},[347],{"type":23,"value":348},"Example: 'Enter your name'.",{"type":17,"tag":26,"props":350,"children":351},{},[352],{"type":17,"tag":331,"props":353,"children":354},{},[355],{"type":23,"value":356},"Error: input is too long",{"type":17,"tag":69,"props":358,"children":359},{},[360,365],{"type":17,"tag":73,"props":361,"children":362},{},[363],{"type":23,"value":364},"Error message: ‘[The input] must be [number] characters or less'.",{"type":17,"tag":73,"props":366,"children":367},{},[368],{"type":23,"value":369},"Example: 'Delivery address must be 56 characters or less'.",{"type":17,"tag":26,"props":371,"children":372},{},[373],{"type":17,"tag":331,"props":374,"children":375},{},[376],{"type":23,"value":377},"Error: input is too short",{"type":17,"tag":69,"props":379,"children":380},{},[381,386],{"type":17,"tag":73,"props":382,"children":383},{},[384],{"type":23,"value":385},"Error message: ‘[The input] must be [number] characters or more'.",{"type":17,"tag":73,"props":387,"children":388},{},[389],{"type":23,"value":390},"Example: 'Previous employer must be 3 characters or more'.",{"type":17,"tag":26,"props":392,"children":393},{},[394],{"type":17,"tag":331,"props":395,"children":396},{},[397],{"type":23,"value":398},"Error: input is too long or to short",{"type":17,"tag":69,"props":400,"children":401},{},[402,407],{"type":17,"tag":73,"props":403,"children":404},{},[405],{"type":23,"value":406},"Error message: ‘[The input] must be between [number] and [number] characters'.",{"type":17,"tag":73,"props":408,"children":409},{},[410],{"type":23,"value":411},"Example: 'Justification must be between 3 and 56 characters'.",{"type":17,"tag":26,"props":413,"children":414},{},[415],{"type":17,"tag":331,"props":416,"children":417},{},[418],{"type":23,"value":419},"Error: input uses known characters that aren’t allowed",{"type":17,"tag":69,"props":421,"children":422},{},[423,428],{"type":17,"tag":73,"props":424,"children":425},{},[426],{"type":23,"value":427},"Error message: ‘[The input] must not include [characters]'.",{"type":17,"tag":73,"props":429,"children":430},{},[431],{"type":23,"value":432},"Example: ‘Reasons must not include + & ~'.",{"type":17,"tag":26,"props":434,"children":435},{},[436],{"type":17,"tag":331,"props":437,"children":438},{},[439],{"type":23,"value":440},"Error: input uses unknown characters that aren’t allowed",{"type":17,"tag":69,"props":442,"children":443},{},[444,449],{"type":17,"tag":73,"props":445,"children":446},{},[447],{"type":23,"value":448},"Error message: ‘[The input] must only include [list of allowed characters]'.",{"type":17,"tag":73,"props":450,"children":451},{},[452],{"type":23,"value":453},"Example: ‘Explanations must only include letters, numbers and commas'.",{"type":17,"tag":47,"props":455,"children":457},{"id":456},"forms-textarea--error",[],{"type":17,"tag":260,"props":459,"children":460},{},[],{"type":17,"tag":18,"props":462,"children":464},{"id":463},"theming",[465],{"type":23,"value":466},"Theming",{"type":17,"tag":26,"props":468,"children":469},{},[470],{"type":23,"value":471},"Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state.",{"type":17,"tag":473,"props":474,"children":475},"docs-theme-chooser",{},[476],{"type":17,"tag":47,"props":477,"children":478},{"id":49},[],{"type":17,"tag":26,"props":480,"children":481},{},[482,484,491,493,499],{"type":23,"value":483},"To create your own theme see ",{"type":17,"tag":485,"props":486,"children":488},"a",{"href":487},"/design-system/design/theming-guidance-for-designers",[489],{"type":23,"value":490},"theming guidance for designers",{"type":23,"value":492}," or ",{"type":17,"tag":485,"props":494,"children":496},{"href":495},"/design-system/develop/theming",[497],{"type":23,"value":498},"theming guidance for developers",{"type":23,"value":500},".",{"type":17,"tag":260,"props":502,"children":503},{},[],{"type":17,"tag":18,"props":505,"children":507},{"id":506},"rationale",[508],{"type":23,"value":509},"Rationale",{"type":17,"tag":26,"props":511,"children":512},{},[513],{"type":23,"value":514},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":17,"tag":26,"props":516,"children":517},{},[518],{"type":23,"value":519},"This occurs across all form and input elements, for a consistent experience.",{"title":8,"searchDepth":521,"depth":521,"links":522},2,[523,529,534,535],{"id":20,"depth":521,"text":24,"children":524},[525,527,528],{"id":54,"depth":526,"text":57},3,{"id":193,"depth":526,"text":196},{"id":217,"depth":526,"text":220},{"id":265,"depth":521,"text":268,"children":530},[531,532,533],{"id":289,"depth":526,"text":292},{"id":298,"depth":526,"text":301},{"id":308,"depth":526,"text":311},{"id":463,"depth":521,"text":466},{"id":506,"depth":521,"text":509},"markdown","content:design-system:5.components:text-area.md","content","design-system/5.components/text-area.md","md",{"/design-system/components/text-area":542},[543,549],{"_path":544,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":545,"description":546,"layout":11,"label":12,"_type":536,"_id":547,"_source":538,"_file":548,"_extension":540},"/design-system/components/tag","Tag","The Tag component adds, and draws attention to, a category name for your content.","content:design-system:5.components:tag.md","design-system/5.components/tag.md",{"_path":550,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":551,"description":552,"layout":11,"label":12,"_type":536,"_id":553,"_source":538,"_file":554,"_extension":540},"/design-system/components/timeline","Timeline","The Timeline component contains blocks of content displayed in a linear order.","content:design-system:5.components:timeline.md","design-system/5.components/timeline.md",{},[557,562,801],{"title":558,"_path":559,"icon":560,"layout":561},"Ripple Design System","/","carbon:home","home",{"title":563,"_path":564,"children":565},"Design System","/design-system",[566,582,597,625,659],{"title":567,"_path":568,"children":569},"About","/design-system/about",[570,573,576,579],{"title":571,"_path":572,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":574,"_path":575,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":577,"_path":578,"layout":11},"Support","/design-system/about/getting-support",{"title":580,"_path":581,"layout":11},"Contributing","/design-system/about/contributing",{"title":583,"_path":584,"children":585},"Design","/design-system/design",[586,589,592,595],{"title":587,"_path":588,"layout":11},"Getting started","/design-system/design/getting-started",{"title":590,"_path":591,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":593,"_path":594,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":596,"_path":487,"layout":11},"Theming guidance for designers",{"title":598,"_path":599,"children":600},"Develop","/design-system/develop",[601,603,605,607],{"title":587,"_path":602,"layout":11},"/design-system/develop/getting-started",{"title":580,"_path":604,"layout":11},"/design-system/develop/contributing",{"title":606,"_path":495,"layout":11},"Theme and brand application",{"title":24,"_path":608,"children":609,"layout":11},"/design-system/develop/usage",[610,613,616,619,622],{"title":611,"_path":612,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":614,"_path":615,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":617,"_path":618,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":620,"_path":621,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":623,"_path":624,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":626,"_path":627,"children":628},"Styles","/design-system/styles",[629,632,635,638,641,644,647,650,653,656],{"title":630,"_path":631,"layout":11},"Colour","/design-system/styles/colour",{"title":633,"_path":634,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":636,"_path":637,"layout":11},"Grid","/design-system/styles/grid",{"title":639,"_path":640,"layout":11},"Icons","/design-system/styles/icons",{"title":642,"_path":643,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":645,"_path":646,"layout":11},"Layout","/design-system/styles/layout",{"title":648,"_path":649,"layout":11},"Logo","/design-system/styles/logo",{"title":651,"_path":652,"layout":11},"Motion","/design-system/styles/motion",{"title":654,"_path":655,"layout":11},"Spacing","/design-system/styles/spacing",{"title":657,"_path":658,"layout":11},"Typography","/design-system/styles/typography",{"title":660,"_path":661,"children":662},"Components","/design-system/components",[663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,789,792,795,796,797,798],{"title":664,"_path":665,"layout":11},"Accordion","/design-system/components/accordion",{"title":667,"_path":668,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":670,"_path":671,"layout":11},"Alert","/design-system/components/alert",{"title":673,"_path":674,"layout":11},"Block quote","/design-system/components/block-quote",{"title":676,"_path":677,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":679,"_path":680,"layout":11},"Button","/design-system/components/button",{"title":682,"_path":683,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":685,"_path":686,"layout":11},"Callout","/design-system/components/callout",{"title":688,"_path":689,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":691,"_path":692,"layout":11},"Card","/design-system/components/card",{"title":694,"_path":695,"layout":11},"Carousel","/design-system/components/carousel",{"title":697,"_path":698,"layout":11},"Category grid","/design-system/components/category-grid",{"title":700,"_path":701,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":703,"_path":704,"layout":11},"Chip","/design-system/components/chip",{"title":706,"_path":707,"layout":11},"Contact us","/design-system/components/contact-us",{"title":709,"_path":710,"layout":11},"Date input","/design-system/components/date-input",{"title":712,"_path":713,"layout":11},"Detail list","/design-system/components/detail-list",{"title":715,"_path":716,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":718,"_path":719,"layout":11},"File","/design-system/components/file",{"title":721,"_path":722,"layout":11},"Footer","/design-system/components/footer",{"title":724,"_path":725,"layout":11},"Form alert","/design-system/components/form-alert",{"title":727,"_path":728,"layout":11},"Form","/design-system/components/form",{"title":730,"_path":731,"layout":11},"Header","/design-system/components/header",{"title":733,"_path":734,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":736,"_path":737,"layout":11},"Input field","/design-system/components/input-field",{"title":739,"_path":740,"layout":11},"Key dates","/design-system/components/key-dates",{"title":742,"_path":743,"layout":11},"Media embed","/design-system/components/media-embed",{"title":745,"_path":746,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":748,"_path":749,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":751,"_path":752,"layout":11},"Media","/design-system/components/media",{"title":754,"_path":755,"layout":11},"Option button","/design-system/components/option-button",{"title":757,"_path":758,"layout":11},"Page action","/design-system/components/page-action",{"title":760,"_path":761,"layout":11},"Pagination","/design-system/components/pagination",{"title":763,"_path":764,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":766,"_path":767,"layout":11},"Profile","/design-system/components/profile",{"title":769,"_path":770,"layout":11},"Radio button","/design-system/components/radio-button",{"title":772,"_path":773,"layout":11},"Related links","/design-system/components/related-links",{"title":775,"_path":776,"layout":11},"Results listing","/design-system/components/results-listing",{"title":778,"_path":779,"layout":11},"Search bar","/design-system/components/search-bar",{"title":781,"_path":782,"layout":11},"Skip link","/design-system/components/skip-link",{"title":784,"_path":785,"layout":11},"Social share","/design-system/components/social-share",{"title":787,"_path":788,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":790,"_path":791,"layout":11},"Table","/design-system/components/table",{"title":793,"_path":794,"layout":11},"Tabs","/design-system/components/tabs",{"title":545,"_path":544,"layout":11},{"title":9,"_path":5,"layout":11},{"title":551,"_path":550,"layout":11},{"title":799,"_path":800,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":802,"_path":803,"children":804,"layout":11},"Ripple Framework","/framework",[805,806,824,846],{"title":802,"_path":803,"layout":11},{"title":807,"_path":808,"children":809},"Key Concepts","/framework/key-concepts",[810,812,815,818,821],{"title":617,"_path":811,"layout":11},"/framework/key-concepts/nuxt",{"title":813,"_path":814,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":816,"_path":817,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":819,"_path":820,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":822,"_path":823,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":825,"_path":826,"children":827},"Guides","/framework/guides",[828,831,834,837,840,843],{"title":829,"_path":830,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":832,"_path":833,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":835,"_path":836,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":838,"_path":839,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":841,"_path":842,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":844,"_path":845,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":847,"_path":848,"layout":11},"Core modules","/framework/core-modules",["Reactive",850],{"module-navigation":851},null,true,"/design-system/components/text-area/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/timeline/index.html b/design-system/components/timeline/index.html index e713811dd9..15946cc09a 100644 --- a/design-system/components/timeline/index.html +++ b/design-system/components/timeline/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Timeline</h1><p class="rpl-type-p-large" data-v-3163c6df>The Timeline component contains blocks of content displayed in a linear order.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content.<!--]--></p><p><!--[-->A timeline can include a combination of:<!--]--></p><ul><!--[--><li><!--[-->heading<!--]--></li><li><!--[-->subheading<!--]--></li><li><!--[-->summary<!--]--></li><li><!--[-->image.<!--]--></li><!--]--></ul><p><!--[-->Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together.<!--]--></p><p><!--[-->Some examples include:<!--]--></p><ul><!--[--><li><!--[-->dates<!--]--></li><li><!--[-->steps<!--]--></li><li><!--[-->stages<!--]--></li><li><!--[-->events<!--]--></li><li><!--[-->actions<!--]--></li><li><!--[-->outcomes.<!--]--></li><!--]--></ul><p><!--[-->The timeline component is ordered from top to bottom.<!--]--></p><p><!--[-->Use between 3 to 8 discrete sections of content, so the user is not overwhelmed.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-timeline--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always include a title for the entire timeline.<!--]--></li><li><!--[-->Add a heading, subheading, short summary and optional image for each block.<!--]--></li><li><!--[-->Only include 3 to 8 blocks per timeline.<!--]--></li><li><!--[-->Add a link if you're providing more details on another page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't add fewer than 3 or more than 8 blocks.<!--]--></li><li><!--[-->Don't use without a heading for each block.<!--]--></li><li><!--[-->Never include unrelated content.<!--]--></li><li><!--[-->Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Timeline has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->progressive.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-timeline--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="progressive"><a href="#progressive"><!--[-->Progressive<!--]--></a></h3><p><!--[-->Use the progressive variant to show the progress or status of the content to the user.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-timeline--progressive-active-2&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--progressive-active-2&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Timeline uses colour to:<!--]--></p><ul><!--[--><li><!--[-->show progress<!--]--></li><li><!--[-->highlight interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-timeline--progressive-active-2&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--progressive-active-2&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/timeline.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/timeline/_payload.json">[{"state":1,"_errors":616,"serverRendered":619,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":308,"$sdd-globals":322,"$sdd-navigation":323},{"/design-system/components/timeline":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":303,"_id":304,"_source":305,"_file":306,"_extension":307},"/design-system/components/timeline","components",false,"","Timeline","The Timeline component contains blocks of content displayed in a linear order.","page","Core",{"type":14,"children":15,"toc":290},"root",[16,25,31,36,61,66,71,104,109,114,119,126,149,155,178,182,188,193,206,211,216,219,225,230,234,237,243,248,261,268],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A timeline can include a combination of:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"heading",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"subheading",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"summary",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"image.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"Some examples include:",{"type":17,"tag":37,"props":72,"children":73},{},[74,79,84,89,94,99],{"type":17,"tag":41,"props":75,"children":76},{},[77],{"type":23,"value":78},"dates",{"type":17,"tag":41,"props":80,"children":81},{},[82],{"type":23,"value":83},"steps",{"type":17,"tag":41,"props":85,"children":86},{},[87],{"type":23,"value":88},"stages",{"type":17,"tag":41,"props":90,"children":91},{},[92],{"type":23,"value":93},"events",{"type":17,"tag":41,"props":95,"children":96},{},[97],{"type":23,"value":98},"actions",{"type":17,"tag":41,"props":100,"children":101},{},[102],{"type":23,"value":103},"outcomes.",{"type":17,"tag":26,"props":105,"children":106},{},[107],{"type":23,"value":108},"The timeline component is ordered from top to bottom.",{"type":17,"tag":26,"props":110,"children":111},{},[112],{"type":23,"value":113},"Use between 3 to 8 discrete sections of content, so the user is not overwhelmed.",{"type":17,"tag":115,"props":116,"children":118},"docs-example",{"id":117},"core-containers-timeline--default-story",[],{"type":17,"tag":120,"props":121,"children":123},"h3",{"id":122},"when-and-how-to-use",[124],{"type":23,"value":125},"When and how to use",{"type":17,"tag":37,"props":127,"children":128},{},[129,134,139,144],{"type":17,"tag":41,"props":130,"children":131},{},[132],{"type":23,"value":133},"Always include a title for the entire timeline.",{"type":17,"tag":41,"props":135,"children":136},{},[137],{"type":23,"value":138},"Add a heading, subheading, short summary and optional image for each block.",{"type":17,"tag":41,"props":140,"children":141},{},[142],{"type":23,"value":143},"Only include 3 to 8 blocks per timeline.",{"type":17,"tag":41,"props":145,"children":146},{},[147],{"type":23,"value":148},"Add a link if you're providing more details on another page.",{"type":17,"tag":120,"props":150,"children":152},{"id":151},"when-and-how-not-to-use",[153],{"type":23,"value":154},"When and how not to use",{"type":17,"tag":37,"props":156,"children":157},{},[158,163,168,173],{"type":17,"tag":41,"props":159,"children":160},{},[161],{"type":23,"value":162},"Don't add fewer than 3 or more than 8 blocks.",{"type":17,"tag":41,"props":164,"children":165},{},[166],{"type":23,"value":167},"Don't use without a heading for each block.",{"type":17,"tag":41,"props":169,"children":170},{},[171],{"type":23,"value":172},"Never include unrelated content.",{"type":17,"tag":41,"props":174,"children":175},{},[176],{"type":23,"value":177},"Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead.",{"type":17,"tag":179,"props":180,"children":181},"hr",{},[],{"type":17,"tag":18,"props":183,"children":185},{"id":184},"variants",[186],{"type":23,"value":187},"Variants",{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"Timeline has 2 variants:",{"type":17,"tag":37,"props":194,"children":195},{},[196,201],{"type":17,"tag":41,"props":197,"children":198},{},[199],{"type":23,"value":200},"default",{"type":17,"tag":41,"props":202,"children":203},{},[204],{"type":23,"value":205},"progressive.",{"type":17,"tag":120,"props":207,"children":208},{"id":200},[209],{"type":23,"value":210},"Default",{"type":17,"tag":26,"props":212,"children":213},{},[214],{"type":23,"value":215},"This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user.",{"type":17,"tag":115,"props":217,"children":218},{"id":117},[],{"type":17,"tag":120,"props":220,"children":222},{"id":221},"progressive",[223],{"type":23,"value":224},"Progressive",{"type":17,"tag":26,"props":226,"children":227},{},[228],{"type":23,"value":229},"Use the progressive variant to show the progress or status of the content to the user.",{"type":17,"tag":115,"props":231,"children":233},{"id":232},"core-containers-timeline--progressive-active-2",[],{"type":17,"tag":179,"props":235,"children":236},{},[],{"type":17,"tag":18,"props":238,"children":240},{"id":239},"theming",[241],{"type":23,"value":242},"Theming",{"type":17,"tag":26,"props":244,"children":245},{},[246],{"type":23,"value":247},"Timeline uses colour to:",{"type":17,"tag":37,"props":249,"children":250},{},[251,256],{"type":17,"tag":41,"props":252,"children":253},{},[254],{"type":23,"value":255},"show progress",{"type":17,"tag":41,"props":257,"children":258},{},[259],{"type":23,"value":260},"highlight interactive states.",{"type":17,"tag":262,"props":263,"children":264},"docs-theme-chooser",{},[265],{"type":17,"tag":115,"props":266,"children":267},{"id":232},[],{"type":17,"tag":26,"props":269,"children":270},{},[271,273,280,282,288],{"type":23,"value":272},"To create your own theme see ",{"type":17,"tag":274,"props":275,"children":277},"a",{"href":276},"/design-system/design/theming-guidance-for-designers",[278],{"type":23,"value":279},"theming guidance for designers",{"type":23,"value":281}," or ",{"type":17,"tag":274,"props":283,"children":285},{"href":284},"/design-system/develop/theming",[286],{"type":23,"value":287},"theming guidance for developers",{"type":23,"value":289},".",{"title":8,"searchDepth":291,"depth":291,"links":292},2,[293,298,302],{"id":20,"depth":291,"text":24,"children":294},[295,297],{"id":122,"depth":296,"text":125},3,{"id":151,"depth":296,"text":154},{"id":184,"depth":291,"text":187,"children":299},[300,301],{"id":200,"depth":296,"text":210},{"id":221,"depth":296,"text":224},{"id":239,"depth":291,"text":242},"markdown","content:design-system:5.components:timeline.md","content","design-system/5.components/timeline.md","md",{"/design-system/components/timeline":309},[310,316],{"_path":311,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":312,"description":313,"layout":11,"label":12,"_type":303,"_id":314,"_source":305,"_file":315,"_extension":307},"/design-system/components/text-area","Text area","The Text area component lets users select one option from a list.","content:design-system:5.components:text-area.md","design-system/5.components/text-area.md",{"_path":317,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":318,"description":319,"layout":11,"label":12,"_type":303,"_id":320,"_source":305,"_file":321,"_extension":307},"/design-system/components/vertical-navigation","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","content:design-system:5.components:vertical-navigation.md","design-system/5.components/vertical-navigation.md",{},[324,329,568],{"title":325,"_path":326,"icon":327,"layout":328},"Ripple Design System","/","carbon:home","home",{"title":330,"_path":331,"children":332},"Design System","/design-system",[333,349,364,392,426],{"title":334,"_path":335,"children":336},"About","/design-system/about",[337,340,343,346],{"title":338,"_path":339,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":341,"_path":342,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":344,"_path":345,"layout":11},"Support","/design-system/about/getting-support",{"title":347,"_path":348,"layout":11},"Contributing","/design-system/about/contributing",{"title":350,"_path":351,"children":352},"Design","/design-system/design",[353,356,359,362],{"title":354,"_path":355,"layout":11},"Getting started","/design-system/design/getting-started",{"title":357,"_path":358,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":360,"_path":361,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":363,"_path":276,"layout":11},"Theming guidance for designers",{"title":365,"_path":366,"children":367},"Develop","/design-system/develop",[368,370,372,374],{"title":354,"_path":369,"layout":11},"/design-system/develop/getting-started",{"title":347,"_path":371,"layout":11},"/design-system/develop/contributing",{"title":373,"_path":284,"layout":11},"Theme and brand application",{"title":24,"_path":375,"children":376,"layout":11},"/design-system/develop/usage",[377,380,383,386,389],{"title":378,"_path":379,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":381,"_path":382,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":384,"_path":385,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":387,"_path":388,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":390,"_path":391,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":393,"_path":394,"children":395},"Styles","/design-system/styles",[396,399,402,405,408,411,414,417,420,423],{"title":397,"_path":398,"layout":11},"Colour","/design-system/styles/colour",{"title":400,"_path":401,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":403,"_path":404,"layout":11},"Grid","/design-system/styles/grid",{"title":406,"_path":407,"layout":11},"Icons","/design-system/styles/icons",{"title":409,"_path":410,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":412,"_path":413,"layout":11},"Layout","/design-system/styles/layout",{"title":415,"_path":416,"layout":11},"Logo","/design-system/styles/logo",{"title":418,"_path":419,"layout":11},"Motion","/design-system/styles/motion",{"title":421,"_path":422,"layout":11},"Spacing","/design-system/styles/spacing",{"title":424,"_path":425,"layout":11},"Typography","/design-system/styles/typography",{"title":427,"_path":428,"children":429},"Components","/design-system/components",[430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,566,567],{"title":431,"_path":432,"layout":11},"Accordion","/design-system/components/accordion",{"title":434,"_path":435,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":437,"_path":438,"layout":11},"Alert","/design-system/components/alert",{"title":440,"_path":441,"layout":11},"Block quote","/design-system/components/block-quote",{"title":443,"_path":444,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":446,"_path":447,"layout":11},"Button","/design-system/components/button",{"title":449,"_path":450,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":452,"_path":453,"layout":11},"Callout","/design-system/components/callout",{"title":455,"_path":456,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":458,"_path":459,"layout":11},"Card","/design-system/components/card",{"title":461,"_path":462,"layout":11},"Carousel","/design-system/components/carousel",{"title":464,"_path":465,"layout":11},"Category grid","/design-system/components/category-grid",{"title":467,"_path":468,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":470,"_path":471,"layout":11},"Chip","/design-system/components/chip",{"title":473,"_path":474,"layout":11},"Contact us","/design-system/components/contact-us",{"title":476,"_path":477,"layout":11},"Date input","/design-system/components/date-input",{"title":479,"_path":480,"layout":11},"Detail list","/design-system/components/detail-list",{"title":482,"_path":483,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":485,"_path":486,"layout":11},"File","/design-system/components/file",{"title":488,"_path":489,"layout":11},"Footer","/design-system/components/footer",{"title":491,"_path":492,"layout":11},"Form alert","/design-system/components/form-alert",{"title":494,"_path":495,"layout":11},"Form","/design-system/components/form",{"title":497,"_path":498,"layout":11},"Header","/design-system/components/header",{"title":500,"_path":501,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":503,"_path":504,"layout":11},"Input field","/design-system/components/input-field",{"title":506,"_path":507,"layout":11},"Key dates","/design-system/components/key-dates",{"title":509,"_path":510,"layout":11},"Media embed","/design-system/components/media-embed",{"title":512,"_path":513,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":515,"_path":516,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":518,"_path":519,"layout":11},"Media","/design-system/components/media",{"title":521,"_path":522,"layout":11},"Option button","/design-system/components/option-button",{"title":524,"_path":525,"layout":11},"Page action","/design-system/components/page-action",{"title":527,"_path":528,"layout":11},"Pagination","/design-system/components/pagination",{"title":530,"_path":531,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":533,"_path":534,"layout":11},"Profile","/design-system/components/profile",{"title":536,"_path":537,"layout":11},"Radio button","/design-system/components/radio-button",{"title":539,"_path":540,"layout":11},"Related links","/design-system/components/related-links",{"title":542,"_path":543,"layout":11},"Results listing","/design-system/components/results-listing",{"title":545,"_path":546,"layout":11},"Search bar","/design-system/components/search-bar",{"title":548,"_path":549,"layout":11},"Skip link","/design-system/components/skip-link",{"title":551,"_path":552,"layout":11},"Social share","/design-system/components/social-share",{"title":554,"_path":555,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":557,"_path":558,"layout":11},"Table","/design-system/components/table",{"title":560,"_path":561,"layout":11},"Tabs","/design-system/components/tabs",{"title":563,"_path":564,"layout":11},"Tag","/design-system/components/tag",{"title":312,"_path":311,"layout":11},{"title":9,"_path":5,"layout":11},{"title":318,"_path":317,"layout":11},{"title":569,"_path":570,"children":571,"layout":11},"Ripple Framework","/framework",[572,573,591,613],{"title":569,"_path":570,"layout":11},{"title":574,"_path":575,"children":576},"Key Concepts","/framework/key-concepts",[577,579,582,585,588],{"title":384,"_path":578,"layout":11},"/framework/key-concepts/nuxt",{"title":580,"_path":581,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":583,"_path":584,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":586,"_path":587,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":589,"_path":590,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":592,"_path":593,"children":594},"Guides","/framework/guides",[595,598,601,604,607,610],{"title":596,"_path":597,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":599,"_path":600,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":602,"_path":603,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":605,"_path":606,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":608,"_path":609,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":611,"_path":612,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":614,"_path":615,"layout":11},"Core modules","/framework/core-modules",["Reactive",617],{"module-navigation":618},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Timeline</h1><p class="rpl-type-p-large" data-v-3163c6df>The Timeline component contains blocks of content displayed in a linear order.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content.<!--]--></p><p><!--[-->A timeline can include a combination of:<!--]--></p><ul><!--[--><li><!--[-->heading<!--]--></li><li><!--[-->subheading<!--]--></li><li><!--[-->summary<!--]--></li><li><!--[-->image.<!--]--></li><!--]--></ul><p><!--[-->Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together.<!--]--></p><p><!--[-->Some examples include:<!--]--></p><ul><!--[--><li><!--[-->dates<!--]--></li><li><!--[-->steps<!--]--></li><li><!--[-->stages<!--]--></li><li><!--[-->events<!--]--></li><li><!--[-->actions<!--]--></li><li><!--[-->outcomes.<!--]--></li><!--]--></ul><p><!--[-->The timeline component is ordered from top to bottom.<!--]--></p><p><!--[-->Use between 3 to 8 discrete sections of content, so the user is not overwhelmed.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-timeline--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Always include a title for the entire timeline.<!--]--></li><li><!--[-->Add a heading, subheading, short summary and optional image for each block.<!--]--></li><li><!--[-->Only include 3 to 8 blocks per timeline.<!--]--></li><li><!--[-->Add a link if you're providing more details on another page.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't add fewer than 3 or more than 8 blocks.<!--]--></li><li><!--[-->Don't use without a heading for each block.<!--]--></li><li><!--[-->Never include unrelated content.<!--]--></li><li><!--[-->Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="variants"><a href="#variants"><!--[-->Variants<!--]--></a></h2><p><!--[-->Timeline has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->progressive.<!--]--></li><!--]--></ul><h3 id="default"><a href="#default"><!--[-->Default<!--]--></a></h3><p><!--[-->This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-timeline--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--default-story&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="progressive"><a href="#progressive"><!--[-->Progressive<!--]--></a></h3><p><!--[-->Use the progressive variant to show the progress or status of the content to the user.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-timeline--progressive-active-2&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--progressive-active-2&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Timeline uses colour to:<!--]--></p><ul><!--[--><li><!--[-->show progress<!--]--></li><li><!--[-->highlight interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-containers-timeline--progressive-active-2&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--progressive-active-2&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/timeline.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/timeline/_payload.json">[{"state":1,"_errors":616,"serverRendered":619,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":308,"$sdd-globals":322,"$sdd-navigation":323},{"/design-system/components/timeline":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":303,"_id":304,"_source":305,"_file":306,"_extension":307},"/design-system/components/timeline","components",false,"","Timeline","The Timeline component contains blocks of content displayed in a linear order.","page","Core",{"type":14,"children":15,"toc":290},"root",[16,25,31,36,61,66,71,104,109,114,119,126,149,155,178,182,188,193,206,211,216,219,225,230,234,237,243,248,261,268],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"A timeline can include a combination of:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51,56],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"heading",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"subheading",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"summary",{"type":17,"tag":41,"props":57,"children":58},{},[59],{"type":23,"value":60},"image.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"Some examples include:",{"type":17,"tag":37,"props":72,"children":73},{},[74,79,84,89,94,99],{"type":17,"tag":41,"props":75,"children":76},{},[77],{"type":23,"value":78},"dates",{"type":17,"tag":41,"props":80,"children":81},{},[82],{"type":23,"value":83},"steps",{"type":17,"tag":41,"props":85,"children":86},{},[87],{"type":23,"value":88},"stages",{"type":17,"tag":41,"props":90,"children":91},{},[92],{"type":23,"value":93},"events",{"type":17,"tag":41,"props":95,"children":96},{},[97],{"type":23,"value":98},"actions",{"type":17,"tag":41,"props":100,"children":101},{},[102],{"type":23,"value":103},"outcomes.",{"type":17,"tag":26,"props":105,"children":106},{},[107],{"type":23,"value":108},"The timeline component is ordered from top to bottom.",{"type":17,"tag":26,"props":110,"children":111},{},[112],{"type":23,"value":113},"Use between 3 to 8 discrete sections of content, so the user is not overwhelmed.",{"type":17,"tag":115,"props":116,"children":118},"docs-example",{"id":117},"core-containers-timeline--default-story",[],{"type":17,"tag":120,"props":121,"children":123},"h3",{"id":122},"when-and-how-to-use",[124],{"type":23,"value":125},"When and how to use",{"type":17,"tag":37,"props":127,"children":128},{},[129,134,139,144],{"type":17,"tag":41,"props":130,"children":131},{},[132],{"type":23,"value":133},"Always include a title for the entire timeline.",{"type":17,"tag":41,"props":135,"children":136},{},[137],{"type":23,"value":138},"Add a heading, subheading, short summary and optional image for each block.",{"type":17,"tag":41,"props":140,"children":141},{},[142],{"type":23,"value":143},"Only include 3 to 8 blocks per timeline.",{"type":17,"tag":41,"props":145,"children":146},{},[147],{"type":23,"value":148},"Add a link if you're providing more details on another page.",{"type":17,"tag":120,"props":150,"children":152},{"id":151},"when-and-how-not-to-use",[153],{"type":23,"value":154},"When and how not to use",{"type":17,"tag":37,"props":156,"children":157},{},[158,163,168,173],{"type":17,"tag":41,"props":159,"children":160},{},[161],{"type":23,"value":162},"Don't add fewer than 3 or more than 8 blocks.",{"type":17,"tag":41,"props":164,"children":165},{},[166],{"type":23,"value":167},"Don't use without a heading for each block.",{"type":17,"tag":41,"props":169,"children":170},{},[171],{"type":23,"value":172},"Never include unrelated content.",{"type":17,"tag":41,"props":174,"children":175},{},[176],{"type":23,"value":177},"Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead.",{"type":17,"tag":179,"props":180,"children":181},"hr",{},[],{"type":17,"tag":18,"props":183,"children":185},{"id":184},"variants",[186],{"type":23,"value":187},"Variants",{"type":17,"tag":26,"props":189,"children":190},{},[191],{"type":23,"value":192},"Timeline has 2 variants:",{"type":17,"tag":37,"props":194,"children":195},{},[196,201],{"type":17,"tag":41,"props":197,"children":198},{},[199],{"type":23,"value":200},"default",{"type":17,"tag":41,"props":202,"children":203},{},[204],{"type":23,"value":205},"progressive.",{"type":17,"tag":120,"props":207,"children":208},{"id":200},[209],{"type":23,"value":210},"Default",{"type":17,"tag":26,"props":212,"children":213},{},[214],{"type":23,"value":215},"This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user.",{"type":17,"tag":115,"props":217,"children":218},{"id":117},[],{"type":17,"tag":120,"props":220,"children":222},{"id":221},"progressive",[223],{"type":23,"value":224},"Progressive",{"type":17,"tag":26,"props":226,"children":227},{},[228],{"type":23,"value":229},"Use the progressive variant to show the progress or status of the content to the user.",{"type":17,"tag":115,"props":231,"children":233},{"id":232},"core-containers-timeline--progressive-active-2",[],{"type":17,"tag":179,"props":235,"children":236},{},[],{"type":17,"tag":18,"props":238,"children":240},{"id":239},"theming",[241],{"type":23,"value":242},"Theming",{"type":17,"tag":26,"props":244,"children":245},{},[246],{"type":23,"value":247},"Timeline uses colour to:",{"type":17,"tag":37,"props":249,"children":250},{},[251,256],{"type":17,"tag":41,"props":252,"children":253},{},[254],{"type":23,"value":255},"show progress",{"type":17,"tag":41,"props":257,"children":258},{},[259],{"type":23,"value":260},"highlight interactive states.",{"type":17,"tag":262,"props":263,"children":264},"docs-theme-chooser",{},[265],{"type":17,"tag":115,"props":266,"children":267},{"id":232},[],{"type":17,"tag":26,"props":269,"children":270},{},[271,273,280,282,288],{"type":23,"value":272},"To create your own theme see ",{"type":17,"tag":274,"props":275,"children":277},"a",{"href":276},"/design-system/design/theming-guidance-for-designers",[278],{"type":23,"value":279},"theming guidance for designers",{"type":23,"value":281}," or ",{"type":17,"tag":274,"props":283,"children":285},{"href":284},"/design-system/develop/theming",[286],{"type":23,"value":287},"theming guidance for developers",{"type":23,"value":289},".",{"title":8,"searchDepth":291,"depth":291,"links":292},2,[293,298,302],{"id":20,"depth":291,"text":24,"children":294},[295,297],{"id":122,"depth":296,"text":125},3,{"id":151,"depth":296,"text":154},{"id":184,"depth":291,"text":187,"children":299},[300,301],{"id":200,"depth":296,"text":210},{"id":221,"depth":296,"text":224},{"id":239,"depth":291,"text":242},"markdown","content:design-system:5.components:timeline.md","content","design-system/5.components/timeline.md","md",{"/design-system/components/timeline":309},[310,316],{"_path":311,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":312,"description":313,"layout":11,"label":12,"_type":303,"_id":314,"_source":305,"_file":315,"_extension":307},"/design-system/components/text-area","Text area","The Text area component lets users select one option from a list.","content:design-system:5.components:text-area.md","design-system/5.components/text-area.md",{"_path":317,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":318,"description":319,"layout":11,"label":12,"_type":303,"_id":320,"_source":305,"_file":321,"_extension":307},"/design-system/components/vertical-navigation","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","content:design-system:5.components:vertical-navigation.md","design-system/5.components/vertical-navigation.md",{},[324,329,568],{"title":325,"_path":326,"icon":327,"layout":328},"Ripple Design System","/","carbon:home","home",{"title":330,"_path":331,"children":332},"Design System","/design-system",[333,349,364,392,426],{"title":334,"_path":335,"children":336},"About","/design-system/about",[337,340,343,346],{"title":338,"_path":339,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":341,"_path":342,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":344,"_path":345,"layout":11},"Support","/design-system/about/getting-support",{"title":347,"_path":348,"layout":11},"Contributing","/design-system/about/contributing",{"title":350,"_path":351,"children":352},"Design","/design-system/design",[353,356,359,362],{"title":354,"_path":355,"layout":11},"Getting started","/design-system/design/getting-started",{"title":357,"_path":358,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":360,"_path":361,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":363,"_path":276,"layout":11},"Theming guidance for designers",{"title":365,"_path":366,"children":367},"Develop","/design-system/develop",[368,370,372,374],{"title":354,"_path":369,"layout":11},"/design-system/develop/getting-started",{"title":347,"_path":371,"layout":11},"/design-system/develop/contributing",{"title":373,"_path":284,"layout":11},"Theme and brand application",{"title":24,"_path":375,"children":376,"layout":11},"/design-system/develop/usage",[377,380,383,386,389],{"title":378,"_path":379,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":381,"_path":382,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":384,"_path":385,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":387,"_path":388,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":390,"_path":391,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":393,"_path":394,"children":395},"Styles","/design-system/styles",[396,399,402,405,408,411,414,417,420,423],{"title":397,"_path":398,"layout":11},"Colour","/design-system/styles/colour",{"title":400,"_path":401,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":403,"_path":404,"layout":11},"Grid","/design-system/styles/grid",{"title":406,"_path":407,"layout":11},"Icons","/design-system/styles/icons",{"title":409,"_path":410,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":412,"_path":413,"layout":11},"Layout","/design-system/styles/layout",{"title":415,"_path":416,"layout":11},"Logo","/design-system/styles/logo",{"title":418,"_path":419,"layout":11},"Motion","/design-system/styles/motion",{"title":421,"_path":422,"layout":11},"Spacing","/design-system/styles/spacing",{"title":424,"_path":425,"layout":11},"Typography","/design-system/styles/typography",{"title":427,"_path":428,"children":429},"Components","/design-system/components",[430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,566,567],{"title":431,"_path":432,"layout":11},"Accordion","/design-system/components/accordion",{"title":434,"_path":435,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":437,"_path":438,"layout":11},"Alert","/design-system/components/alert",{"title":440,"_path":441,"layout":11},"Block quote","/design-system/components/block-quote",{"title":443,"_path":444,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":446,"_path":447,"layout":11},"Button","/design-system/components/button",{"title":449,"_path":450,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":452,"_path":453,"layout":11},"Callout","/design-system/components/callout",{"title":455,"_path":456,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":458,"_path":459,"layout":11},"Card","/design-system/components/card",{"title":461,"_path":462,"layout":11},"Carousel","/design-system/components/carousel",{"title":464,"_path":465,"layout":11},"Category grid","/design-system/components/category-grid",{"title":467,"_path":468,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":470,"_path":471,"layout":11},"Chip","/design-system/components/chip",{"title":473,"_path":474,"layout":11},"Contact us","/design-system/components/contact-us",{"title":476,"_path":477,"layout":11},"Date input","/design-system/components/date-input",{"title":479,"_path":480,"layout":11},"Detail list","/design-system/components/detail-list",{"title":482,"_path":483,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":485,"_path":486,"layout":11},"File","/design-system/components/file",{"title":488,"_path":489,"layout":11},"Footer","/design-system/components/footer",{"title":491,"_path":492,"layout":11},"Form alert","/design-system/components/form-alert",{"title":494,"_path":495,"layout":11},"Form","/design-system/components/form",{"title":497,"_path":498,"layout":11},"Header","/design-system/components/header",{"title":500,"_path":501,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":503,"_path":504,"layout":11},"Input field","/design-system/components/input-field",{"title":506,"_path":507,"layout":11},"Key dates","/design-system/components/key-dates",{"title":509,"_path":510,"layout":11},"Media embed","/design-system/components/media-embed",{"title":512,"_path":513,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":515,"_path":516,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":518,"_path":519,"layout":11},"Media","/design-system/components/media",{"title":521,"_path":522,"layout":11},"Option button","/design-system/components/option-button",{"title":524,"_path":525,"layout":11},"Page action","/design-system/components/page-action",{"title":527,"_path":528,"layout":11},"Pagination","/design-system/components/pagination",{"title":530,"_path":531,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":533,"_path":534,"layout":11},"Profile","/design-system/components/profile",{"title":536,"_path":537,"layout":11},"Radio button","/design-system/components/radio-button",{"title":539,"_path":540,"layout":11},"Related links","/design-system/components/related-links",{"title":542,"_path":543,"layout":11},"Results listing","/design-system/components/results-listing",{"title":545,"_path":546,"layout":11},"Search bar","/design-system/components/search-bar",{"title":548,"_path":549,"layout":11},"Skip link","/design-system/components/skip-link",{"title":551,"_path":552,"layout":11},"Social share","/design-system/components/social-share",{"title":554,"_path":555,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":557,"_path":558,"layout":11},"Table","/design-system/components/table",{"title":560,"_path":561,"layout":11},"Tabs","/design-system/components/tabs",{"title":563,"_path":564,"layout":11},"Tag","/design-system/components/tag",{"title":312,"_path":311,"layout":11},{"title":9,"_path":5,"layout":11},{"title":318,"_path":317,"layout":11},{"title":569,"_path":570,"children":571,"layout":11},"Ripple Framework","/framework",[572,573,591,613],{"title":569,"_path":570,"layout":11},{"title":574,"_path":575,"children":576},"Key Concepts","/framework/key-concepts",[577,579,582,585,588],{"title":384,"_path":578,"layout":11},"/framework/key-concepts/nuxt",{"title":580,"_path":581,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":583,"_path":584,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":586,"_path":587,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":589,"_path":590,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":592,"_path":593,"children":594},"Guides","/framework/guides",[595,598,601,604,607,610],{"title":596,"_path":597,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":599,"_path":600,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":602,"_path":603,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":605,"_path":606,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":608,"_path":609,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":611,"_path":612,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":614,"_path":615,"layout":11},"Core modules","/framework/core-modules",["Reactive",617],{"module-navigation":618},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/components/vertical-navigation/index.html b/design-system/components/vertical-navigation/index.html index 7fd4d6ae15..aa0250ce17 100644 --- a/design-system/components/vertical-navigation/index.html +++ b/design-system/components/vertical-navigation/index.html @@ -33,7 +33,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Vertical navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The Vertical navigation component displays a list of links to help users navigate a section of related pages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use vertical navigation to help users navigate a section of related pages.<!--]--></p><p><!--[-->Use vertical navigation to:<!--]--></p><ul><!--[--><li><!--[-->let users find and navigate to relevant information<!--]--></li><li><!--[-->show the user where, within your site’s content hierarchy, the page they are viewing is located<!--]--></li><li><!--[-->show 4 nested content sections (parent sections) and a heading for the names of each section.<!--]--></li><!--]--></ul><p><!--[-->Vertical navigation is placed next to your page’s body content.<!--]--></p><p><!--[-->A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default.<!--]--></p><p><!--[-->The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-vertical-navigation--vertical-navigation&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-vertical-navigation--vertical-navigation&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use in a page's sidebar.<!--]--></li><li><!--[-->Always keep the navigation links short. You can use a shorter version of the page title.<!--]--></li><li><!--[-->Display up to 4 levels of navigation.<!--]--></li><li><!--[-->Add a link for the section's 'home' page.<!--]--></li><li><!--[-->Use with at least 4 links.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't embed on a page that doesn't have a sidebar.<!--]--></li><li><!--[-->Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing.<!--]--></li><li><!--[-->Don't use on a site with fewer than 5 pages.<!--]--></li><li><!--[-->Don’t use with icons.<!--]--></li><li><!--[-->Never use it to link to other sites.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Vertical navigation uses colour and active state focus to highlight the current page the user is on.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-vertical-navigation--vertical-navigation&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-vertical-navigation--vertical-navigation&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[--><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->1.4.1<!--]--><!--]--><!----><!--]--></a> Use of Color:<!--]--></strong> Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/vertical-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/vertical-navigation/_payload.json">[{"state":1,"_errors":557,"serverRendered":560,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":249,"$sdd-globals":263,"$sdd-navigation":264},{"/design-system/components/vertical-navigation":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":244,"_id":245,"_source":246,"_file":247,"_extension":248},"/design-system/components/vertical-navigation","components",false,"","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","page","Core",{"type":14,"children":15,"toc":234},"root",[16,25,31,36,56,61,66,71,76,83,111,117,145,149,155,160,167,189,192,198,212],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use vertical navigation to help users navigate a section of related pages.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use vertical navigation to:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"let users find and navigate to relevant information",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"show the user where, within your site’s content hierarchy, the page they are viewing is located",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"show 4 nested content sections (parent sections) and a heading for the names of each section.",{"type":17,"tag":26,"props":57,"children":58},{},[59],{"type":23,"value":60},"Vertical navigation is placed next to your page’s body content.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter.",{"type":17,"tag":72,"props":73,"children":75},"docs-example",{"id":74},"core-navigation-vertical-navigation--vertical-navigation",[],{"type":17,"tag":77,"props":78,"children":80},"h3",{"id":79},"when-and-how-to-use",[81],{"type":23,"value":82},"When and how to use",{"type":17,"tag":37,"props":84,"children":85},{},[86,91,96,101,106],{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Use in a page's sidebar.",{"type":17,"tag":41,"props":92,"children":93},{},[94],{"type":23,"value":95},"Always keep the navigation links short. You can use a shorter version of the page title.",{"type":17,"tag":41,"props":97,"children":98},{},[99],{"type":23,"value":100},"Display up to 4 levels of navigation.",{"type":17,"tag":41,"props":102,"children":103},{},[104],{"type":23,"value":105},"Add a link for the section's 'home' page.",{"type":17,"tag":41,"props":107,"children":108},{},[109],{"type":23,"value":110},"Use with at least 4 links.",{"type":17,"tag":77,"props":112,"children":114},{"id":113},"when-and-how-not-to-use",[115],{"type":23,"value":116},"When and how not to use",{"type":17,"tag":37,"props":118,"children":119},{},[120,125,130,135,140],{"type":17,"tag":41,"props":121,"children":122},{},[123],{"type":23,"value":124},"Don't embed on a page that doesn't have a sidebar.",{"type":17,"tag":41,"props":126,"children":127},{},[128],{"type":23,"value":129},"Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing.",{"type":17,"tag":41,"props":131,"children":132},{},[133],{"type":23,"value":134},"Don't use on a site with fewer than 5 pages.",{"type":17,"tag":41,"props":136,"children":137},{},[138],{"type":23,"value":139},"Don’t use with icons.",{"type":17,"tag":41,"props":141,"children":142},{},[143],{"type":23,"value":144},"Never use it to link to other sites.",{"type":17,"tag":146,"props":147,"children":148},"hr",{},[],{"type":17,"tag":18,"props":150,"children":152},{"id":151},"theming",[153],{"type":23,"value":154},"Theming",{"type":17,"tag":26,"props":156,"children":157},{},[158],{"type":23,"value":159},"Vertical navigation uses colour and active state focus to highlight the current page the user is on.",{"type":17,"tag":161,"props":162,"children":163},"docs-theme-chooser",{},[164],{"type":17,"tag":72,"props":165,"children":166},{"id":74},[],{"type":17,"tag":26,"props":168,"children":169},{},[170,172,179,181,187],{"type":23,"value":171},"To create your own theme see ",{"type":17,"tag":173,"props":174,"children":176},"a",{"href":175},"/design-system/design/theming-guidance-for-designers",[177],{"type":23,"value":178},"theming guidance for designers",{"type":23,"value":180}," or ",{"type":17,"tag":173,"props":182,"children":184},{"href":183},"/design-system/develop/theming",[185],{"type":23,"value":186},"theming guidance for developers",{"type":23,"value":188},".",{"type":17,"tag":146,"props":190,"children":191},{},[],{"type":17,"tag":18,"props":193,"children":195},{"id":194},"rationale",[196],{"type":23,"value":197},"Rationale",{"type":17,"tag":26,"props":199,"children":200},{},[201,203,211],{"type":23,"value":202},"To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the ",{"type":17,"tag":173,"props":204,"children":208},{"href":205,"rel":206},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[207],"nofollow",[209],{"type":23,"value":210},"Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1",{"type":23,"value":188},{"type":17,"tag":213,"props":214,"children":215},"blockquote",{},[216],{"type":17,"tag":26,"props":217,"children":218},{},[219,232],{"type":17,"tag":220,"props":221,"children":222},"strong",{},[223,230],{"type":17,"tag":173,"props":224,"children":227},{"href":225,"rel":226},"https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color",[207],[228],{"type":23,"value":229},"1.4.1",{"type":23,"value":231}," Use of Color:",{"type":23,"value":233}," Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.",{"title":8,"searchDepth":235,"depth":235,"links":236},2,[237,242,243],{"id":20,"depth":235,"text":24,"children":238},[239,241],{"id":79,"depth":240,"text":82},3,{"id":113,"depth":240,"text":116},{"id":151,"depth":235,"text":154},{"id":194,"depth":235,"text":197},"markdown","content:design-system:5.components:vertical-navigation.md","content","design-system/5.components/vertical-navigation.md","md",{"/design-system/components/vertical-navigation":250},[251,257],{"_path":252,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":253,"description":254,"layout":11,"label":12,"_type":244,"_id":255,"_source":246,"_file":256,"_extension":248},"/design-system/components/timeline","Timeline","The Timeline component contains blocks of content displayed in a linear order.","content:design-system:5.components:timeline.md","design-system/5.components/timeline.md",{"_path":258,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":259,"description":260,"layout":11,"_type":244,"_id":261,"_source":246,"_file":262,"_extension":248},"/framework","Ripple Framework","Ripple framework contains the tools for building SDP sites using the Ripple design system components.","content:framework:1.index.md","framework/1.index.md",{},[265,270,511],{"title":266,"_path":267,"icon":268,"layout":269},"Ripple Design System","/","carbon:home","home",{"title":271,"_path":272,"children":273},"Design System","/design-system",[274,290,305,333,367],{"title":275,"_path":276,"children":277},"About","/design-system/about",[278,281,284,287],{"title":279,"_path":280,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":282,"_path":283,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":285,"_path":286,"layout":11},"Support","/design-system/about/getting-support",{"title":288,"_path":289,"layout":11},"Contributing","/design-system/about/contributing",{"title":291,"_path":292,"children":293},"Design","/design-system/design",[294,297,300,303],{"title":295,"_path":296,"layout":11},"Getting started","/design-system/design/getting-started",{"title":298,"_path":299,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":301,"_path":302,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":304,"_path":175,"layout":11},"Theming guidance for designers",{"title":306,"_path":307,"children":308},"Develop","/design-system/develop",[309,311,313,315],{"title":295,"_path":310,"layout":11},"/design-system/develop/getting-started",{"title":288,"_path":312,"layout":11},"/design-system/develop/contributing",{"title":314,"_path":183,"layout":11},"Theme and brand application",{"title":24,"_path":316,"children":317,"layout":11},"/design-system/develop/usage",[318,321,324,327,330],{"title":319,"_path":320,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":322,"_path":323,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":325,"_path":326,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":328,"_path":329,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":331,"_path":332,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":334,"_path":335,"children":336},"Styles","/design-system/styles",[337,340,343,346,349,352,355,358,361,364],{"title":338,"_path":339,"layout":11},"Colour","/design-system/styles/colour",{"title":341,"_path":342,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":344,"_path":345,"layout":11},"Grid","/design-system/styles/grid",{"title":347,"_path":348,"layout":11},"Icons","/design-system/styles/icons",{"title":350,"_path":351,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":353,"_path":354,"layout":11},"Layout","/design-system/styles/layout",{"title":356,"_path":357,"layout":11},"Logo","/design-system/styles/logo",{"title":359,"_path":360,"layout":11},"Motion","/design-system/styles/motion",{"title":362,"_path":363,"layout":11},"Spacing","/design-system/styles/spacing",{"title":365,"_path":366,"layout":11},"Typography","/design-system/styles/typography",{"title":368,"_path":369,"children":370},"Components","/design-system/components",[371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,510],{"title":372,"_path":373,"layout":11},"Accordion","/design-system/components/accordion",{"title":375,"_path":376,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":378,"_path":379,"layout":11},"Alert","/design-system/components/alert",{"title":381,"_path":382,"layout":11},"Block quote","/design-system/components/block-quote",{"title":384,"_path":385,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":387,"_path":388,"layout":11},"Button","/design-system/components/button",{"title":390,"_path":391,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":393,"_path":394,"layout":11},"Callout","/design-system/components/callout",{"title":396,"_path":397,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":399,"_path":400,"layout":11},"Card","/design-system/components/card",{"title":402,"_path":403,"layout":11},"Carousel","/design-system/components/carousel",{"title":405,"_path":406,"layout":11},"Category grid","/design-system/components/category-grid",{"title":408,"_path":409,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":411,"_path":412,"layout":11},"Chip","/design-system/components/chip",{"title":414,"_path":415,"layout":11},"Contact us","/design-system/components/contact-us",{"title":417,"_path":418,"layout":11},"Date input","/design-system/components/date-input",{"title":420,"_path":421,"layout":11},"Detail list","/design-system/components/detail-list",{"title":423,"_path":424,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":426,"_path":427,"layout":11},"File","/design-system/components/file",{"title":429,"_path":430,"layout":11},"Footer","/design-system/components/footer",{"title":432,"_path":433,"layout":11},"Form alert","/design-system/components/form-alert",{"title":435,"_path":436,"layout":11},"Form","/design-system/components/form",{"title":438,"_path":439,"layout":11},"Header","/design-system/components/header",{"title":441,"_path":442,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":444,"_path":445,"layout":11},"Input field","/design-system/components/input-field",{"title":447,"_path":448,"layout":11},"Key dates","/design-system/components/key-dates",{"title":450,"_path":451,"layout":11},"Media embed","/design-system/components/media-embed",{"title":453,"_path":454,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":456,"_path":457,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":459,"_path":460,"layout":11},"Media","/design-system/components/media",{"title":462,"_path":463,"layout":11},"Option button","/design-system/components/option-button",{"title":465,"_path":466,"layout":11},"Page action","/design-system/components/page-action",{"title":468,"_path":469,"layout":11},"Pagination","/design-system/components/pagination",{"title":471,"_path":472,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":474,"_path":475,"layout":11},"Profile","/design-system/components/profile",{"title":477,"_path":478,"layout":11},"Radio button","/design-system/components/radio-button",{"title":480,"_path":481,"layout":11},"Related links","/design-system/components/related-links",{"title":483,"_path":484,"layout":11},"Results listing","/design-system/components/results-listing",{"title":486,"_path":487,"layout":11},"Search bar","/design-system/components/search-bar",{"title":489,"_path":490,"layout":11},"Skip link","/design-system/components/skip-link",{"title":492,"_path":493,"layout":11},"Social share","/design-system/components/social-share",{"title":495,"_path":496,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":498,"_path":499,"layout":11},"Table","/design-system/components/table",{"title":501,"_path":502,"layout":11},"Tabs","/design-system/components/tabs",{"title":504,"_path":505,"layout":11},"Tag","/design-system/components/tag",{"title":507,"_path":508,"layout":11},"Text area","/design-system/components/text-area",{"title":253,"_path":252,"layout":11},{"title":9,"_path":5,"layout":11},{"title":259,"_path":258,"children":512,"layout":11},[513,514,532,554],{"title":259,"_path":258,"layout":11},{"title":515,"_path":516,"children":517},"Key Concepts","/framework/key-concepts",[518,520,523,526,529],{"title":325,"_path":519,"layout":11},"/framework/key-concepts/nuxt",{"title":521,"_path":522,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":524,"_path":525,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":527,"_path":528,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":530,"_path":531,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":533,"_path":534,"children":535},"Guides","/framework/guides",[536,539,542,545,548,551],{"title":537,"_path":538,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":540,"_path":541,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":543,"_path":544,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":546,"_path":547,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":549,"_path":550,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":552,"_path":553,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":555,"_path":556,"layout":11},"Core modules","/framework/core-modules",["Reactive",558],{"module-navigation":559},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Vertical navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The Vertical navigation component displays a list of links to help users navigate a section of related pages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->Use vertical navigation to help users navigate a section of related pages.<!--]--></p><p><!--[-->Use vertical navigation to:<!--]--></p><ul><!--[--><li><!--[-->let users find and navigate to relevant information<!--]--></li><li><!--[-->show the user where, within your site’s content hierarchy, the page they are viewing is located<!--]--></li><li><!--[-->show 4 nested content sections (parent sections) and a heading for the names of each section.<!--]--></li><!--]--></ul><p><!--[-->Vertical navigation is placed next to your page’s body content.<!--]--></p><p><!--[-->A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default.<!--]--></p><p><!--[-->The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter.<!--]--></p><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-vertical-navigation--vertical-navigation&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-vertical-navigation--vertical-navigation&args=&viewMode=story&globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h3 id="when-and-how-to-use"><a href="#when-and-how-to-use"><!--[-->When and how to use<!--]--></a></h3><ul><!--[--><li><!--[-->Use in a page's sidebar.<!--]--></li><li><!--[-->Always keep the navigation links short. You can use a shorter version of the page title.<!--]--></li><li><!--[-->Display up to 4 levels of navigation.<!--]--></li><li><!--[-->Add a link for the section's 'home' page.<!--]--></li><li><!--[-->Use with at least 4 links.<!--]--></li><!--]--></ul><h3 id="when-and-how-not-to-use"><a href="#when-and-how-not-to-use"><!--[-->When and how not to use<!--]--></a></h3><ul><!--[--><li><!--[-->Don't embed on a page that doesn't have a sidebar.<!--]--></li><li><!--[-->Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing.<!--]--></li><li><!--[-->Don't use on a site with fewer than 5 pages.<!--]--></li><li><!--[-->Don’t use with icons.<!--]--></li><li><!--[-->Never use it to link to other sites.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 id="theming"><a href="#theming"><!--[-->Theming<!--]--></a></h2><p><!--[-->Vertical navigation uses colour and active state focus to highlight the current page the user is on.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-245ca824><div class="docs-example-header" data-v-245ca824><a href="/storybook/iframe.html?id=core-navigation-vertical-navigation--vertical-navigation&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-vertical-navigation--vertical-navigation&args=&viewMode=story&globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-245ca824 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-245ca824><div class="frame" data-v-245ca824></div></div><div class="docs-example-footer" data-v-245ca824><button class="docs-example-code-btn rpl-type-p-small" data-v-245ca824> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-245ca824><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="rationale"><a href="#rationale"><!--[-->Rationale<!--]--></a></h2><p><!--[-->To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[--><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->1.4.1<!--]--><!--]--><!----><!--]--></a> Use of Color:<!--]--></strong> Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/vertical-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/vertical-navigation/_payload.json">[{"state":1,"_errors":557,"serverRendered":560,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":249,"$sdd-globals":263,"$sdd-navigation":264},{"/design-system/components/vertical-navigation":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":244,"_id":245,"_source":246,"_file":247,"_extension":248},"/design-system/components/vertical-navigation","components",false,"","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","page","Core",{"type":14,"children":15,"toc":234},"root",[16,25,31,36,56,61,66,71,76,83,111,117,145,149,155,160,167,189,192,198,212],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"usage",[22],{"type":23,"value":24},"text","Usage",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Use vertical navigation to help users navigate a section of related pages.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Use vertical navigation to:",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,46,51],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44],{"type":23,"value":45},"let users find and navigate to relevant information",{"type":17,"tag":41,"props":47,"children":48},{},[49],{"type":23,"value":50},"show the user where, within your site’s content hierarchy, the page they are viewing is located",{"type":17,"tag":41,"props":52,"children":53},{},[54],{"type":23,"value":55},"show 4 nested content sections (parent sections) and a heading for the names of each section.",{"type":17,"tag":26,"props":57,"children":58},{},[59],{"type":23,"value":60},"Vertical navigation is placed next to your page’s body content.",{"type":17,"tag":26,"props":62,"children":63},{},[64],{"type":23,"value":65},"A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default.",{"type":17,"tag":26,"props":67,"children":68},{},[69],{"type":23,"value":70},"The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter.",{"type":17,"tag":72,"props":73,"children":75},"docs-example",{"id":74},"core-navigation-vertical-navigation--vertical-navigation",[],{"type":17,"tag":77,"props":78,"children":80},"h3",{"id":79},"when-and-how-to-use",[81],{"type":23,"value":82},"When and how to use",{"type":17,"tag":37,"props":84,"children":85},{},[86,91,96,101,106],{"type":17,"tag":41,"props":87,"children":88},{},[89],{"type":23,"value":90},"Use in a page's sidebar.",{"type":17,"tag":41,"props":92,"children":93},{},[94],{"type":23,"value":95},"Always keep the navigation links short. You can use a shorter version of the page title.",{"type":17,"tag":41,"props":97,"children":98},{},[99],{"type":23,"value":100},"Display up to 4 levels of navigation.",{"type":17,"tag":41,"props":102,"children":103},{},[104],{"type":23,"value":105},"Add a link for the section's 'home' page.",{"type":17,"tag":41,"props":107,"children":108},{},[109],{"type":23,"value":110},"Use with at least 4 links.",{"type":17,"tag":77,"props":112,"children":114},{"id":113},"when-and-how-not-to-use",[115],{"type":23,"value":116},"When and how not to use",{"type":17,"tag":37,"props":118,"children":119},{},[120,125,130,135,140],{"type":17,"tag":41,"props":121,"children":122},{},[123],{"type":23,"value":124},"Don't embed on a page that doesn't have a sidebar.",{"type":17,"tag":41,"props":126,"children":127},{},[128],{"type":23,"value":129},"Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing.",{"type":17,"tag":41,"props":131,"children":132},{},[133],{"type":23,"value":134},"Don't use on a site with fewer than 5 pages.",{"type":17,"tag":41,"props":136,"children":137},{},[138],{"type":23,"value":139},"Don’t use with icons.",{"type":17,"tag":41,"props":141,"children":142},{},[143],{"type":23,"value":144},"Never use it to link to other sites.",{"type":17,"tag":146,"props":147,"children":148},"hr",{},[],{"type":17,"tag":18,"props":150,"children":152},{"id":151},"theming",[153],{"type":23,"value":154},"Theming",{"type":17,"tag":26,"props":156,"children":157},{},[158],{"type":23,"value":159},"Vertical navigation uses colour and active state focus to highlight the current page the user is on.",{"type":17,"tag":161,"props":162,"children":163},"docs-theme-chooser",{},[164],{"type":17,"tag":72,"props":165,"children":166},{"id":74},[],{"type":17,"tag":26,"props":168,"children":169},{},[170,172,179,181,187],{"type":23,"value":171},"To create your own theme see ",{"type":17,"tag":173,"props":174,"children":176},"a",{"href":175},"/design-system/design/theming-guidance-for-designers",[177],{"type":23,"value":178},"theming guidance for designers",{"type":23,"value":180}," or ",{"type":17,"tag":173,"props":182,"children":184},{"href":183},"/design-system/develop/theming",[185],{"type":23,"value":186},"theming guidance for developers",{"type":23,"value":188},".",{"type":17,"tag":146,"props":190,"children":191},{},[],{"type":17,"tag":18,"props":193,"children":195},{"id":194},"rationale",[196],{"type":23,"value":197},"Rationale",{"type":17,"tag":26,"props":199,"children":200},{},[201,203,211],{"type":23,"value":202},"To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the ",{"type":17,"tag":173,"props":204,"children":208},{"href":205,"rel":206},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[207],"nofollow",[209],{"type":23,"value":210},"Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1",{"type":23,"value":188},{"type":17,"tag":213,"props":214,"children":215},"blockquote",{},[216],{"type":17,"tag":26,"props":217,"children":218},{},[219,232],{"type":17,"tag":220,"props":221,"children":222},"strong",{},[223,230],{"type":17,"tag":173,"props":224,"children":227},{"href":225,"rel":226},"https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color",[207],[228],{"type":23,"value":229},"1.4.1",{"type":23,"value":231}," Use of Color:",{"type":23,"value":233}," Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.",{"title":8,"searchDepth":235,"depth":235,"links":236},2,[237,242,243],{"id":20,"depth":235,"text":24,"children":238},[239,241],{"id":79,"depth":240,"text":82},3,{"id":113,"depth":240,"text":116},{"id":151,"depth":235,"text":154},{"id":194,"depth":235,"text":197},"markdown","content:design-system:5.components:vertical-navigation.md","content","design-system/5.components/vertical-navigation.md","md",{"/design-system/components/vertical-navigation":250},[251,257],{"_path":252,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":253,"description":254,"layout":11,"label":12,"_type":244,"_id":255,"_source":246,"_file":256,"_extension":248},"/design-system/components/timeline","Timeline","The Timeline component contains blocks of content displayed in a linear order.","content:design-system:5.components:timeline.md","design-system/5.components/timeline.md",{"_path":258,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":259,"description":260,"layout":11,"_type":244,"_id":261,"_source":246,"_file":262,"_extension":248},"/framework","Ripple Framework","Ripple framework contains the tools for building SDP sites using the Ripple design system components.","content:framework:1.index.md","framework/1.index.md",{},[265,270,511],{"title":266,"_path":267,"icon":268,"layout":269},"Ripple Design System","/","carbon:home","home",{"title":271,"_path":272,"children":273},"Design System","/design-system",[274,290,305,333,367],{"title":275,"_path":276,"children":277},"About","/design-system/about",[278,281,284,287],{"title":279,"_path":280,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":282,"_path":283,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":285,"_path":286,"layout":11},"Support","/design-system/about/getting-support",{"title":288,"_path":289,"layout":11},"Contributing","/design-system/about/contributing",{"title":291,"_path":292,"children":293},"Design","/design-system/design",[294,297,300,303],{"title":295,"_path":296,"layout":11},"Getting started","/design-system/design/getting-started",{"title":298,"_path":299,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":301,"_path":302,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":304,"_path":175,"layout":11},"Theming guidance for designers",{"title":306,"_path":307,"children":308},"Develop","/design-system/develop",[309,311,313,315],{"title":295,"_path":310,"layout":11},"/design-system/develop/getting-started",{"title":288,"_path":312,"layout":11},"/design-system/develop/contributing",{"title":314,"_path":183,"layout":11},"Theme and brand application",{"title":24,"_path":316,"children":317,"layout":11},"/design-system/develop/usage",[318,321,324,327,330],{"title":319,"_path":320,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":322,"_path":323,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":325,"_path":326,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":328,"_path":329,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":331,"_path":332,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":334,"_path":335,"children":336},"Styles","/design-system/styles",[337,340,343,346,349,352,355,358,361,364],{"title":338,"_path":339,"layout":11},"Colour","/design-system/styles/colour",{"title":341,"_path":342,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":344,"_path":345,"layout":11},"Grid","/design-system/styles/grid",{"title":347,"_path":348,"layout":11},"Icons","/design-system/styles/icons",{"title":350,"_path":351,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":353,"_path":354,"layout":11},"Layout","/design-system/styles/layout",{"title":356,"_path":357,"layout":11},"Logo","/design-system/styles/logo",{"title":359,"_path":360,"layout":11},"Motion","/design-system/styles/motion",{"title":362,"_path":363,"layout":11},"Spacing","/design-system/styles/spacing",{"title":365,"_path":366,"layout":11},"Typography","/design-system/styles/typography",{"title":368,"_path":369,"children":370},"Components","/design-system/components",[371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,510],{"title":372,"_path":373,"layout":11},"Accordion","/design-system/components/accordion",{"title":375,"_path":376,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":378,"_path":379,"layout":11},"Alert","/design-system/components/alert",{"title":381,"_path":382,"layout":11},"Block quote","/design-system/components/block-quote",{"title":384,"_path":385,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":387,"_path":388,"layout":11},"Button","/design-system/components/button",{"title":390,"_path":391,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":393,"_path":394,"layout":11},"Callout","/design-system/components/callout",{"title":396,"_path":397,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":399,"_path":400,"layout":11},"Card","/design-system/components/card",{"title":402,"_path":403,"layout":11},"Carousel","/design-system/components/carousel",{"title":405,"_path":406,"layout":11},"Category grid","/design-system/components/category-grid",{"title":408,"_path":409,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":411,"_path":412,"layout":11},"Chip","/design-system/components/chip",{"title":414,"_path":415,"layout":11},"Contact us","/design-system/components/contact-us",{"title":417,"_path":418,"layout":11},"Date input","/design-system/components/date-input",{"title":420,"_path":421,"layout":11},"Detail list","/design-system/components/detail-list",{"title":423,"_path":424,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":426,"_path":427,"layout":11},"File","/design-system/components/file",{"title":429,"_path":430,"layout":11},"Footer","/design-system/components/footer",{"title":432,"_path":433,"layout":11},"Form alert","/design-system/components/form-alert",{"title":435,"_path":436,"layout":11},"Form","/design-system/components/form",{"title":438,"_path":439,"layout":11},"Header","/design-system/components/header",{"title":441,"_path":442,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":444,"_path":445,"layout":11},"Input field","/design-system/components/input-field",{"title":447,"_path":448,"layout":11},"Key dates","/design-system/components/key-dates",{"title":450,"_path":451,"layout":11},"Media embed","/design-system/components/media-embed",{"title":453,"_path":454,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":456,"_path":457,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":459,"_path":460,"layout":11},"Media","/design-system/components/media",{"title":462,"_path":463,"layout":11},"Option button","/design-system/components/option-button",{"title":465,"_path":466,"layout":11},"Page action","/design-system/components/page-action",{"title":468,"_path":469,"layout":11},"Pagination","/design-system/components/pagination",{"title":471,"_path":472,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":474,"_path":475,"layout":11},"Profile","/design-system/components/profile",{"title":477,"_path":478,"layout":11},"Radio button","/design-system/components/radio-button",{"title":480,"_path":481,"layout":11},"Related links","/design-system/components/related-links",{"title":483,"_path":484,"layout":11},"Results listing","/design-system/components/results-listing",{"title":486,"_path":487,"layout":11},"Search bar","/design-system/components/search-bar",{"title":489,"_path":490,"layout":11},"Skip link","/design-system/components/skip-link",{"title":492,"_path":493,"layout":11},"Social share","/design-system/components/social-share",{"title":495,"_path":496,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":498,"_path":499,"layout":11},"Table","/design-system/components/table",{"title":501,"_path":502,"layout":11},"Tabs","/design-system/components/tabs",{"title":504,"_path":505,"layout":11},"Tag","/design-system/components/tag",{"title":507,"_path":508,"layout":11},"Text area","/design-system/components/text-area",{"title":253,"_path":252,"layout":11},{"title":9,"_path":5,"layout":11},{"title":259,"_path":258,"children":512,"layout":11},[513,514,532,554],{"title":259,"_path":258,"layout":11},{"title":515,"_path":516,"children":517},"Key Concepts","/framework/key-concepts",[518,520,523,526,529],{"title":325,"_path":519,"layout":11},"/framework/key-concepts/nuxt",{"title":521,"_path":522,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":524,"_path":525,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":527,"_path":528,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":530,"_path":531,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":533,"_path":534,"children":535},"Guides","/framework/guides",[536,539,542,545,548,551],{"title":537,"_path":538,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":540,"_path":541,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":543,"_path":544,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":546,"_path":547,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":549,"_path":550,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":552,"_path":553,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":555,"_path":556,"layout":11},"Core modules","/framework/core-modules",["Reactive",558],{"module-navigation":559},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/design/design-tokens/index.html b/design-system/design/design-tokens/index.html index 42406e5222..4b4a173eba 100644 --- a/design-system/design/design-tokens/index.html +++ b/design-system/design/design-tokens/index.html @@ -24,7 +24,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Design tokens</h1><p class="rpl-type-p-large" data-v-3163c6df>Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="what-is-a-design-token"><a href="#what-is-a-design-token"><!--[-->What is a Design token?<!--]--></a></h2><p><!--[-->Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style.<!--]--></p><p><!--[-->Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code.<!--]--></p><p><!--[-->By storing design decisions, they replace the need to use static values (for example, hex code values for colour).<!--]--></p><p><!--[-->Ripple Design System has tokens for:<!--]--></p><ul><!--[--><li><!--[-->colour<!--]--></li><li><!--[-->typography<!--]--></li><li><!--[-->spacing<!--]--></li><li><!--[-->elevation<!--]--></li><li><!--[-->borders<!--]--></li><li><!--[-->motion values.<!--]--></li><!--]--></ul><h2 id="why-use-design-tokens"><a href="#why-use-design-tokens"><!--[-->Why use design tokens?<!--]--></a></h2><p><!--[-->Using design tokens keeps your UI consistent across different platforms.<!--]--></p><p><!--[-->Design tokens are the single source of truth. You can use them across designs and code.<!--]--></p><p><!--[-->Since design tokens let you make value changes at scale, design language changes are easier to make.<!--]--></p><p><!--[-->Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products.<!--]--></p><h2 id="ripple-design-tokens"><a href="#ripple-design-tokens"><!--[-->Ripple design tokens<!--]--></a></h2><p><!--[-->A Ripple token has 2 parts:<!--]--></p><ul><!--[--><li><!--[-->a token name, such as <strong><!--[-->rpl-clr-primary<!--]--></strong><!--]--></li><li><!--[-->an associated value, such as <strong><!--[-->#0052C2<!--]--></strong>.<!--]--></li><!--]--></ul><p><!--[-->The token's value can be one of several things: colour, a typeface, a measurement or even another token.<!--]--></p><h2 id="how-to-read-ripple-design-token-names"><a href="#how-to-read-ripple-design-token-names"><!--[-->How to read Ripple design token names<!--]--></a></h2><p><!--[-->Knowing how to read a token name helps you find the right token faster.<!--]--></p><h3 id="parts-of-design-token-names"><a href="#parts-of-design-token-names"><!--[-->Parts of design token names<!--]--></a></h3><ol><!--[--><li><!--[--><strong><!--[-->rpl<!--]--></strong>: design system<!--]--></li><li><!--[--><strong><!--[-->clr<!--]--></strong> (colour) or <strong><!--[-->type<!--]--></strong> (typography) or <strong><!--[-->sp<!--]--></strong> (spacing) for example: token type<!--]--></li><li><!--[--><strong><!--[-->primary-accessible<!--]--></strong> (a descriptive name) or <strong><!--[-->3<!--]--></strong> (a number), for example: see below<!--]--></li><!--]--></ol><h3 id="examples"><a href="#examples"><!--[-->Examples<!--]--></a></h3><ul><!--[--><li><!--[--><strong><!--[-->rpl-clr-primary-accessible<!--]--></strong><!--]--></li><li><!--[--><strong><!--[-->rpl-sp-4<!--]--></strong><!--]--></li><!--]--></ul><h3 id="steps-and-explanations"><a href="#steps-and-explanations"><!--[-->Steps and explanations<!--]--></a></h3><ol><!--[--><li><!--[-->Start all design tokens with the system name: <strong><!--[-->rpl<!--]--></strong> is for Ripple.<!--]--></li><li><!--[-->Then, place an abbreviation for the token type: <strong><!--[-->clr<!--]--></strong> is for colour; type is for typography; <strong><!--[-->sp<!--]--></strong> is for spacing.<!--]--></li><li><!--[-->End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, <strong><!--[-->primary-accessible<!--]--></strong> in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. <strong><!--[-->4<!--]--></strong> in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System.<!--]--></li><!--]--></ol><h2 id="best-practices"><a href="#best-practices"><!--[-->Best practices<!--]--></a></h2><ul><!--[--><li><!--[-->Choose tokens based on meaning rather than appearance only<!--]--></li><li><!--[-->Choose the token with the most specific meaning that is available and applies to your content’s role on the site<!--]--></li><li><!--[-->Do not choose tokens based only how the end result looks on your site<!--]--></li><li><!--[-->For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar<!--]--></li><li><!--[-->For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary<!--]--></li><li><!--[-->Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience<!--]--></li><li><!--[-->If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later<!--]--></li><!--]--></ul><h2 id="why-are-tokens-important-for-design"><a href="#why-are-tokens-important-for-design"><!--[-->Why are tokens important for design?<!--]--></a></h2><h3 id="purpose-driven"><a href="#purpose-driven"><!--[-->Purpose-driven<!--]--></a></h3><p><!--[-->Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app.<!--]--></p><p><!--[-->Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale.<!--]--></p><h3 id="single-source-of-truth"><a href="#single-source-of-truth"><!--[-->Single source of truth<!--]--></a></h3><p><!--[-->Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works.<!--]--></p><p><!--[-->Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation.<!--]--></p><h3 id="system-wide-updates"><a href="#system-wide-updates"><!--[-->System-wide updates<!--]--></a></h3><p><!--[-->They let developers and designers change system-wide themes and contexts, using only a single update.<!--]--></p><p><!--[-->Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code.<!--]--></p><h2 id="for-developers"><a href="#for-developers"><!--[-->For developers<!--]--></a></h2><p><!--[-->For information for developers using tokens to theme Ripple components see the <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guide<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/3.design-tokens.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/design-tokens/_payload.json">[{"state":1,"_errors":752,"serverRendered":754,"path":755,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":442,"$sdd-globals":456,"$sdd-navigation":457},{"/design-system/design/design-tokens":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":437,"_id":438,"_source":439,"_file":440,"_extension":441},"/design-system/design/design-tokens","design",false,"","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","page","Core",{"type":14,"children":15,"toc":418},"root",[16,25,31,36,41,46,81,87,92,97,102,107,113,118,144,149,155,160,167,222,228,247,253,302,308,346,352,358,363,368,374,379,384,390,395,400,406],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"what-is-a-design-token",[22],{"type":23,"value":24},"text","What is a Design token?",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"By storing design decisions, they replace the need to use static values (for example, hex code values for colour).",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Ripple Design System has tokens for:",{"type":17,"tag":47,"props":48,"children":49},"ul",{},[50,56,61,66,71,76],{"type":17,"tag":51,"props":52,"children":53},"li",{},[54],{"type":23,"value":55},"colour",{"type":17,"tag":51,"props":57,"children":58},{},[59],{"type":23,"value":60},"typography",{"type":17,"tag":51,"props":62,"children":63},{},[64],{"type":23,"value":65},"spacing",{"type":17,"tag":51,"props":67,"children":68},{},[69],{"type":23,"value":70},"elevation",{"type":17,"tag":51,"props":72,"children":73},{},[74],{"type":23,"value":75},"borders",{"type":17,"tag":51,"props":77,"children":78},{},[79],{"type":23,"value":80},"motion values.",{"type":17,"tag":18,"props":82,"children":84},{"id":83},"why-use-design-tokens",[85],{"type":23,"value":86},"Why use design tokens?",{"type":17,"tag":26,"props":88,"children":89},{},[90],{"type":23,"value":91},"Using design tokens keeps your UI consistent across different platforms.",{"type":17,"tag":26,"props":93,"children":94},{},[95],{"type":23,"value":96},"Design tokens are the single source of truth. You can use them across designs and code.",{"type":17,"tag":26,"props":98,"children":99},{},[100],{"type":23,"value":101},"Since design tokens let you make value changes at scale, design language changes are easier to make.",{"type":17,"tag":26,"props":103,"children":104},{},[105],{"type":23,"value":106},"Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products.",{"type":17,"tag":18,"props":108,"children":110},{"id":109},"ripple-design-tokens",[111],{"type":23,"value":112},"Ripple design tokens",{"type":17,"tag":26,"props":114,"children":115},{},[116],{"type":23,"value":117},"A Ripple token has 2 parts:",{"type":17,"tag":47,"props":119,"children":120},{},[121,132],{"type":17,"tag":51,"props":122,"children":123},{},[124,126],{"type":23,"value":125},"a token name, such as ",{"type":17,"tag":127,"props":128,"children":129},"strong",{},[130],{"type":23,"value":131},"rpl-clr-primary",{"type":17,"tag":51,"props":133,"children":134},{},[135,137,142],{"type":23,"value":136},"an associated value, such as ",{"type":17,"tag":127,"props":138,"children":139},{},[140],{"type":23,"value":141},"#0052C2",{"type":23,"value":143},".",{"type":17,"tag":26,"props":145,"children":146},{},[147],{"type":23,"value":148},"The token's value can be one of several things: colour, a typeface, a measurement or even another token.",{"type":17,"tag":18,"props":150,"children":152},{"id":151},"how-to-read-ripple-design-token-names",[153],{"type":23,"value":154},"How to read Ripple design token names",{"type":17,"tag":26,"props":156,"children":157},{},[158],{"type":23,"value":159},"Knowing how to read a token name helps you find the right token faster.",{"type":17,"tag":161,"props":162,"children":164},"h3",{"id":163},"parts-of-design-token-names",[165],{"type":23,"value":166},"Parts of design token names",{"type":17,"tag":168,"props":169,"children":170},"ol",{},[171,181,205],{"type":17,"tag":51,"props":172,"children":173},{},[174,179],{"type":17,"tag":127,"props":175,"children":176},{},[177],{"type":23,"value":178},"rpl",{"type":23,"value":180},": design system",{"type":17,"tag":51,"props":182,"children":183},{},[184,189,191,196,198,203],{"type":17,"tag":127,"props":185,"children":186},{},[187],{"type":23,"value":188},"clr",{"type":23,"value":190}," (colour) or ",{"type":17,"tag":127,"props":192,"children":193},{},[194],{"type":23,"value":195},"type",{"type":23,"value":197}," (typography) or ",{"type":17,"tag":127,"props":199,"children":200},{},[201],{"type":23,"value":202},"sp",{"type":23,"value":204}," (spacing) for example: token type",{"type":17,"tag":51,"props":206,"children":207},{},[208,213,215,220],{"type":17,"tag":127,"props":209,"children":210},{},[211],{"type":23,"value":212},"primary-accessible",{"type":23,"value":214}," (a descriptive name) or ",{"type":17,"tag":127,"props":216,"children":217},{},[218],{"type":23,"value":219},"3",{"type":23,"value":221}," (a number), for example: see below",{"type":17,"tag":161,"props":223,"children":225},{"id":224},"examples",[226],{"type":23,"value":227},"Examples",{"type":17,"tag":47,"props":229,"children":230},{},[231,239],{"type":17,"tag":51,"props":232,"children":233},{},[234],{"type":17,"tag":127,"props":235,"children":236},{},[237],{"type":23,"value":238},"rpl-clr-primary-accessible",{"type":17,"tag":51,"props":240,"children":241},{},[242],{"type":17,"tag":127,"props":243,"children":244},{},[245],{"type":23,"value":246},"rpl-sp-4",{"type":17,"tag":161,"props":248,"children":250},{"id":249},"steps-and-explanations",[251],{"type":23,"value":252},"Steps and explanations",{"type":17,"tag":168,"props":254,"children":255},{},[256,267,284],{"type":17,"tag":51,"props":257,"children":258},{},[259,261,265],{"type":23,"value":260},"Start all design tokens with the system name: ",{"type":17,"tag":127,"props":262,"children":263},{},[264],{"type":23,"value":178},{"type":23,"value":266}," is for Ripple.",{"type":17,"tag":51,"props":268,"children":269},{},[270,272,276,278,282],{"type":23,"value":271},"Then, place an abbreviation for the token type: ",{"type":17,"tag":127,"props":273,"children":274},{},[275],{"type":23,"value":188},{"type":23,"value":277}," is for colour; type is for typography; ",{"type":17,"tag":127,"props":279,"children":280},{},[281],{"type":23,"value":202},{"type":23,"value":283}," is for spacing.",{"type":17,"tag":51,"props":285,"children":286},{},[287,289,293,295,300],{"type":23,"value":288},"End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, ",{"type":17,"tag":127,"props":290,"children":291},{},[292],{"type":23,"value":212},{"type":23,"value":294}," in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. ",{"type":17,"tag":127,"props":296,"children":297},{},[298],{"type":23,"value":299},"4",{"type":23,"value":301}," in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System.",{"type":17,"tag":18,"props":303,"children":305},{"id":304},"best-practices",[306],{"type":23,"value":307},"Best practices",{"type":17,"tag":47,"props":309,"children":310},{},[311,316,321,326,331,336,341],{"type":17,"tag":51,"props":312,"children":313},{},[314],{"type":23,"value":315},"Choose tokens based on meaning rather than appearance only",{"type":17,"tag":51,"props":317,"children":318},{},[319],{"type":23,"value":320},"Choose the token with the most specific meaning that is available and applies to your content’s role on the site",{"type":17,"tag":51,"props":322,"children":323},{},[324],{"type":23,"value":325},"Do not choose tokens based only how the end result looks on your site",{"type":17,"tag":51,"props":327,"children":328},{},[329],{"type":23,"value":330},"For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar",{"type":17,"tag":51,"props":332,"children":333},{},[334],{"type":23,"value":335},"For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary",{"type":17,"tag":51,"props":337,"children":338},{},[339],{"type":23,"value":340},"Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience",{"type":17,"tag":51,"props":342,"children":343},{},[344],{"type":23,"value":345},"If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later",{"type":17,"tag":18,"props":347,"children":349},{"id":348},"why-are-tokens-important-for-design",[350],{"type":23,"value":351},"Why are tokens important for design?",{"type":17,"tag":161,"props":353,"children":355},{"id":354},"purpose-driven",[356],{"type":23,"value":357},"Purpose-driven",{"type":17,"tag":26,"props":359,"children":360},{},[361],{"type":23,"value":362},"Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app.",{"type":17,"tag":26,"props":364,"children":365},{},[366],{"type":23,"value":367},"Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale.",{"type":17,"tag":161,"props":369,"children":371},{"id":370},"single-source-of-truth",[372],{"type":23,"value":373},"Single source of truth",{"type":17,"tag":26,"props":375,"children":376},{},[377],{"type":23,"value":378},"Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works.",{"type":17,"tag":26,"props":380,"children":381},{},[382],{"type":23,"value":383},"Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation.",{"type":17,"tag":161,"props":385,"children":387},{"id":386},"system-wide-updates",[388],{"type":23,"value":389},"System-wide updates",{"type":17,"tag":26,"props":391,"children":392},{},[393],{"type":23,"value":394},"They let developers and designers change system-wide themes and contexts, using only a single update.",{"type":17,"tag":26,"props":396,"children":397},{},[398],{"type":23,"value":399},"Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code.",{"type":17,"tag":18,"props":401,"children":403},{"id":402},"for-developers",[404],{"type":23,"value":405},"For developers",{"type":17,"tag":26,"props":407,"children":408},{},[409,411],{"type":23,"value":410},"For information for developers using tokens to theme Ripple components see the ",{"type":17,"tag":412,"props":413,"children":415},"a",{"href":414},"/design-system/develop/theming",[416],{"type":23,"value":417},"theming guide",{"title":8,"searchDepth":419,"depth":419,"links":420},2,[421,422,423,424,430,431,436],{"id":20,"depth":419,"text":24},{"id":83,"depth":419,"text":86},{"id":109,"depth":419,"text":112},{"id":151,"depth":419,"text":154,"children":425},[426,428,429],{"id":163,"depth":427,"text":166},3,{"id":224,"depth":427,"text":227},{"id":249,"depth":427,"text":252},{"id":304,"depth":419,"text":307},{"id":348,"depth":419,"text":351,"children":432},[433,434,435],{"id":354,"depth":427,"text":357},{"id":370,"depth":427,"text":373},{"id":386,"depth":427,"text":389},{"id":402,"depth":419,"text":405},"markdown","content:design-system:2.design:3.design-tokens.md","content","design-system/2.design/3.design-tokens.md","md",{"/design-system/design/design-tokens":443},[444,450],{"_path":445,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":446,"description":447,"layout":11,"label":12,"_type":437,"_id":448,"_source":439,"_file":449,"_extension":441},"/design-system/design/our-design-principles","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","content:design-system:2.design:2.our-design-principles.md","design-system/2.design/2.our-design-principles.md",{"_path":451,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":452,"description":453,"layout":11,"label":12,"_type":437,"_id":454,"_source":439,"_file":455,"_extension":441},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",null,"content:design-system:2.design:4.theming-guidance-for-designers.md","design-system/2.design/4.theming-guidance-for-designers.md",{},[458,463,704],{"title":459,"_path":460,"icon":461,"layout":462},"Ripple Design System","/","carbon:home","home",{"title":464,"_path":465,"children":466},"Design System","/design-system",[467,483,493,522,556],{"title":468,"_path":469,"children":470},"About","/design-system/about",[471,474,477,480],{"title":472,"_path":473,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":475,"_path":476,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":478,"_path":479,"layout":11},"Support","/design-system/about/getting-support",{"title":481,"_path":482,"layout":11},"Contributing","/design-system/about/contributing",{"title":484,"_path":485,"children":486},"Design","/design-system/design",[487,490,491,492],{"title":488,"_path":489,"layout":11},"Getting started","/design-system/design/getting-started",{"title":446,"_path":445,"layout":11},{"title":9,"_path":5,"layout":11},{"title":452,"_path":451,"layout":11},{"title":494,"_path":495,"children":496},"Develop","/design-system/develop",[497,499,501,503],{"title":488,"_path":498,"layout":11},"/design-system/develop/getting-started",{"title":481,"_path":500,"layout":11},"/design-system/develop/contributing",{"title":502,"_path":414,"layout":11},"Theme and brand application",{"title":504,"_path":505,"children":506,"layout":11},"Usage","/design-system/develop/usage",[507,510,513,516,519],{"title":508,"_path":509,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":511,"_path":512,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":514,"_path":515,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":517,"_path":518,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":520,"_path":521,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":523,"_path":524,"children":525},"Styles","/design-system/styles",[526,529,532,535,538,541,544,547,550,553],{"title":527,"_path":528,"layout":11},"Colour","/design-system/styles/colour",{"title":530,"_path":531,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":533,"_path":534,"layout":11},"Grid","/design-system/styles/grid",{"title":536,"_path":537,"layout":11},"Icons","/design-system/styles/icons",{"title":539,"_path":540,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":542,"_path":543,"layout":11},"Layout","/design-system/styles/layout",{"title":545,"_path":546,"layout":11},"Logo","/design-system/styles/logo",{"title":548,"_path":549,"layout":11},"Motion","/design-system/styles/motion",{"title":551,"_path":552,"layout":11},"Spacing","/design-system/styles/spacing",{"title":554,"_path":555,"layout":11},"Typography","/design-system/styles/typography",{"title":557,"_path":558,"children":559},"Components","/design-system/components",[560,563,566,569,572,575,578,581,584,587,590,593,596,599,602,605,608,611,614,617,620,623,626,629,632,635,638,641,644,647,650,653,656,659,662,665,668,671,674,677,680,683,686,689,692,695,698,701],{"title":561,"_path":562,"layout":11},"Accordion","/design-system/components/accordion",{"title":564,"_path":565,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":567,"_path":568,"layout":11},"Alert","/design-system/components/alert",{"title":570,"_path":571,"layout":11},"Block quote","/design-system/components/block-quote",{"title":573,"_path":574,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":576,"_path":577,"layout":11},"Button","/design-system/components/button",{"title":579,"_path":580,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":582,"_path":583,"layout":11},"Callout","/design-system/components/callout",{"title":585,"_path":586,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":588,"_path":589,"layout":11},"Card","/design-system/components/card",{"title":591,"_path":592,"layout":11},"Carousel","/design-system/components/carousel",{"title":594,"_path":595,"layout":11},"Category grid","/design-system/components/category-grid",{"title":597,"_path":598,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":600,"_path":601,"layout":11},"Chip","/design-system/components/chip",{"title":603,"_path":604,"layout":11},"Contact us","/design-system/components/contact-us",{"title":606,"_path":607,"layout":11},"Date input","/design-system/components/date-input",{"title":609,"_path":610,"layout":11},"Detail list","/design-system/components/detail-list",{"title":612,"_path":613,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":615,"_path":616,"layout":11},"File","/design-system/components/file",{"title":618,"_path":619,"layout":11},"Footer","/design-system/components/footer",{"title":621,"_path":622,"layout":11},"Form alert","/design-system/components/form-alert",{"title":624,"_path":625,"layout":11},"Form","/design-system/components/form",{"title":627,"_path":628,"layout":11},"Header","/design-system/components/header",{"title":630,"_path":631,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":633,"_path":634,"layout":11},"Input field","/design-system/components/input-field",{"title":636,"_path":637,"layout":11},"Key dates","/design-system/components/key-dates",{"title":639,"_path":640,"layout":11},"Media embed","/design-system/components/media-embed",{"title":642,"_path":643,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":645,"_path":646,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":648,"_path":649,"layout":11},"Media","/design-system/components/media",{"title":651,"_path":652,"layout":11},"Option button","/design-system/components/option-button",{"title":654,"_path":655,"layout":11},"Page action","/design-system/components/page-action",{"title":657,"_path":658,"layout":11},"Pagination","/design-system/components/pagination",{"title":660,"_path":661,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":663,"_path":664,"layout":11},"Profile","/design-system/components/profile",{"title":666,"_path":667,"layout":11},"Radio button","/design-system/components/radio-button",{"title":669,"_path":670,"layout":11},"Related links","/design-system/components/related-links",{"title":672,"_path":673,"layout":11},"Results listing","/design-system/components/results-listing",{"title":675,"_path":676,"layout":11},"Search bar","/design-system/components/search-bar",{"title":678,"_path":679,"layout":11},"Skip link","/design-system/components/skip-link",{"title":681,"_path":682,"layout":11},"Social share","/design-system/components/social-share",{"title":684,"_path":685,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":687,"_path":688,"layout":11},"Table","/design-system/components/table",{"title":690,"_path":691,"layout":11},"Tabs","/design-system/components/tabs",{"title":693,"_path":694,"layout":11},"Tag","/design-system/components/tag",{"title":696,"_path":697,"layout":11},"Text area","/design-system/components/text-area",{"title":699,"_path":700,"layout":11},"Timeline","/design-system/components/timeline",{"title":702,"_path":703,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":705,"_path":706,"children":707,"layout":11},"Ripple Framework","/framework",[708,709,727,749],{"title":705,"_path":706,"layout":11},{"title":710,"_path":711,"children":712},"Key Concepts","/framework/key-concepts",[713,715,718,721,724],{"title":514,"_path":714,"layout":11},"/framework/key-concepts/nuxt",{"title":716,"_path":717,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":719,"_path":720,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":722,"_path":723,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":725,"_path":726,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":728,"_path":729,"children":730},"Guides","/framework/guides",[731,734,737,740,743,746],{"title":732,"_path":733,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":735,"_path":736,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":738,"_path":739,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":741,"_path":742,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":744,"_path":745,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":747,"_path":748,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":750,"_path":751,"layout":11},"Core modules","/framework/core-modules",["Reactive",753],{"module-navigation":453},true,"/design-system/design/design-tokens/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Design tokens</h1><p class="rpl-type-p-large" data-v-3163c6df>Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="what-is-a-design-token"><a href="#what-is-a-design-token"><!--[-->What is a Design token?<!--]--></a></h2><p><!--[-->Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style.<!--]--></p><p><!--[-->Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code.<!--]--></p><p><!--[-->By storing design decisions, they replace the need to use static values (for example, hex code values for colour).<!--]--></p><p><!--[-->Ripple Design System has tokens for:<!--]--></p><ul><!--[--><li><!--[-->colour<!--]--></li><li><!--[-->typography<!--]--></li><li><!--[-->spacing<!--]--></li><li><!--[-->elevation<!--]--></li><li><!--[-->borders<!--]--></li><li><!--[-->motion values.<!--]--></li><!--]--></ul><h2 id="why-use-design-tokens"><a href="#why-use-design-tokens"><!--[-->Why use design tokens?<!--]--></a></h2><p><!--[-->Using design tokens keeps your UI consistent across different platforms.<!--]--></p><p><!--[-->Design tokens are the single source of truth. You can use them across designs and code.<!--]--></p><p><!--[-->Since design tokens let you make value changes at scale, design language changes are easier to make.<!--]--></p><p><!--[-->Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products.<!--]--></p><h2 id="ripple-design-tokens"><a href="#ripple-design-tokens"><!--[-->Ripple design tokens<!--]--></a></h2><p><!--[-->A Ripple token has 2 parts:<!--]--></p><ul><!--[--><li><!--[-->a token name, such as <strong><!--[-->rpl-clr-primary<!--]--></strong><!--]--></li><li><!--[-->an associated value, such as <strong><!--[-->#0052C2<!--]--></strong>.<!--]--></li><!--]--></ul><p><!--[-->The token's value can be one of several things: colour, a typeface, a measurement or even another token.<!--]--></p><h2 id="how-to-read-ripple-design-token-names"><a href="#how-to-read-ripple-design-token-names"><!--[-->How to read Ripple design token names<!--]--></a></h2><p><!--[-->Knowing how to read a token name helps you find the right token faster.<!--]--></p><h3 id="parts-of-design-token-names"><a href="#parts-of-design-token-names"><!--[-->Parts of design token names<!--]--></a></h3><ol><!--[--><li><!--[--><strong><!--[-->rpl<!--]--></strong>: design system<!--]--></li><li><!--[--><strong><!--[-->clr<!--]--></strong> (colour) or <strong><!--[-->type<!--]--></strong> (typography) or <strong><!--[-->sp<!--]--></strong> (spacing) for example: token type<!--]--></li><li><!--[--><strong><!--[-->primary-accessible<!--]--></strong> (a descriptive name) or <strong><!--[-->3<!--]--></strong> (a number), for example: see below<!--]--></li><!--]--></ol><h3 id="examples"><a href="#examples"><!--[-->Examples<!--]--></a></h3><ul><!--[--><li><!--[--><strong><!--[-->rpl-clr-primary-accessible<!--]--></strong><!--]--></li><li><!--[--><strong><!--[-->rpl-sp-4<!--]--></strong><!--]--></li><!--]--></ul><h3 id="steps-and-explanations"><a href="#steps-and-explanations"><!--[-->Steps and explanations<!--]--></a></h3><ol><!--[--><li><!--[-->Start all design tokens with the system name: <strong><!--[-->rpl<!--]--></strong> is for Ripple.<!--]--></li><li><!--[-->Then, place an abbreviation for the token type: <strong><!--[-->clr<!--]--></strong> is for colour; type is for typography; <strong><!--[-->sp<!--]--></strong> is for spacing.<!--]--></li><li><!--[-->End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, <strong><!--[-->primary-accessible<!--]--></strong> in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. <strong><!--[-->4<!--]--></strong> in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System.<!--]--></li><!--]--></ol><h2 id="best-practices"><a href="#best-practices"><!--[-->Best practices<!--]--></a></h2><ul><!--[--><li><!--[-->Choose tokens based on meaning rather than appearance only<!--]--></li><li><!--[-->Choose the token with the most specific meaning that is available and applies to your content’s role on the site<!--]--></li><li><!--[-->Do not choose tokens based only how the end result looks on your site<!--]--></li><li><!--[-->For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar<!--]--></li><li><!--[-->For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary<!--]--></li><li><!--[-->Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience<!--]--></li><li><!--[-->If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later<!--]--></li><!--]--></ul><h2 id="why-are-tokens-important-for-design"><a href="#why-are-tokens-important-for-design"><!--[-->Why are tokens important for design?<!--]--></a></h2><h3 id="purpose-driven"><a href="#purpose-driven"><!--[-->Purpose-driven<!--]--></a></h3><p><!--[-->Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app.<!--]--></p><p><!--[-->Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale.<!--]--></p><h3 id="single-source-of-truth"><a href="#single-source-of-truth"><!--[-->Single source of truth<!--]--></a></h3><p><!--[-->Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works.<!--]--></p><p><!--[-->Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation.<!--]--></p><h3 id="system-wide-updates"><a href="#system-wide-updates"><!--[-->System-wide updates<!--]--></a></h3><p><!--[-->They let developers and designers change system-wide themes and contexts, using only a single update.<!--]--></p><p><!--[-->Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code.<!--]--></p><h2 id="for-developers"><a href="#for-developers"><!--[-->For developers<!--]--></a></h2><p><!--[-->For information for developers using tokens to theme Ripple components see the <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guide<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/3.design-tokens.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/design-tokens/_payload.json">[{"state":1,"_errors":752,"serverRendered":754,"path":755,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":442,"$sdd-globals":456,"$sdd-navigation":457},{"/design-system/design/design-tokens":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":437,"_id":438,"_source":439,"_file":440,"_extension":441},"/design-system/design/design-tokens","design",false,"","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","page","Core",{"type":14,"children":15,"toc":418},"root",[16,25,31,36,41,46,81,87,92,97,102,107,113,118,144,149,155,160,167,222,228,247,253,302,308,346,352,358,363,368,374,379,384,390,395,400,406],{"type":17,"tag":18,"props":19,"children":21},"element","h2",{"id":20},"what-is-a-design-token",[22],{"type":23,"value":24},"text","What is a Design token?",{"type":17,"tag":26,"props":27,"children":28},"p",{},[29],{"type":23,"value":30},"Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style.",{"type":17,"tag":26,"props":32,"children":33},{},[34],{"type":23,"value":35},"Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code.",{"type":17,"tag":26,"props":37,"children":38},{},[39],{"type":23,"value":40},"By storing design decisions, they replace the need to use static values (for example, hex code values for colour).",{"type":17,"tag":26,"props":42,"children":43},{},[44],{"type":23,"value":45},"Ripple Design System has tokens for:",{"type":17,"tag":47,"props":48,"children":49},"ul",{},[50,56,61,66,71,76],{"type":17,"tag":51,"props":52,"children":53},"li",{},[54],{"type":23,"value":55},"colour",{"type":17,"tag":51,"props":57,"children":58},{},[59],{"type":23,"value":60},"typography",{"type":17,"tag":51,"props":62,"children":63},{},[64],{"type":23,"value":65},"spacing",{"type":17,"tag":51,"props":67,"children":68},{},[69],{"type":23,"value":70},"elevation",{"type":17,"tag":51,"props":72,"children":73},{},[74],{"type":23,"value":75},"borders",{"type":17,"tag":51,"props":77,"children":78},{},[79],{"type":23,"value":80},"motion values.",{"type":17,"tag":18,"props":82,"children":84},{"id":83},"why-use-design-tokens",[85],{"type":23,"value":86},"Why use design tokens?",{"type":17,"tag":26,"props":88,"children":89},{},[90],{"type":23,"value":91},"Using design tokens keeps your UI consistent across different platforms.",{"type":17,"tag":26,"props":93,"children":94},{},[95],{"type":23,"value":96},"Design tokens are the single source of truth. You can use them across designs and code.",{"type":17,"tag":26,"props":98,"children":99},{},[100],{"type":23,"value":101},"Since design tokens let you make value changes at scale, design language changes are easier to make.",{"type":17,"tag":26,"props":103,"children":104},{},[105],{"type":23,"value":106},"Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products.",{"type":17,"tag":18,"props":108,"children":110},{"id":109},"ripple-design-tokens",[111],{"type":23,"value":112},"Ripple design tokens",{"type":17,"tag":26,"props":114,"children":115},{},[116],{"type":23,"value":117},"A Ripple token has 2 parts:",{"type":17,"tag":47,"props":119,"children":120},{},[121,132],{"type":17,"tag":51,"props":122,"children":123},{},[124,126],{"type":23,"value":125},"a token name, such as ",{"type":17,"tag":127,"props":128,"children":129},"strong",{},[130],{"type":23,"value":131},"rpl-clr-primary",{"type":17,"tag":51,"props":133,"children":134},{},[135,137,142],{"type":23,"value":136},"an associated value, such as ",{"type":17,"tag":127,"props":138,"children":139},{},[140],{"type":23,"value":141},"#0052C2",{"type":23,"value":143},".",{"type":17,"tag":26,"props":145,"children":146},{},[147],{"type":23,"value":148},"The token's value can be one of several things: colour, a typeface, a measurement or even another token.",{"type":17,"tag":18,"props":150,"children":152},{"id":151},"how-to-read-ripple-design-token-names",[153],{"type":23,"value":154},"How to read Ripple design token names",{"type":17,"tag":26,"props":156,"children":157},{},[158],{"type":23,"value":159},"Knowing how to read a token name helps you find the right token faster.",{"type":17,"tag":161,"props":162,"children":164},"h3",{"id":163},"parts-of-design-token-names",[165],{"type":23,"value":166},"Parts of design token names",{"type":17,"tag":168,"props":169,"children":170},"ol",{},[171,181,205],{"type":17,"tag":51,"props":172,"children":173},{},[174,179],{"type":17,"tag":127,"props":175,"children":176},{},[177],{"type":23,"value":178},"rpl",{"type":23,"value":180},": design system",{"type":17,"tag":51,"props":182,"children":183},{},[184,189,191,196,198,203],{"type":17,"tag":127,"props":185,"children":186},{},[187],{"type":23,"value":188},"clr",{"type":23,"value":190}," (colour) or ",{"type":17,"tag":127,"props":192,"children":193},{},[194],{"type":23,"value":195},"type",{"type":23,"value":197}," (typography) or ",{"type":17,"tag":127,"props":199,"children":200},{},[201],{"type":23,"value":202},"sp",{"type":23,"value":204}," (spacing) for example: token type",{"type":17,"tag":51,"props":206,"children":207},{},[208,213,215,220],{"type":17,"tag":127,"props":209,"children":210},{},[211],{"type":23,"value":212},"primary-accessible",{"type":23,"value":214}," (a descriptive name) or ",{"type":17,"tag":127,"props":216,"children":217},{},[218],{"type":23,"value":219},"3",{"type":23,"value":221}," (a number), for example: see below",{"type":17,"tag":161,"props":223,"children":225},{"id":224},"examples",[226],{"type":23,"value":227},"Examples",{"type":17,"tag":47,"props":229,"children":230},{},[231,239],{"type":17,"tag":51,"props":232,"children":233},{},[234],{"type":17,"tag":127,"props":235,"children":236},{},[237],{"type":23,"value":238},"rpl-clr-primary-accessible",{"type":17,"tag":51,"props":240,"children":241},{},[242],{"type":17,"tag":127,"props":243,"children":244},{},[245],{"type":23,"value":246},"rpl-sp-4",{"type":17,"tag":161,"props":248,"children":250},{"id":249},"steps-and-explanations",[251],{"type":23,"value":252},"Steps and explanations",{"type":17,"tag":168,"props":254,"children":255},{},[256,267,284],{"type":17,"tag":51,"props":257,"children":258},{},[259,261,265],{"type":23,"value":260},"Start all design tokens with the system name: ",{"type":17,"tag":127,"props":262,"children":263},{},[264],{"type":23,"value":178},{"type":23,"value":266}," is for Ripple.",{"type":17,"tag":51,"props":268,"children":269},{},[270,272,276,278,282],{"type":23,"value":271},"Then, place an abbreviation for the token type: ",{"type":17,"tag":127,"props":273,"children":274},{},[275],{"type":23,"value":188},{"type":23,"value":277}," is for colour; type is for typography; ",{"type":17,"tag":127,"props":279,"children":280},{},[281],{"type":23,"value":202},{"type":23,"value":283}," is for spacing.",{"type":17,"tag":51,"props":285,"children":286},{},[287,289,293,295,300],{"type":23,"value":288},"End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, ",{"type":17,"tag":127,"props":290,"children":291},{},[292],{"type":23,"value":212},{"type":23,"value":294}," in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. ",{"type":17,"tag":127,"props":296,"children":297},{},[298],{"type":23,"value":299},"4",{"type":23,"value":301}," in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System.",{"type":17,"tag":18,"props":303,"children":305},{"id":304},"best-practices",[306],{"type":23,"value":307},"Best practices",{"type":17,"tag":47,"props":309,"children":310},{},[311,316,321,326,331,336,341],{"type":17,"tag":51,"props":312,"children":313},{},[314],{"type":23,"value":315},"Choose tokens based on meaning rather than appearance only",{"type":17,"tag":51,"props":317,"children":318},{},[319],{"type":23,"value":320},"Choose the token with the most specific meaning that is available and applies to your content’s role on the site",{"type":17,"tag":51,"props":322,"children":323},{},[324],{"type":23,"value":325},"Do not choose tokens based only how the end result looks on your site",{"type":17,"tag":51,"props":327,"children":328},{},[329],{"type":23,"value":330},"For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar",{"type":17,"tag":51,"props":332,"children":333},{},[334],{"type":23,"value":335},"For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary",{"type":17,"tag":51,"props":337,"children":338},{},[339],{"type":23,"value":340},"Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience",{"type":17,"tag":51,"props":342,"children":343},{},[344],{"type":23,"value":345},"If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later",{"type":17,"tag":18,"props":347,"children":349},{"id":348},"why-are-tokens-important-for-design",[350],{"type":23,"value":351},"Why are tokens important for design?",{"type":17,"tag":161,"props":353,"children":355},{"id":354},"purpose-driven",[356],{"type":23,"value":357},"Purpose-driven",{"type":17,"tag":26,"props":359,"children":360},{},[361],{"type":23,"value":362},"Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app.",{"type":17,"tag":26,"props":364,"children":365},{},[366],{"type":23,"value":367},"Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale.",{"type":17,"tag":161,"props":369,"children":371},{"id":370},"single-source-of-truth",[372],{"type":23,"value":373},"Single source of truth",{"type":17,"tag":26,"props":375,"children":376},{},[377],{"type":23,"value":378},"Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works.",{"type":17,"tag":26,"props":380,"children":381},{},[382],{"type":23,"value":383},"Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation.",{"type":17,"tag":161,"props":385,"children":387},{"id":386},"system-wide-updates",[388],{"type":23,"value":389},"System-wide updates",{"type":17,"tag":26,"props":391,"children":392},{},[393],{"type":23,"value":394},"They let developers and designers change system-wide themes and contexts, using only a single update.",{"type":17,"tag":26,"props":396,"children":397},{},[398],{"type":23,"value":399},"Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code.",{"type":17,"tag":18,"props":401,"children":403},{"id":402},"for-developers",[404],{"type":23,"value":405},"For developers",{"type":17,"tag":26,"props":407,"children":408},{},[409,411],{"type":23,"value":410},"For information for developers using tokens to theme Ripple components see the ",{"type":17,"tag":412,"props":413,"children":415},"a",{"href":414},"/design-system/develop/theming",[416],{"type":23,"value":417},"theming guide",{"title":8,"searchDepth":419,"depth":419,"links":420},2,[421,422,423,424,430,431,436],{"id":20,"depth":419,"text":24},{"id":83,"depth":419,"text":86},{"id":109,"depth":419,"text":112},{"id":151,"depth":419,"text":154,"children":425},[426,428,429],{"id":163,"depth":427,"text":166},3,{"id":224,"depth":427,"text":227},{"id":249,"depth":427,"text":252},{"id":304,"depth":419,"text":307},{"id":348,"depth":419,"text":351,"children":432},[433,434,435],{"id":354,"depth":427,"text":357},{"id":370,"depth":427,"text":373},{"id":386,"depth":427,"text":389},{"id":402,"depth":419,"text":405},"markdown","content:design-system:2.design:3.design-tokens.md","content","design-system/2.design/3.design-tokens.md","md",{"/design-system/design/design-tokens":443},[444,450],{"_path":445,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":446,"description":447,"layout":11,"label":12,"_type":437,"_id":448,"_source":439,"_file":449,"_extension":441},"/design-system/design/our-design-principles","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","content:design-system:2.design:2.our-design-principles.md","design-system/2.design/2.our-design-principles.md",{"_path":451,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":452,"description":453,"layout":11,"label":12,"_type":437,"_id":454,"_source":439,"_file":455,"_extension":441},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",null,"content:design-system:2.design:4.theming-guidance-for-designers.md","design-system/2.design/4.theming-guidance-for-designers.md",{},[458,463,704],{"title":459,"_path":460,"icon":461,"layout":462},"Ripple Design System","/","carbon:home","home",{"title":464,"_path":465,"children":466},"Design System","/design-system",[467,483,493,522,556],{"title":468,"_path":469,"children":470},"About","/design-system/about",[471,474,477,480],{"title":472,"_path":473,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":475,"_path":476,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":478,"_path":479,"layout":11},"Support","/design-system/about/getting-support",{"title":481,"_path":482,"layout":11},"Contributing","/design-system/about/contributing",{"title":484,"_path":485,"children":486},"Design","/design-system/design",[487,490,491,492],{"title":488,"_path":489,"layout":11},"Getting started","/design-system/design/getting-started",{"title":446,"_path":445,"layout":11},{"title":9,"_path":5,"layout":11},{"title":452,"_path":451,"layout":11},{"title":494,"_path":495,"children":496},"Develop","/design-system/develop",[497,499,501,503],{"title":488,"_path":498,"layout":11},"/design-system/develop/getting-started",{"title":481,"_path":500,"layout":11},"/design-system/develop/contributing",{"title":502,"_path":414,"layout":11},"Theme and brand application",{"title":504,"_path":505,"children":506,"layout":11},"Usage","/design-system/develop/usage",[507,510,513,516,519],{"title":508,"_path":509,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":511,"_path":512,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":514,"_path":515,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":517,"_path":518,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":520,"_path":521,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":523,"_path":524,"children":525},"Styles","/design-system/styles",[526,529,532,535,538,541,544,547,550,553],{"title":527,"_path":528,"layout":11},"Colour","/design-system/styles/colour",{"title":530,"_path":531,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":533,"_path":534,"layout":11},"Grid","/design-system/styles/grid",{"title":536,"_path":537,"layout":11},"Icons","/design-system/styles/icons",{"title":539,"_path":540,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":542,"_path":543,"layout":11},"Layout","/design-system/styles/layout",{"title":545,"_path":546,"layout":11},"Logo","/design-system/styles/logo",{"title":548,"_path":549,"layout":11},"Motion","/design-system/styles/motion",{"title":551,"_path":552,"layout":11},"Spacing","/design-system/styles/spacing",{"title":554,"_path":555,"layout":11},"Typography","/design-system/styles/typography",{"title":557,"_path":558,"children":559},"Components","/design-system/components",[560,563,566,569,572,575,578,581,584,587,590,593,596,599,602,605,608,611,614,617,620,623,626,629,632,635,638,641,644,647,650,653,656,659,662,665,668,671,674,677,680,683,686,689,692,695,698,701],{"title":561,"_path":562,"layout":11},"Accordion","/design-system/components/accordion",{"title":564,"_path":565,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":567,"_path":568,"layout":11},"Alert","/design-system/components/alert",{"title":570,"_path":571,"layout":11},"Block quote","/design-system/components/block-quote",{"title":573,"_path":574,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":576,"_path":577,"layout":11},"Button","/design-system/components/button",{"title":579,"_path":580,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":582,"_path":583,"layout":11},"Callout","/design-system/components/callout",{"title":585,"_path":586,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":588,"_path":589,"layout":11},"Card","/design-system/components/card",{"title":591,"_path":592,"layout":11},"Carousel","/design-system/components/carousel",{"title":594,"_path":595,"layout":11},"Category grid","/design-system/components/category-grid",{"title":597,"_path":598,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":600,"_path":601,"layout":11},"Chip","/design-system/components/chip",{"title":603,"_path":604,"layout":11},"Contact us","/design-system/components/contact-us",{"title":606,"_path":607,"layout":11},"Date input","/design-system/components/date-input",{"title":609,"_path":610,"layout":11},"Detail list","/design-system/components/detail-list",{"title":612,"_path":613,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":615,"_path":616,"layout":11},"File","/design-system/components/file",{"title":618,"_path":619,"layout":11},"Footer","/design-system/components/footer",{"title":621,"_path":622,"layout":11},"Form alert","/design-system/components/form-alert",{"title":624,"_path":625,"layout":11},"Form","/design-system/components/form",{"title":627,"_path":628,"layout":11},"Header","/design-system/components/header",{"title":630,"_path":631,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":633,"_path":634,"layout":11},"Input field","/design-system/components/input-field",{"title":636,"_path":637,"layout":11},"Key dates","/design-system/components/key-dates",{"title":639,"_path":640,"layout":11},"Media embed","/design-system/components/media-embed",{"title":642,"_path":643,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":645,"_path":646,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":648,"_path":649,"layout":11},"Media","/design-system/components/media",{"title":651,"_path":652,"layout":11},"Option button","/design-system/components/option-button",{"title":654,"_path":655,"layout":11},"Page action","/design-system/components/page-action",{"title":657,"_path":658,"layout":11},"Pagination","/design-system/components/pagination",{"title":660,"_path":661,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":663,"_path":664,"layout":11},"Profile","/design-system/components/profile",{"title":666,"_path":667,"layout":11},"Radio button","/design-system/components/radio-button",{"title":669,"_path":670,"layout":11},"Related links","/design-system/components/related-links",{"title":672,"_path":673,"layout":11},"Results listing","/design-system/components/results-listing",{"title":675,"_path":676,"layout":11},"Search bar","/design-system/components/search-bar",{"title":678,"_path":679,"layout":11},"Skip link","/design-system/components/skip-link",{"title":681,"_path":682,"layout":11},"Social share","/design-system/components/social-share",{"title":684,"_path":685,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":687,"_path":688,"layout":11},"Table","/design-system/components/table",{"title":690,"_path":691,"layout":11},"Tabs","/design-system/components/tabs",{"title":693,"_path":694,"layout":11},"Tag","/design-system/components/tag",{"title":696,"_path":697,"layout":11},"Text area","/design-system/components/text-area",{"title":699,"_path":700,"layout":11},"Timeline","/design-system/components/timeline",{"title":702,"_path":703,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":705,"_path":706,"children":707,"layout":11},"Ripple Framework","/framework",[708,709,727,749],{"title":705,"_path":706,"layout":11},{"title":710,"_path":711,"children":712},"Key Concepts","/framework/key-concepts",[713,715,718,721,724],{"title":514,"_path":714,"layout":11},"/framework/key-concepts/nuxt",{"title":716,"_path":717,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":719,"_path":720,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":722,"_path":723,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":725,"_path":726,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":728,"_path":729,"children":730},"Guides","/framework/guides",[731,734,737,740,743,746],{"title":732,"_path":733,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":735,"_path":736,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":738,"_path":739,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":741,"_path":742,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":744,"_path":745,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":747,"_path":748,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":750,"_path":751,"layout":11},"Core modules","/framework/core-modules",["Reactive",753],{"module-navigation":453},true,"/design-system/design/design-tokens/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/design/getting-started/index.html b/design-system/design/getting-started/index.html index 3debdf91fc..d78934e0a4 100644 --- a/design-system/design/getting-started/index.html +++ b/design-system/design/getting-started/index.html @@ -22,7 +22,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Getting started</h1><p class="rpl-type-p-large" data-v-3163c6df></p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.<!--]--></p><p><!--[-->The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.<!--]--></p><p><!--[-->It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites.<!--]--></p><p><!--[-->The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:<!--]--></p><ul><!--[--><li><!--[--><strong><!--[-->styles<!--]--></strong> - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity<!--]--></li><li><!--[--><strong><!--[-->components<!--]--></strong> - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface<!--]--></li><li><!--[--><strong><!--[-->guidance<!--]--></strong> - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences.<!--]--></li><!--]--></ul><h2 id="first-steps"><a href="#first-steps"><!--[-->First steps<!--]--></a></h2><p><!--[-->Some key areas of the Ripple Design System that will help you create your digital product.<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/design/design-tokens/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Design tokens<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Sign up for access to the Ripple 2.0 Figma file<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/design/theming-guidance-for-designers/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Theming<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 id="the-ripple-20-figma-file"><a href="#the-ripple-20-figma-file"><!--[-->The Ripple 2.0 Figma file<!--]--></a></h2><p><!--[-->Ripple 2.0 Design System is available in <a href="https://www.figma.com/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma<!--]--><!--]--><!----><!--]--></a>. It contains all the design assets needed to design, prototype and share.<!--]--></p><p><!--[-->Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components.<!--]--></p><p><!--[--><strong><!--[-->To create quality user experiences, do not use the Figma file in isolation.<!--]--></strong> This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality.<!--]--></p><h3 id="figma-file-access"><a href="#figma-file-access"><!--[-->Figma file access<!--]--></a></h3><ol><!--[--><li><!--[--><strong><!--[-->Sign up to Figma<!--]--></strong><br>Create a free <a href="https://www.figma.com/pricing/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma Starter account<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[--><strong><!--[-->Install Ripple font<!--]--></strong><br>Ripple uses the VIC font family.<br><a href="https://www.vic.gov.au/brand-victoria-fonts" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Download and install VIC<!--]--><!--]--><!----><!--]--></a> to use this typeface in Figma.<!--]--></li><li><!--[--><strong><!--[-->Request access to Ripple Figma file<!--]--></strong><br>Ripple has been built as a Figma project.<br><a href="https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Request access to the Ripple 2.0 Design System<!--]--><!--]--><!----><!--]--></a>.<br>You will receive access to the Ripple Design System Figma file.<!--]--></li><li><!--[--><strong><!--[-->Add Ripple to your Figma account<!--]--></strong><br>Add the Ripple 2.0 Design System Figma file to your Figma account.<!--]--></li><li><!--[--><strong><!--[-->Set up Asset Library<!--]--></strong><br>In your Figma account, go to the Getting Started page.<br>Follow these instructions to set up the Asset Library.<!--]--></li><!--]--></ol><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/1.getting-started.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/getting-started/_payload.json">[{"state":1,"_errors":597,"serverRendered":599,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":285,"$sdd-globals":301,"$sdd-navigation":302},{"/design-system/design/getting-started":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":280,"_id":281,"_source":282,"_file":283,"_extension":284},"/design-system/design/getting-started","design",false,"","Getting started",null,"page",{"type":13,"children":14,"toc":272},"root",[15,23,28,33,38,74,81,86,119,125,139,144,154,161],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":22},"text","Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.",{"type":16,"tag":17,"props":24,"children":25},{},[26],{"type":21,"value":27},"The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.",{"type":16,"tag":17,"props":29,"children":30},{},[31],{"type":21,"value":32},"It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites.",{"type":16,"tag":17,"props":34,"children":35},{},[36],{"type":21,"value":37},"The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:",{"type":16,"tag":39,"props":40,"children":41},"ul",{},[42,54,64],{"type":16,"tag":43,"props":44,"children":45},"li",{},[46,52],{"type":16,"tag":47,"props":48,"children":49},"strong",{},[50],{"type":21,"value":51},"styles",{"type":21,"value":53}," - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity",{"type":16,"tag":43,"props":55,"children":56},{},[57,62],{"type":16,"tag":47,"props":58,"children":59},{},[60],{"type":21,"value":61},"components",{"type":21,"value":63}," - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface",{"type":16,"tag":43,"props":65,"children":66},{},[67,72],{"type":16,"tag":47,"props":68,"children":69},{},[70],{"type":21,"value":71},"guidance",{"type":21,"value":73}," - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences.",{"type":16,"tag":75,"props":76,"children":78},"h2",{"id":77},"first-steps",[79],{"type":21,"value":80},"First steps",{"type":16,"tag":17,"props":82,"children":83},{},[84],{"type":21,"value":85},"Some key areas of the Ripple Design System that will help you create your digital product.",{"type":16,"tag":39,"props":87,"children":88},{},[89,99,110],{"type":16,"tag":43,"props":90,"children":91},{},[92],{"type":16,"tag":93,"props":94,"children":96},"a",{"href":95},"/design-system/design/design-tokens/",[97],{"type":21,"value":98},"Design tokens",{"type":16,"tag":43,"props":100,"children":101},{},[102],{"type":16,"tag":93,"props":103,"children":107},{"href":104,"rel":105},"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system",[106],"nofollow",[108],{"type":21,"value":109},"Sign up for access to the Ripple 2.0 Figma file",{"type":16,"tag":43,"props":111,"children":112},{},[113],{"type":16,"tag":93,"props":114,"children":116},{"href":115},"/design-system/design/theming-guidance-for-designers/",[117],{"type":21,"value":118},"Theming",{"type":16,"tag":75,"props":120,"children":122},{"id":121},"the-ripple-20-figma-file",[123],{"type":21,"value":124},"The Ripple 2.0 Figma file",{"type":16,"tag":17,"props":126,"children":127},{},[128,130,137],{"type":21,"value":129},"Ripple 2.0 Design System is available in ",{"type":16,"tag":93,"props":131,"children":134},{"href":132,"rel":133},"https://www.figma.com/",[106],[135],{"type":21,"value":136},"Figma",{"type":21,"value":138},". It contains all the design assets needed to design, prototype and share.",{"type":16,"tag":17,"props":140,"children":141},{},[142],{"type":21,"value":143},"Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components.",{"type":16,"tag":17,"props":145,"children":146},{},[147,152],{"type":16,"tag":47,"props":148,"children":149},{},[150],{"type":21,"value":151},"To create quality user experiences, do not use the Figma file in isolation.",{"type":21,"value":153}," This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality.",{"type":16,"tag":155,"props":156,"children":158},"h3",{"id":157},"figma-file-access",[159],{"type":21,"value":160},"Figma file access",{"type":16,"tag":162,"props":163,"children":164},"ol",{},[165,188,213,241,254],{"type":16,"tag":43,"props":166,"children":167},{},[168,173,177,179,186],{"type":16,"tag":47,"props":169,"children":170},{},[171],{"type":21,"value":172},"Sign up to Figma",{"type":16,"tag":174,"props":175,"children":176},"br",{},[],{"type":21,"value":178},"Create a free ",{"type":16,"tag":93,"props":180,"children":183},{"href":181,"rel":182},"https://www.figma.com/pricing/",[106],[184],{"type":21,"value":185},"Figma Starter account",{"type":21,"value":187},".",{"type":16,"tag":43,"props":189,"children":190},{},[191,196,199,201,204,211],{"type":16,"tag":47,"props":192,"children":193},{},[194],{"type":21,"value":195},"Install Ripple font",{"type":16,"tag":174,"props":197,"children":198},{},[],{"type":21,"value":200},"Ripple uses the VIC font family.",{"type":16,"tag":174,"props":202,"children":203},{},[],{"type":16,"tag":93,"props":205,"children":208},{"href":206,"rel":207},"https://www.vic.gov.au/brand-victoria-fonts",[106],[209],{"type":21,"value":210},"Download and install VIC",{"type":21,"value":212}," to use this typeface in Figma.",{"type":16,"tag":43,"props":214,"children":215},{},[216,221,224,226,229,235,236,239],{"type":16,"tag":47,"props":217,"children":218},{},[219],{"type":21,"value":220},"Request access to Ripple Figma file",{"type":16,"tag":174,"props":222,"children":223},{},[],{"type":21,"value":225},"Ripple has been built as a Figma project.",{"type":16,"tag":174,"props":227,"children":228},{},[],{"type":16,"tag":93,"props":230,"children":232},{"href":104,"rel":231},[106],[233],{"type":21,"value":234},"Request access to the Ripple 2.0 Design System",{"type":21,"value":187},{"type":16,"tag":174,"props":237,"children":238},{},[],{"type":21,"value":240},"You will receive access to the Ripple Design System Figma file.",{"type":16,"tag":43,"props":242,"children":243},{},[244,249,252],{"type":16,"tag":47,"props":245,"children":246},{},[247],{"type":21,"value":248},"Add Ripple to your Figma account",{"type":16,"tag":174,"props":250,"children":251},{},[],{"type":21,"value":253},"Add the Ripple 2.0 Design System Figma file to your Figma account.",{"type":16,"tag":43,"props":255,"children":256},{},[257,262,265,267,270],{"type":16,"tag":47,"props":258,"children":259},{},[260],{"type":21,"value":261},"Set up Asset Library",{"type":16,"tag":174,"props":263,"children":264},{},[],{"type":21,"value":266},"In your Figma account, go to the Getting Started page.",{"type":16,"tag":174,"props":268,"children":269},{},[],{"type":21,"value":271},"Follow these instructions to set up the Asset Library.",{"title":8,"searchDepth":273,"depth":273,"links":274},2,[275,276],{"id":77,"depth":273,"text":80},{"id":121,"depth":273,"text":124,"children":277},[278],{"id":157,"depth":279,"text":160},3,"markdown","content:design-system:2.design:1.getting-started.md","content","design-system/2.design/1.getting-started.md","md",{"/design-system/design/getting-started":286},[287,294],{"_path":288,"_dir":289,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":290,"description":291,"layout":11,"_type":280,"_id":292,"_source":282,"_file":293,"_extension":284},"/design-system/about/contributing","about","Contributing","Found an issue?","content:design-system:1.about:4.contributing.md","design-system/1.about/4.contributing.md",{"_path":295,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":296,"description":297,"layout":11,"label":298,"_type":280,"_id":299,"_source":282,"_file":300,"_extension":284},"/design-system/design/our-design-principles","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","Core","content:design-system:2.design:2.our-design-principles.md","design-system/2.design/2.our-design-principles.md",{},[303,308,549],{"title":304,"_path":305,"icon":306,"layout":307},"Ripple Design System","/","carbon:home","home",{"title":309,"_path":310,"children":311},"Design System","/design-system",[312,326,337,367,401],{"title":313,"_path":314,"children":315},"About","/design-system/about",[316,319,322,325],{"title":317,"_path":318,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":320,"_path":321,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":323,"_path":324,"layout":11},"Support","/design-system/about/getting-support",{"title":290,"_path":288,"layout":11},{"title":327,"_path":328,"children":329},"Design","/design-system/design",[330,331,332,334],{"title":9,"_path":5,"layout":11},{"title":296,"_path":295,"layout":11},{"title":98,"_path":333,"layout":11},"/design-system/design/design-tokens",{"title":335,"_path":336,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":338,"_path":339,"children":340},"Develop","/design-system/develop",[341,343,345,348],{"title":9,"_path":342,"layout":11},"/design-system/develop/getting-started",{"title":290,"_path":344,"layout":11},"/design-system/develop/contributing",{"title":346,"_path":347,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":349,"_path":350,"children":351,"layout":11},"Usage","/design-system/develop/usage",[352,355,358,361,364],{"title":353,"_path":354,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":356,"_path":357,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":359,"_path":360,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":362,"_path":363,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":365,"_path":366,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":368,"_path":369,"children":370},"Styles","/design-system/styles",[371,374,377,380,383,386,389,392,395,398],{"title":372,"_path":373,"layout":11},"Colour","/design-system/styles/colour",{"title":375,"_path":376,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":378,"_path":379,"layout":11},"Grid","/design-system/styles/grid",{"title":381,"_path":382,"layout":11},"Icons","/design-system/styles/icons",{"title":384,"_path":385,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":387,"_path":388,"layout":11},"Layout","/design-system/styles/layout",{"title":390,"_path":391,"layout":11},"Logo","/design-system/styles/logo",{"title":393,"_path":394,"layout":11},"Motion","/design-system/styles/motion",{"title":396,"_path":397,"layout":11},"Spacing","/design-system/styles/spacing",{"title":399,"_path":400,"layout":11},"Typography","/design-system/styles/typography",{"title":402,"_path":403,"children":404},"Components","/design-system/components",[405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546],{"title":406,"_path":407,"layout":11},"Accordion","/design-system/components/accordion",{"title":409,"_path":410,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":412,"_path":413,"layout":11},"Alert","/design-system/components/alert",{"title":415,"_path":416,"layout":11},"Block quote","/design-system/components/block-quote",{"title":418,"_path":419,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":421,"_path":422,"layout":11},"Button","/design-system/components/button",{"title":424,"_path":425,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":427,"_path":428,"layout":11},"Callout","/design-system/components/callout",{"title":430,"_path":431,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":433,"_path":434,"layout":11},"Card","/design-system/components/card",{"title":436,"_path":437,"layout":11},"Carousel","/design-system/components/carousel",{"title":439,"_path":440,"layout":11},"Category grid","/design-system/components/category-grid",{"title":442,"_path":443,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":445,"_path":446,"layout":11},"Chip","/design-system/components/chip",{"title":448,"_path":449,"layout":11},"Contact us","/design-system/components/contact-us",{"title":451,"_path":452,"layout":11},"Date input","/design-system/components/date-input",{"title":454,"_path":455,"layout":11},"Detail list","/design-system/components/detail-list",{"title":457,"_path":458,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":460,"_path":461,"layout":11},"File","/design-system/components/file",{"title":463,"_path":464,"layout":11},"Footer","/design-system/components/footer",{"title":466,"_path":467,"layout":11},"Form alert","/design-system/components/form-alert",{"title":469,"_path":470,"layout":11},"Form","/design-system/components/form",{"title":472,"_path":473,"layout":11},"Header","/design-system/components/header",{"title":475,"_path":476,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":478,"_path":479,"layout":11},"Input field","/design-system/components/input-field",{"title":481,"_path":482,"layout":11},"Key dates","/design-system/components/key-dates",{"title":484,"_path":485,"layout":11},"Media embed","/design-system/components/media-embed",{"title":487,"_path":488,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":490,"_path":491,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":493,"_path":494,"layout":11},"Media","/design-system/components/media",{"title":496,"_path":497,"layout":11},"Option button","/design-system/components/option-button",{"title":499,"_path":500,"layout":11},"Page action","/design-system/components/page-action",{"title":502,"_path":503,"layout":11},"Pagination","/design-system/components/pagination",{"title":505,"_path":506,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":508,"_path":509,"layout":11},"Profile","/design-system/components/profile",{"title":511,"_path":512,"layout":11},"Radio button","/design-system/components/radio-button",{"title":514,"_path":515,"layout":11},"Related links","/design-system/components/related-links",{"title":517,"_path":518,"layout":11},"Results listing","/design-system/components/results-listing",{"title":520,"_path":521,"layout":11},"Search bar","/design-system/components/search-bar",{"title":523,"_path":524,"layout":11},"Skip link","/design-system/components/skip-link",{"title":526,"_path":527,"layout":11},"Social share","/design-system/components/social-share",{"title":529,"_path":530,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":532,"_path":533,"layout":11},"Table","/design-system/components/table",{"title":535,"_path":536,"layout":11},"Tabs","/design-system/components/tabs",{"title":538,"_path":539,"layout":11},"Tag","/design-system/components/tag",{"title":541,"_path":542,"layout":11},"Text area","/design-system/components/text-area",{"title":544,"_path":545,"layout":11},"Timeline","/design-system/components/timeline",{"title":547,"_path":548,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":550,"_path":551,"children":552,"layout":11},"Ripple Framework","/framework",[553,554,572,594],{"title":550,"_path":551,"layout":11},{"title":555,"_path":556,"children":557},"Key Concepts","/framework/key-concepts",[558,560,563,566,569],{"title":359,"_path":559,"layout":11},"/framework/key-concepts/nuxt",{"title":561,"_path":562,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":564,"_path":565,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":567,"_path":568,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":570,"_path":571,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":573,"_path":574,"children":575},"Guides","/framework/guides",[576,579,582,585,588,591],{"title":577,"_path":578,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":580,"_path":581,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":583,"_path":584,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":586,"_path":587,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":589,"_path":590,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":592,"_path":593,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":595,"_path":596,"layout":11},"Core modules","/framework/core-modules",["Reactive",598],{"module-navigation":10},true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Getting started</h1><p class="rpl-type-p-large" data-v-3163c6df></p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.<!--]--></p><p><!--[-->The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.<!--]--></p><p><!--[-->It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites.<!--]--></p><p><!--[-->The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:<!--]--></p><ul><!--[--><li><!--[--><strong><!--[-->styles<!--]--></strong> - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity<!--]--></li><li><!--[--><strong><!--[-->components<!--]--></strong> - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface<!--]--></li><li><!--[--><strong><!--[-->guidance<!--]--></strong> - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences.<!--]--></li><!--]--></ul><h2 id="first-steps"><a href="#first-steps"><!--[-->First steps<!--]--></a></h2><p><!--[-->Some key areas of the Ripple Design System that will help you create your digital product.<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/design/design-tokens/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Design tokens<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Sign up for access to the Ripple 2.0 Figma file<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/design/theming-guidance-for-designers/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Theming<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 id="the-ripple-20-figma-file"><a href="#the-ripple-20-figma-file"><!--[-->The Ripple 2.0 Figma file<!--]--></a></h2><p><!--[-->Ripple 2.0 Design System is available in <a href="https://www.figma.com/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma<!--]--><!--]--><!----><!--]--></a>. It contains all the design assets needed to design, prototype and share.<!--]--></p><p><!--[-->Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components.<!--]--></p><p><!--[--><strong><!--[-->To create quality user experiences, do not use the Figma file in isolation.<!--]--></strong> This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality.<!--]--></p><h3 id="figma-file-access"><a href="#figma-file-access"><!--[-->Figma file access<!--]--></a></h3><ol><!--[--><li><!--[--><strong><!--[-->Sign up to Figma<!--]--></strong><br>Create a free <a href="https://www.figma.com/pricing/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma Starter account<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[--><strong><!--[-->Install Ripple font<!--]--></strong><br>Ripple uses the VIC font family.<br><a href="https://www.vic.gov.au/brand-victoria-fonts" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Download and install VIC<!--]--><!--]--><!----><!--]--></a> to use this typeface in Figma.<!--]--></li><li><!--[--><strong><!--[-->Request access to Ripple Figma file<!--]--></strong><br>Ripple has been built as a Figma project.<br><a href="https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Request access to the Ripple 2.0 Design System<!--]--><!--]--><!----><!--]--></a>.<br>You will receive access to the Ripple Design System Figma file.<!--]--></li><li><!--[--><strong><!--[-->Add Ripple to your Figma account<!--]--></strong><br>Add the Ripple 2.0 Design System Figma file to your Figma account.<!--]--></li><li><!--[--><strong><!--[-->Set up Asset Library<!--]--></strong><br>In your Figma account, go to the Getting Started page.<br>Follow these instructions to set up the Asset Library.<!--]--></li><!--]--></ol><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/1.getting-started.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/getting-started/_payload.json">[{"state":1,"_errors":597,"serverRendered":599,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":285,"$sdd-globals":301,"$sdd-navigation":302},{"/design-system/design/getting-started":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":280,"_id":281,"_source":282,"_file":283,"_extension":284},"/design-system/design/getting-started","design",false,"","Getting started",null,"page",{"type":13,"children":14,"toc":272},"root",[15,23,28,33,38,74,81,86,119,125,139,144,154,161],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":22},"text","Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.",{"type":16,"tag":17,"props":24,"children":25},{},[26],{"type":21,"value":27},"The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.",{"type":16,"tag":17,"props":29,"children":30},{},[31],{"type":21,"value":32},"It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites.",{"type":16,"tag":17,"props":34,"children":35},{},[36],{"type":21,"value":37},"The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:",{"type":16,"tag":39,"props":40,"children":41},"ul",{},[42,54,64],{"type":16,"tag":43,"props":44,"children":45},"li",{},[46,52],{"type":16,"tag":47,"props":48,"children":49},"strong",{},[50],{"type":21,"value":51},"styles",{"type":21,"value":53}," - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity",{"type":16,"tag":43,"props":55,"children":56},{},[57,62],{"type":16,"tag":47,"props":58,"children":59},{},[60],{"type":21,"value":61},"components",{"type":21,"value":63}," - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface",{"type":16,"tag":43,"props":65,"children":66},{},[67,72],{"type":16,"tag":47,"props":68,"children":69},{},[70],{"type":21,"value":71},"guidance",{"type":21,"value":73}," - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences.",{"type":16,"tag":75,"props":76,"children":78},"h2",{"id":77},"first-steps",[79],{"type":21,"value":80},"First steps",{"type":16,"tag":17,"props":82,"children":83},{},[84],{"type":21,"value":85},"Some key areas of the Ripple Design System that will help you create your digital product.",{"type":16,"tag":39,"props":87,"children":88},{},[89,99,110],{"type":16,"tag":43,"props":90,"children":91},{},[92],{"type":16,"tag":93,"props":94,"children":96},"a",{"href":95},"/design-system/design/design-tokens/",[97],{"type":21,"value":98},"Design tokens",{"type":16,"tag":43,"props":100,"children":101},{},[102],{"type":16,"tag":93,"props":103,"children":107},{"href":104,"rel":105},"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system",[106],"nofollow",[108],{"type":21,"value":109},"Sign up for access to the Ripple 2.0 Figma file",{"type":16,"tag":43,"props":111,"children":112},{},[113],{"type":16,"tag":93,"props":114,"children":116},{"href":115},"/design-system/design/theming-guidance-for-designers/",[117],{"type":21,"value":118},"Theming",{"type":16,"tag":75,"props":120,"children":122},{"id":121},"the-ripple-20-figma-file",[123],{"type":21,"value":124},"The Ripple 2.0 Figma file",{"type":16,"tag":17,"props":126,"children":127},{},[128,130,137],{"type":21,"value":129},"Ripple 2.0 Design System is available in ",{"type":16,"tag":93,"props":131,"children":134},{"href":132,"rel":133},"https://www.figma.com/",[106],[135],{"type":21,"value":136},"Figma",{"type":21,"value":138},". It contains all the design assets needed to design, prototype and share.",{"type":16,"tag":17,"props":140,"children":141},{},[142],{"type":21,"value":143},"Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components.",{"type":16,"tag":17,"props":145,"children":146},{},[147,152],{"type":16,"tag":47,"props":148,"children":149},{},[150],{"type":21,"value":151},"To create quality user experiences, do not use the Figma file in isolation.",{"type":21,"value":153}," This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality.",{"type":16,"tag":155,"props":156,"children":158},"h3",{"id":157},"figma-file-access",[159],{"type":21,"value":160},"Figma file access",{"type":16,"tag":162,"props":163,"children":164},"ol",{},[165,188,213,241,254],{"type":16,"tag":43,"props":166,"children":167},{},[168,173,177,179,186],{"type":16,"tag":47,"props":169,"children":170},{},[171],{"type":21,"value":172},"Sign up to Figma",{"type":16,"tag":174,"props":175,"children":176},"br",{},[],{"type":21,"value":178},"Create a free ",{"type":16,"tag":93,"props":180,"children":183},{"href":181,"rel":182},"https://www.figma.com/pricing/",[106],[184],{"type":21,"value":185},"Figma Starter account",{"type":21,"value":187},".",{"type":16,"tag":43,"props":189,"children":190},{},[191,196,199,201,204,211],{"type":16,"tag":47,"props":192,"children":193},{},[194],{"type":21,"value":195},"Install Ripple font",{"type":16,"tag":174,"props":197,"children":198},{},[],{"type":21,"value":200},"Ripple uses the VIC font family.",{"type":16,"tag":174,"props":202,"children":203},{},[],{"type":16,"tag":93,"props":205,"children":208},{"href":206,"rel":207},"https://www.vic.gov.au/brand-victoria-fonts",[106],[209],{"type":21,"value":210},"Download and install VIC",{"type":21,"value":212}," to use this typeface in Figma.",{"type":16,"tag":43,"props":214,"children":215},{},[216,221,224,226,229,235,236,239],{"type":16,"tag":47,"props":217,"children":218},{},[219],{"type":21,"value":220},"Request access to Ripple Figma file",{"type":16,"tag":174,"props":222,"children":223},{},[],{"type":21,"value":225},"Ripple has been built as a Figma project.",{"type":16,"tag":174,"props":227,"children":228},{},[],{"type":16,"tag":93,"props":230,"children":232},{"href":104,"rel":231},[106],[233],{"type":21,"value":234},"Request access to the Ripple 2.0 Design System",{"type":21,"value":187},{"type":16,"tag":174,"props":237,"children":238},{},[],{"type":21,"value":240},"You will receive access to the Ripple Design System Figma file.",{"type":16,"tag":43,"props":242,"children":243},{},[244,249,252],{"type":16,"tag":47,"props":245,"children":246},{},[247],{"type":21,"value":248},"Add Ripple to your Figma account",{"type":16,"tag":174,"props":250,"children":251},{},[],{"type":21,"value":253},"Add the Ripple 2.0 Design System Figma file to your Figma account.",{"type":16,"tag":43,"props":255,"children":256},{},[257,262,265,267,270],{"type":16,"tag":47,"props":258,"children":259},{},[260],{"type":21,"value":261},"Set up Asset Library",{"type":16,"tag":174,"props":263,"children":264},{},[],{"type":21,"value":266},"In your Figma account, go to the Getting Started page.",{"type":16,"tag":174,"props":268,"children":269},{},[],{"type":21,"value":271},"Follow these instructions to set up the Asset Library.",{"title":8,"searchDepth":273,"depth":273,"links":274},2,[275,276],{"id":77,"depth":273,"text":80},{"id":121,"depth":273,"text":124,"children":277},[278],{"id":157,"depth":279,"text":160},3,"markdown","content:design-system:2.design:1.getting-started.md","content","design-system/2.design/1.getting-started.md","md",{"/design-system/design/getting-started":286},[287,294],{"_path":288,"_dir":289,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":290,"description":291,"layout":11,"_type":280,"_id":292,"_source":282,"_file":293,"_extension":284},"/design-system/about/contributing","about","Contributing","Found an issue?","content:design-system:1.about:4.contributing.md","design-system/1.about/4.contributing.md",{"_path":295,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":296,"description":297,"layout":11,"label":298,"_type":280,"_id":299,"_source":282,"_file":300,"_extension":284},"/design-system/design/our-design-principles","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","Core","content:design-system:2.design:2.our-design-principles.md","design-system/2.design/2.our-design-principles.md",{},[303,308,549],{"title":304,"_path":305,"icon":306,"layout":307},"Ripple Design System","/","carbon:home","home",{"title":309,"_path":310,"children":311},"Design System","/design-system",[312,326,337,367,401],{"title":313,"_path":314,"children":315},"About","/design-system/about",[316,319,322,325],{"title":317,"_path":318,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":320,"_path":321,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":323,"_path":324,"layout":11},"Support","/design-system/about/getting-support",{"title":290,"_path":288,"layout":11},{"title":327,"_path":328,"children":329},"Design","/design-system/design",[330,331,332,334],{"title":9,"_path":5,"layout":11},{"title":296,"_path":295,"layout":11},{"title":98,"_path":333,"layout":11},"/design-system/design/design-tokens",{"title":335,"_path":336,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":338,"_path":339,"children":340},"Develop","/design-system/develop",[341,343,345,348],{"title":9,"_path":342,"layout":11},"/design-system/develop/getting-started",{"title":290,"_path":344,"layout":11},"/design-system/develop/contributing",{"title":346,"_path":347,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":349,"_path":350,"children":351,"layout":11},"Usage","/design-system/develop/usage",[352,355,358,361,364],{"title":353,"_path":354,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":356,"_path":357,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":359,"_path":360,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":362,"_path":363,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":365,"_path":366,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":368,"_path":369,"children":370},"Styles","/design-system/styles",[371,374,377,380,383,386,389,392,395,398],{"title":372,"_path":373,"layout":11},"Colour","/design-system/styles/colour",{"title":375,"_path":376,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":378,"_path":379,"layout":11},"Grid","/design-system/styles/grid",{"title":381,"_path":382,"layout":11},"Icons","/design-system/styles/icons",{"title":384,"_path":385,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":387,"_path":388,"layout":11},"Layout","/design-system/styles/layout",{"title":390,"_path":391,"layout":11},"Logo","/design-system/styles/logo",{"title":393,"_path":394,"layout":11},"Motion","/design-system/styles/motion",{"title":396,"_path":397,"layout":11},"Spacing","/design-system/styles/spacing",{"title":399,"_path":400,"layout":11},"Typography","/design-system/styles/typography",{"title":402,"_path":403,"children":404},"Components","/design-system/components",[405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546],{"title":406,"_path":407,"layout":11},"Accordion","/design-system/components/accordion",{"title":409,"_path":410,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":412,"_path":413,"layout":11},"Alert","/design-system/components/alert",{"title":415,"_path":416,"layout":11},"Block quote","/design-system/components/block-quote",{"title":418,"_path":419,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":421,"_path":422,"layout":11},"Button","/design-system/components/button",{"title":424,"_path":425,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":427,"_path":428,"layout":11},"Callout","/design-system/components/callout",{"title":430,"_path":431,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":433,"_path":434,"layout":11},"Card","/design-system/components/card",{"title":436,"_path":437,"layout":11},"Carousel","/design-system/components/carousel",{"title":439,"_path":440,"layout":11},"Category grid","/design-system/components/category-grid",{"title":442,"_path":443,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":445,"_path":446,"layout":11},"Chip","/design-system/components/chip",{"title":448,"_path":449,"layout":11},"Contact us","/design-system/components/contact-us",{"title":451,"_path":452,"layout":11},"Date input","/design-system/components/date-input",{"title":454,"_path":455,"layout":11},"Detail list","/design-system/components/detail-list",{"title":457,"_path":458,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":460,"_path":461,"layout":11},"File","/design-system/components/file",{"title":463,"_path":464,"layout":11},"Footer","/design-system/components/footer",{"title":466,"_path":467,"layout":11},"Form alert","/design-system/components/form-alert",{"title":469,"_path":470,"layout":11},"Form","/design-system/components/form",{"title":472,"_path":473,"layout":11},"Header","/design-system/components/header",{"title":475,"_path":476,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":478,"_path":479,"layout":11},"Input field","/design-system/components/input-field",{"title":481,"_path":482,"layout":11},"Key dates","/design-system/components/key-dates",{"title":484,"_path":485,"layout":11},"Media embed","/design-system/components/media-embed",{"title":487,"_path":488,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":490,"_path":491,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":493,"_path":494,"layout":11},"Media","/design-system/components/media",{"title":496,"_path":497,"layout":11},"Option button","/design-system/components/option-button",{"title":499,"_path":500,"layout":11},"Page action","/design-system/components/page-action",{"title":502,"_path":503,"layout":11},"Pagination","/design-system/components/pagination",{"title":505,"_path":506,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":508,"_path":509,"layout":11},"Profile","/design-system/components/profile",{"title":511,"_path":512,"layout":11},"Radio button","/design-system/components/radio-button",{"title":514,"_path":515,"layout":11},"Related links","/design-system/components/related-links",{"title":517,"_path":518,"layout":11},"Results listing","/design-system/components/results-listing",{"title":520,"_path":521,"layout":11},"Search bar","/design-system/components/search-bar",{"title":523,"_path":524,"layout":11},"Skip link","/design-system/components/skip-link",{"title":526,"_path":527,"layout":11},"Social share","/design-system/components/social-share",{"title":529,"_path":530,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":532,"_path":533,"layout":11},"Table","/design-system/components/table",{"title":535,"_path":536,"layout":11},"Tabs","/design-system/components/tabs",{"title":538,"_path":539,"layout":11},"Tag","/design-system/components/tag",{"title":541,"_path":542,"layout":11},"Text area","/design-system/components/text-area",{"title":544,"_path":545,"layout":11},"Timeline","/design-system/components/timeline",{"title":547,"_path":548,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":550,"_path":551,"children":552,"layout":11},"Ripple Framework","/framework",[553,554,572,594],{"title":550,"_path":551,"layout":11},{"title":555,"_path":556,"children":557},"Key Concepts","/framework/key-concepts",[558,560,563,566,569],{"title":359,"_path":559,"layout":11},"/framework/key-concepts/nuxt",{"title":561,"_path":562,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":564,"_path":565,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":567,"_path":568,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":570,"_path":571,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":573,"_path":574,"children":575},"Guides","/framework/guides",[576,579,582,585,588,591],{"title":577,"_path":578,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":580,"_path":581,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":583,"_path":584,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":586,"_path":587,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":589,"_path":590,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":592,"_path":593,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":595,"_path":596,"layout":11},"Core modules","/framework/core-modules",["Reactive",598],{"module-navigation":10},true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/design/our-design-principles/index.html b/design-system/design/our-design-principles/index.html index f4b536e57a..ea51556ae6 100644 --- a/design-system/design/our-design-principles/index.html +++ b/design-system/design/our-design-principles/index.html @@ -24,7 +24,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Our design principles</h1><p class="rpl-type-p-large" data-v-3163c6df>There are 4 design principles that are the foundation of the Ripple Design System.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->There are 4 design principles that underpin the Ripple Design System:<!--]--></p><ul><!--[--><li><!--[-->Inclusive.<!--]--></li><li><!--[-->Efficient.<!--]--></li><li><!--[-->Flexible.<!--]--></li><li><!--[-->Easy.<!--]--></li><!--]--></ul><p><!--[-->The Ripple Design System uses these principles when making design decisions.<!--]--></p><h2 id="inclusive"><a href="#inclusive"><!--[-->Inclusive<!--]--></a></h2><ul><!--[--><li><!--[-->Accessibility is top priority.<!--]--></li><li><!--[-->Collaborative in design.<!--]--></li><li><!--[-->Transparent documentation.<!--]--></li><li><!--[-->Friendly, helpful and trustworthy.<!--]--></li><!--]--></ul><p><!--[-->Include all users, abilities and backgrounds in the process and design intent.<!--]--></p><p><!--[-->Support best practices, provide guidance and build trust with the community.<!--]--></p><h2 id="efficient"><a href="#efficient"><!--[-->Efficient<!--]--></a></h2><ul><!--[--><li><!--[-->Less is more.<!--]--></li><li><!--[-->Clean and clear.<!--]--></li><li><!--[-->Considered.<!--]--></li><li><!--[-->Economic design.<!--]--></li><!--]--></ul><p><!--[-->Think holistically to create considered sustainable outcomes that make sense to all users.<!--]--></p><p><!--[-->Increase efficiencies while reducing complexities and risks.<!--]--></p><h2 id="flexible"><a href="#flexible"><!--[-->Flexible<!--]--></a></h2><ul><!--[--><li><!--[-->Responsive to data.<!--]--></li><li><!--[-->Responsive to sub-brands.<!--]--></li><li><!--[-->Considers context.<!--]--></li><li><!--[-->Iterative improvements.<!--]--></li><!--]--></ul><p><!--[-->Use meaningful evidence to improve impact and add value.<!--]--></p><p><!--[-->Find improvement opportunities that elevate the experience for multiple contexts and end users.<!--]--></p><h2 id="easy"><a href="#easy"><!--[-->Easy<!--]--></a></h2><p><!--[-->Easy to:<!--]--></p><ul><!--[--><li><!--[-->contribute to<!--]--></li><li><!--[-->learn and understand<!--]--></li><li><!--[-->create and recreate<!--]--></li><li><!--[-->find information.<!--]--></li><!--]--></ul><p><!--[-->Consider the needs and experiences of end users of Victorian digital products.<!--]--></p><p><!--[-->Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/2.our-design-principles.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/our-design-principles/_payload.json">[{"state":1,"_errors":539,"serverRendered":541,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":228,"$sdd-globals":242,"$sdd-navigation":243},{"/design-system/design/our-design-principles":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":223,"_id":224,"_source":225,"_file":226,"_extension":227},"/design-system/design/our-design-principles","design",false,"","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","page","Core",{"type":14,"children":15,"toc":216},"root",[16,24,49,54,61,84,89,94,100,123,128,133,139,162,167,172,178,183,206,211],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21],{"type":22,"value":23},"text","There are 4 design principles that underpin the Ripple Design System:",{"type":17,"tag":25,"props":26,"children":27},"ul",{},[28,34,39,44],{"type":17,"tag":29,"props":30,"children":31},"li",{},[32],{"type":22,"value":33},"Inclusive.",{"type":17,"tag":29,"props":35,"children":36},{},[37],{"type":22,"value":38},"Efficient.",{"type":17,"tag":29,"props":40,"children":41},{},[42],{"type":22,"value":43},"Flexible.",{"type":17,"tag":29,"props":45,"children":46},{},[47],{"type":22,"value":48},"Easy.",{"type":17,"tag":18,"props":50,"children":51},{},[52],{"type":22,"value":53},"The Ripple Design System uses these principles when making design decisions.",{"type":17,"tag":55,"props":56,"children":58},"h2",{"id":57},"inclusive",[59],{"type":22,"value":60},"Inclusive",{"type":17,"tag":25,"props":62,"children":63},{},[64,69,74,79],{"type":17,"tag":29,"props":65,"children":66},{},[67],{"type":22,"value":68},"Accessibility is top priority.",{"type":17,"tag":29,"props":70,"children":71},{},[72],{"type":22,"value":73},"Collaborative in design.",{"type":17,"tag":29,"props":75,"children":76},{},[77],{"type":22,"value":78},"Transparent documentation.",{"type":17,"tag":29,"props":80,"children":81},{},[82],{"type":22,"value":83},"Friendly, helpful and trustworthy.",{"type":17,"tag":18,"props":85,"children":86},{},[87],{"type":22,"value":88},"Include all users, abilities and backgrounds in the process and design intent.",{"type":17,"tag":18,"props":90,"children":91},{},[92],{"type":22,"value":93},"Support best practices, provide guidance and build trust with the community.",{"type":17,"tag":55,"props":95,"children":97},{"id":96},"efficient",[98],{"type":22,"value":99},"Efficient",{"type":17,"tag":25,"props":101,"children":102},{},[103,108,113,118],{"type":17,"tag":29,"props":104,"children":105},{},[106],{"type":22,"value":107},"Less is more.",{"type":17,"tag":29,"props":109,"children":110},{},[111],{"type":22,"value":112},"Clean and clear.",{"type":17,"tag":29,"props":114,"children":115},{},[116],{"type":22,"value":117},"Considered.",{"type":17,"tag":29,"props":119,"children":120},{},[121],{"type":22,"value":122},"Economic design.",{"type":17,"tag":18,"props":124,"children":125},{},[126],{"type":22,"value":127},"Think holistically to create considered sustainable outcomes that make sense to all users.",{"type":17,"tag":18,"props":129,"children":130},{},[131],{"type":22,"value":132},"Increase efficiencies while reducing complexities and risks.",{"type":17,"tag":55,"props":134,"children":136},{"id":135},"flexible",[137],{"type":22,"value":138},"Flexible",{"type":17,"tag":25,"props":140,"children":141},{},[142,147,152,157],{"type":17,"tag":29,"props":143,"children":144},{},[145],{"type":22,"value":146},"Responsive to data.",{"type":17,"tag":29,"props":148,"children":149},{},[150],{"type":22,"value":151},"Responsive to sub-brands.",{"type":17,"tag":29,"props":153,"children":154},{},[155],{"type":22,"value":156},"Considers context.",{"type":17,"tag":29,"props":158,"children":159},{},[160],{"type":22,"value":161},"Iterative improvements.",{"type":17,"tag":18,"props":163,"children":164},{},[165],{"type":22,"value":166},"Use meaningful evidence to improve impact and add value.",{"type":17,"tag":18,"props":168,"children":169},{},[170],{"type":22,"value":171},"Find improvement opportunities that elevate the experience for multiple contexts and end users.",{"type":17,"tag":55,"props":173,"children":175},{"id":174},"easy",[176],{"type":22,"value":177},"Easy",{"type":17,"tag":18,"props":179,"children":180},{},[181],{"type":22,"value":182},"Easy to:",{"type":17,"tag":25,"props":184,"children":185},{},[186,191,196,201],{"type":17,"tag":29,"props":187,"children":188},{},[189],{"type":22,"value":190},"contribute to",{"type":17,"tag":29,"props":192,"children":193},{},[194],{"type":22,"value":195},"learn and understand",{"type":17,"tag":29,"props":197,"children":198},{},[199],{"type":22,"value":200},"create and recreate",{"type":17,"tag":29,"props":202,"children":203},{},[204],{"type":22,"value":205},"find information.",{"type":17,"tag":18,"props":207,"children":208},{},[209],{"type":22,"value":210},"Consider the needs and experiences of end users of Victorian digital products.",{"type":17,"tag":18,"props":212,"children":213},{},[214],{"type":22,"value":215},"Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind.",{"title":8,"searchDepth":217,"depth":217,"links":218},2,[219,220,221,222],{"id":57,"depth":217,"text":60},{"id":96,"depth":217,"text":99},{"id":135,"depth":217,"text":138},{"id":174,"depth":217,"text":177},"markdown","content:design-system:2.design:2.our-design-principles.md","content","design-system/2.design/2.our-design-principles.md","md",{"/design-system/design/our-design-principles":229},[230,236],{"_path":231,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":232,"description":233,"layout":11,"_type":223,"_id":234,"_source":225,"_file":235,"_extension":227},"/design-system/design/getting-started","Getting started",null,"content:design-system:2.design:1.getting-started.md","design-system/2.design/1.getting-started.md",{"_path":237,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":238,"description":239,"layout":11,"label":12,"_type":223,"_id":240,"_source":225,"_file":241,"_extension":227},"/design-system/design/design-tokens","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","content:design-system:2.design:3.design-tokens.md","design-system/2.design/3.design-tokens.md",{},[244,249,491],{"title":245,"_path":246,"icon":247,"layout":248},"Ripple Design System","/","carbon:home","home",{"title":250,"_path":251,"children":252},"Design System","/design-system",[253,269,279,309,343],{"title":254,"_path":255,"children":256},"About","/design-system/about",[257,260,263,266],{"title":258,"_path":259,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":261,"_path":262,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":264,"_path":265,"layout":11},"Support","/design-system/about/getting-support",{"title":267,"_path":268,"layout":11},"Contributing","/design-system/about/contributing",{"title":270,"_path":271,"children":272},"Design","/design-system/design",[273,274,275,276],{"title":232,"_path":231,"layout":11},{"title":9,"_path":5,"layout":11},{"title":238,"_path":237,"layout":11},{"title":277,"_path":278,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":280,"_path":281,"children":282},"Develop","/design-system/develop",[283,285,287,290],{"title":232,"_path":284,"layout":11},"/design-system/develop/getting-started",{"title":267,"_path":286,"layout":11},"/design-system/develop/contributing",{"title":288,"_path":289,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":291,"_path":292,"children":293,"layout":11},"Usage","/design-system/develop/usage",[294,297,300,303,306],{"title":295,"_path":296,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":298,"_path":299,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":301,"_path":302,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":304,"_path":305,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":307,"_path":308,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":310,"_path":311,"children":312},"Styles","/design-system/styles",[313,316,319,322,325,328,331,334,337,340],{"title":314,"_path":315,"layout":11},"Colour","/design-system/styles/colour",{"title":317,"_path":318,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":320,"_path":321,"layout":11},"Grid","/design-system/styles/grid",{"title":323,"_path":324,"layout":11},"Icons","/design-system/styles/icons",{"title":326,"_path":327,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":329,"_path":330,"layout":11},"Layout","/design-system/styles/layout",{"title":332,"_path":333,"layout":11},"Logo","/design-system/styles/logo",{"title":335,"_path":336,"layout":11},"Motion","/design-system/styles/motion",{"title":338,"_path":339,"layout":11},"Spacing","/design-system/styles/spacing",{"title":341,"_path":342,"layout":11},"Typography","/design-system/styles/typography",{"title":344,"_path":345,"children":346},"Components","/design-system/components",[347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488],{"title":348,"_path":349,"layout":11},"Accordion","/design-system/components/accordion",{"title":351,"_path":352,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":354,"_path":355,"layout":11},"Alert","/design-system/components/alert",{"title":357,"_path":358,"layout":11},"Block quote","/design-system/components/block-quote",{"title":360,"_path":361,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":363,"_path":364,"layout":11},"Button","/design-system/components/button",{"title":366,"_path":367,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":369,"_path":370,"layout":11},"Callout","/design-system/components/callout",{"title":372,"_path":373,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":375,"_path":376,"layout":11},"Card","/design-system/components/card",{"title":378,"_path":379,"layout":11},"Carousel","/design-system/components/carousel",{"title":381,"_path":382,"layout":11},"Category grid","/design-system/components/category-grid",{"title":384,"_path":385,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":387,"_path":388,"layout":11},"Chip","/design-system/components/chip",{"title":390,"_path":391,"layout":11},"Contact us","/design-system/components/contact-us",{"title":393,"_path":394,"layout":11},"Date input","/design-system/components/date-input",{"title":396,"_path":397,"layout":11},"Detail list","/design-system/components/detail-list",{"title":399,"_path":400,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":402,"_path":403,"layout":11},"File","/design-system/components/file",{"title":405,"_path":406,"layout":11},"Footer","/design-system/components/footer",{"title":408,"_path":409,"layout":11},"Form alert","/design-system/components/form-alert",{"title":411,"_path":412,"layout":11},"Form","/design-system/components/form",{"title":414,"_path":415,"layout":11},"Header","/design-system/components/header",{"title":417,"_path":418,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":420,"_path":421,"layout":11},"Input field","/design-system/components/input-field",{"title":423,"_path":424,"layout":11},"Key dates","/design-system/components/key-dates",{"title":426,"_path":427,"layout":11},"Media embed","/design-system/components/media-embed",{"title":429,"_path":430,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":432,"_path":433,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":435,"_path":436,"layout":11},"Media","/design-system/components/media",{"title":438,"_path":439,"layout":11},"Option button","/design-system/components/option-button",{"title":441,"_path":442,"layout":11},"Page action","/design-system/components/page-action",{"title":444,"_path":445,"layout":11},"Pagination","/design-system/components/pagination",{"title":447,"_path":448,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":450,"_path":451,"layout":11},"Profile","/design-system/components/profile",{"title":453,"_path":454,"layout":11},"Radio button","/design-system/components/radio-button",{"title":456,"_path":457,"layout":11},"Related links","/design-system/components/related-links",{"title":459,"_path":460,"layout":11},"Results listing","/design-system/components/results-listing",{"title":462,"_path":463,"layout":11},"Search bar","/design-system/components/search-bar",{"title":465,"_path":466,"layout":11},"Skip link","/design-system/components/skip-link",{"title":468,"_path":469,"layout":11},"Social share","/design-system/components/social-share",{"title":471,"_path":472,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":474,"_path":475,"layout":11},"Table","/design-system/components/table",{"title":477,"_path":478,"layout":11},"Tabs","/design-system/components/tabs",{"title":480,"_path":481,"layout":11},"Tag","/design-system/components/tag",{"title":483,"_path":484,"layout":11},"Text area","/design-system/components/text-area",{"title":486,"_path":487,"layout":11},"Timeline","/design-system/components/timeline",{"title":489,"_path":490,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":492,"_path":493,"children":494,"layout":11},"Ripple Framework","/framework",[495,496,514,536],{"title":492,"_path":493,"layout":11},{"title":497,"_path":498,"children":499},"Key Concepts","/framework/key-concepts",[500,502,505,508,511],{"title":301,"_path":501,"layout":11},"/framework/key-concepts/nuxt",{"title":503,"_path":504,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":506,"_path":507,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":509,"_path":510,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":512,"_path":513,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":515,"_path":516,"children":517},"Guides","/framework/guides",[518,521,524,527,530,533],{"title":519,"_path":520,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":522,"_path":523,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":525,"_path":526,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":528,"_path":529,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":531,"_path":532,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":534,"_path":535,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":537,"_path":538,"layout":11},"Core modules","/framework/core-modules",["Reactive",540],{"module-navigation":233},true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Our design principles</h1><p class="rpl-type-p-large" data-v-3163c6df>There are 4 design principles that are the foundation of the Ripple Design System.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->There are 4 design principles that underpin the Ripple Design System:<!--]--></p><ul><!--[--><li><!--[-->Inclusive.<!--]--></li><li><!--[-->Efficient.<!--]--></li><li><!--[-->Flexible.<!--]--></li><li><!--[-->Easy.<!--]--></li><!--]--></ul><p><!--[-->The Ripple Design System uses these principles when making design decisions.<!--]--></p><h2 id="inclusive"><a href="#inclusive"><!--[-->Inclusive<!--]--></a></h2><ul><!--[--><li><!--[-->Accessibility is top priority.<!--]--></li><li><!--[-->Collaborative in design.<!--]--></li><li><!--[-->Transparent documentation.<!--]--></li><li><!--[-->Friendly, helpful and trustworthy.<!--]--></li><!--]--></ul><p><!--[-->Include all users, abilities and backgrounds in the process and design intent.<!--]--></p><p><!--[-->Support best practices, provide guidance and build trust with the community.<!--]--></p><h2 id="efficient"><a href="#efficient"><!--[-->Efficient<!--]--></a></h2><ul><!--[--><li><!--[-->Less is more.<!--]--></li><li><!--[-->Clean and clear.<!--]--></li><li><!--[-->Considered.<!--]--></li><li><!--[-->Economic design.<!--]--></li><!--]--></ul><p><!--[-->Think holistically to create considered sustainable outcomes that make sense to all users.<!--]--></p><p><!--[-->Increase efficiencies while reducing complexities and risks.<!--]--></p><h2 id="flexible"><a href="#flexible"><!--[-->Flexible<!--]--></a></h2><ul><!--[--><li><!--[-->Responsive to data.<!--]--></li><li><!--[-->Responsive to sub-brands.<!--]--></li><li><!--[-->Considers context.<!--]--></li><li><!--[-->Iterative improvements.<!--]--></li><!--]--></ul><p><!--[-->Use meaningful evidence to improve impact and add value.<!--]--></p><p><!--[-->Find improvement opportunities that elevate the experience for multiple contexts and end users.<!--]--></p><h2 id="easy"><a href="#easy"><!--[-->Easy<!--]--></a></h2><p><!--[-->Easy to:<!--]--></p><ul><!--[--><li><!--[-->contribute to<!--]--></li><li><!--[-->learn and understand<!--]--></li><li><!--[-->create and recreate<!--]--></li><li><!--[-->find information.<!--]--></li><!--]--></ul><p><!--[-->Consider the needs and experiences of end users of Victorian digital products.<!--]--></p><p><!--[-->Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/2.our-design-principles.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/our-design-principles/_payload.json">[{"state":1,"_errors":539,"serverRendered":541,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":228,"$sdd-globals":242,"$sdd-navigation":243},{"/design-system/design/our-design-principles":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":223,"_id":224,"_source":225,"_file":226,"_extension":227},"/design-system/design/our-design-principles","design",false,"","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","page","Core",{"type":14,"children":15,"toc":216},"root",[16,24,49,54,61,84,89,94,100,123,128,133,139,162,167,172,178,183,206,211],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21],{"type":22,"value":23},"text","There are 4 design principles that underpin the Ripple Design System:",{"type":17,"tag":25,"props":26,"children":27},"ul",{},[28,34,39,44],{"type":17,"tag":29,"props":30,"children":31},"li",{},[32],{"type":22,"value":33},"Inclusive.",{"type":17,"tag":29,"props":35,"children":36},{},[37],{"type":22,"value":38},"Efficient.",{"type":17,"tag":29,"props":40,"children":41},{},[42],{"type":22,"value":43},"Flexible.",{"type":17,"tag":29,"props":45,"children":46},{},[47],{"type":22,"value":48},"Easy.",{"type":17,"tag":18,"props":50,"children":51},{},[52],{"type":22,"value":53},"The Ripple Design System uses these principles when making design decisions.",{"type":17,"tag":55,"props":56,"children":58},"h2",{"id":57},"inclusive",[59],{"type":22,"value":60},"Inclusive",{"type":17,"tag":25,"props":62,"children":63},{},[64,69,74,79],{"type":17,"tag":29,"props":65,"children":66},{},[67],{"type":22,"value":68},"Accessibility is top priority.",{"type":17,"tag":29,"props":70,"children":71},{},[72],{"type":22,"value":73},"Collaborative in design.",{"type":17,"tag":29,"props":75,"children":76},{},[77],{"type":22,"value":78},"Transparent documentation.",{"type":17,"tag":29,"props":80,"children":81},{},[82],{"type":22,"value":83},"Friendly, helpful and trustworthy.",{"type":17,"tag":18,"props":85,"children":86},{},[87],{"type":22,"value":88},"Include all users, abilities and backgrounds in the process and design intent.",{"type":17,"tag":18,"props":90,"children":91},{},[92],{"type":22,"value":93},"Support best practices, provide guidance and build trust with the community.",{"type":17,"tag":55,"props":95,"children":97},{"id":96},"efficient",[98],{"type":22,"value":99},"Efficient",{"type":17,"tag":25,"props":101,"children":102},{},[103,108,113,118],{"type":17,"tag":29,"props":104,"children":105},{},[106],{"type":22,"value":107},"Less is more.",{"type":17,"tag":29,"props":109,"children":110},{},[111],{"type":22,"value":112},"Clean and clear.",{"type":17,"tag":29,"props":114,"children":115},{},[116],{"type":22,"value":117},"Considered.",{"type":17,"tag":29,"props":119,"children":120},{},[121],{"type":22,"value":122},"Economic design.",{"type":17,"tag":18,"props":124,"children":125},{},[126],{"type":22,"value":127},"Think holistically to create considered sustainable outcomes that make sense to all users.",{"type":17,"tag":18,"props":129,"children":130},{},[131],{"type":22,"value":132},"Increase efficiencies while reducing complexities and risks.",{"type":17,"tag":55,"props":134,"children":136},{"id":135},"flexible",[137],{"type":22,"value":138},"Flexible",{"type":17,"tag":25,"props":140,"children":141},{},[142,147,152,157],{"type":17,"tag":29,"props":143,"children":144},{},[145],{"type":22,"value":146},"Responsive to data.",{"type":17,"tag":29,"props":148,"children":149},{},[150],{"type":22,"value":151},"Responsive to sub-brands.",{"type":17,"tag":29,"props":153,"children":154},{},[155],{"type":22,"value":156},"Considers context.",{"type":17,"tag":29,"props":158,"children":159},{},[160],{"type":22,"value":161},"Iterative improvements.",{"type":17,"tag":18,"props":163,"children":164},{},[165],{"type":22,"value":166},"Use meaningful evidence to improve impact and add value.",{"type":17,"tag":18,"props":168,"children":169},{},[170],{"type":22,"value":171},"Find improvement opportunities that elevate the experience for multiple contexts and end users.",{"type":17,"tag":55,"props":173,"children":175},{"id":174},"easy",[176],{"type":22,"value":177},"Easy",{"type":17,"tag":18,"props":179,"children":180},{},[181],{"type":22,"value":182},"Easy to:",{"type":17,"tag":25,"props":184,"children":185},{},[186,191,196,201],{"type":17,"tag":29,"props":187,"children":188},{},[189],{"type":22,"value":190},"contribute to",{"type":17,"tag":29,"props":192,"children":193},{},[194],{"type":22,"value":195},"learn and understand",{"type":17,"tag":29,"props":197,"children":198},{},[199],{"type":22,"value":200},"create and recreate",{"type":17,"tag":29,"props":202,"children":203},{},[204],{"type":22,"value":205},"find information.",{"type":17,"tag":18,"props":207,"children":208},{},[209],{"type":22,"value":210},"Consider the needs and experiences of end users of Victorian digital products.",{"type":17,"tag":18,"props":212,"children":213},{},[214],{"type":22,"value":215},"Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind.",{"title":8,"searchDepth":217,"depth":217,"links":218},2,[219,220,221,222],{"id":57,"depth":217,"text":60},{"id":96,"depth":217,"text":99},{"id":135,"depth":217,"text":138},{"id":174,"depth":217,"text":177},"markdown","content:design-system:2.design:2.our-design-principles.md","content","design-system/2.design/2.our-design-principles.md","md",{"/design-system/design/our-design-principles":229},[230,236],{"_path":231,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":232,"description":233,"layout":11,"_type":223,"_id":234,"_source":225,"_file":235,"_extension":227},"/design-system/design/getting-started","Getting started",null,"content:design-system:2.design:1.getting-started.md","design-system/2.design/1.getting-started.md",{"_path":237,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":238,"description":239,"layout":11,"label":12,"_type":223,"_id":240,"_source":225,"_file":241,"_extension":227},"/design-system/design/design-tokens","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","content:design-system:2.design:3.design-tokens.md","design-system/2.design/3.design-tokens.md",{},[244,249,491],{"title":245,"_path":246,"icon":247,"layout":248},"Ripple Design System","/","carbon:home","home",{"title":250,"_path":251,"children":252},"Design System","/design-system",[253,269,279,309,343],{"title":254,"_path":255,"children":256},"About","/design-system/about",[257,260,263,266],{"title":258,"_path":259,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":261,"_path":262,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":264,"_path":265,"layout":11},"Support","/design-system/about/getting-support",{"title":267,"_path":268,"layout":11},"Contributing","/design-system/about/contributing",{"title":270,"_path":271,"children":272},"Design","/design-system/design",[273,274,275,276],{"title":232,"_path":231,"layout":11},{"title":9,"_path":5,"layout":11},{"title":238,"_path":237,"layout":11},{"title":277,"_path":278,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":280,"_path":281,"children":282},"Develop","/design-system/develop",[283,285,287,290],{"title":232,"_path":284,"layout":11},"/design-system/develop/getting-started",{"title":267,"_path":286,"layout":11},"/design-system/develop/contributing",{"title":288,"_path":289,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":291,"_path":292,"children":293,"layout":11},"Usage","/design-system/develop/usage",[294,297,300,303,306],{"title":295,"_path":296,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":298,"_path":299,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":301,"_path":302,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":304,"_path":305,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":307,"_path":308,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":310,"_path":311,"children":312},"Styles","/design-system/styles",[313,316,319,322,325,328,331,334,337,340],{"title":314,"_path":315,"layout":11},"Colour","/design-system/styles/colour",{"title":317,"_path":318,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":320,"_path":321,"layout":11},"Grid","/design-system/styles/grid",{"title":323,"_path":324,"layout":11},"Icons","/design-system/styles/icons",{"title":326,"_path":327,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":329,"_path":330,"layout":11},"Layout","/design-system/styles/layout",{"title":332,"_path":333,"layout":11},"Logo","/design-system/styles/logo",{"title":335,"_path":336,"layout":11},"Motion","/design-system/styles/motion",{"title":338,"_path":339,"layout":11},"Spacing","/design-system/styles/spacing",{"title":341,"_path":342,"layout":11},"Typography","/design-system/styles/typography",{"title":344,"_path":345,"children":346},"Components","/design-system/components",[347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488],{"title":348,"_path":349,"layout":11},"Accordion","/design-system/components/accordion",{"title":351,"_path":352,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":354,"_path":355,"layout":11},"Alert","/design-system/components/alert",{"title":357,"_path":358,"layout":11},"Block quote","/design-system/components/block-quote",{"title":360,"_path":361,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":363,"_path":364,"layout":11},"Button","/design-system/components/button",{"title":366,"_path":367,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":369,"_path":370,"layout":11},"Callout","/design-system/components/callout",{"title":372,"_path":373,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":375,"_path":376,"layout":11},"Card","/design-system/components/card",{"title":378,"_path":379,"layout":11},"Carousel","/design-system/components/carousel",{"title":381,"_path":382,"layout":11},"Category grid","/design-system/components/category-grid",{"title":384,"_path":385,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":387,"_path":388,"layout":11},"Chip","/design-system/components/chip",{"title":390,"_path":391,"layout":11},"Contact us","/design-system/components/contact-us",{"title":393,"_path":394,"layout":11},"Date input","/design-system/components/date-input",{"title":396,"_path":397,"layout":11},"Detail list","/design-system/components/detail-list",{"title":399,"_path":400,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":402,"_path":403,"layout":11},"File","/design-system/components/file",{"title":405,"_path":406,"layout":11},"Footer","/design-system/components/footer",{"title":408,"_path":409,"layout":11},"Form alert","/design-system/components/form-alert",{"title":411,"_path":412,"layout":11},"Form","/design-system/components/form",{"title":414,"_path":415,"layout":11},"Header","/design-system/components/header",{"title":417,"_path":418,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":420,"_path":421,"layout":11},"Input field","/design-system/components/input-field",{"title":423,"_path":424,"layout":11},"Key dates","/design-system/components/key-dates",{"title":426,"_path":427,"layout":11},"Media embed","/design-system/components/media-embed",{"title":429,"_path":430,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":432,"_path":433,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":435,"_path":436,"layout":11},"Media","/design-system/components/media",{"title":438,"_path":439,"layout":11},"Option button","/design-system/components/option-button",{"title":441,"_path":442,"layout":11},"Page action","/design-system/components/page-action",{"title":444,"_path":445,"layout":11},"Pagination","/design-system/components/pagination",{"title":447,"_path":448,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":450,"_path":451,"layout":11},"Profile","/design-system/components/profile",{"title":453,"_path":454,"layout":11},"Radio button","/design-system/components/radio-button",{"title":456,"_path":457,"layout":11},"Related links","/design-system/components/related-links",{"title":459,"_path":460,"layout":11},"Results listing","/design-system/components/results-listing",{"title":462,"_path":463,"layout":11},"Search bar","/design-system/components/search-bar",{"title":465,"_path":466,"layout":11},"Skip link","/design-system/components/skip-link",{"title":468,"_path":469,"layout":11},"Social share","/design-system/components/social-share",{"title":471,"_path":472,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":474,"_path":475,"layout":11},"Table","/design-system/components/table",{"title":477,"_path":478,"layout":11},"Tabs","/design-system/components/tabs",{"title":480,"_path":481,"layout":11},"Tag","/design-system/components/tag",{"title":483,"_path":484,"layout":11},"Text area","/design-system/components/text-area",{"title":486,"_path":487,"layout":11},"Timeline","/design-system/components/timeline",{"title":489,"_path":490,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":492,"_path":493,"children":494,"layout":11},"Ripple Framework","/framework",[495,496,514,536],{"title":492,"_path":493,"layout":11},{"title":497,"_path":498,"children":499},"Key Concepts","/framework/key-concepts",[500,502,505,508,511],{"title":301,"_path":501,"layout":11},"/framework/key-concepts/nuxt",{"title":503,"_path":504,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":506,"_path":507,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":509,"_path":510,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":512,"_path":513,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":515,"_path":516,"children":517},"Guides","/framework/guides",[518,521,524,527,530,533],{"title":519,"_path":520,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":522,"_path":523,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":525,"_path":526,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":528,"_path":529,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":531,"_path":532,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":534,"_path":535,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":537,"_path":538,"layout":11},"Core modules","/framework/core-modules",["Reactive",540],{"module-navigation":233},true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/design/theming-guidance-for-designers/index.html b/design-system/design/theming-guidance-for-designers/index.html index f971ec77f9..8f98175517 100644 --- a/design-system/design/theming-guidance-for-designers/index.html +++ b/design-system/design/theming-guidance-for-designers/index.html @@ -24,7 +24,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Theming guidance for designers</h1><p class="rpl-type-p-large" data-v-3163c6df></p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Jump to:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/design/theming-guidance-for-designers/#create-a-custom-theme" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Create a custom theme<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[--><a href="/design-system/design/theming-guidance-for-designers/#component-specific-theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Component-specific theming<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[--><a href="/design-system/design/theming-guidance-for-designers/#theme-accessibility" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Theme accessibility<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[--><a href="/design-system/design/theming-guidance-for-designers/#automatic-colour-token-logic" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Automatic colour token logic<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><p><!--[-->Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming.<!--]--></p><p><!--[-->Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation.<!--]--></p><p><!--[-->When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience.<!--]--></p><p><!--[-->We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast.<!--]--></p><p><!--[-->We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met.<!--]--></p><p><!--[-->To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="create-a-custom-theme"><a href="#create-a-custom-theme"><!--[-->Create a custom theme<!--]--></a></h2><p><!--[-->Ripple has been designed with a primary and accent colour. These inform the colour framework.<!--]--></p><p><!--[-->A link colour, focus colour and optional gradient are also required when theming.<!--]--></p><p><!--[-->The primary, accent and focus colours can be either light or dark:<!--]--></p><ul><!--[--><li><!--[-->'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A).<!--]--></li><li><!--[-->‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF).<!--]--></li><!--]--></ul><p><!--[-->To classify your colour as light or dark, we recommend the use <a href="https://webaim.org/resources/contrastchecker/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WebAim Colour Contrast Checker<!--]--><!--]--><!----><!--]--></a> or the <a href="https://www.figma.com/community/plugin/733159460536249875" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma plugin, A11y - Colour Contrast Checker<!--]--><!--]--><!----><!--]--></a> to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above.<!--]--></p><p><!--[-->Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements.<!--]--></p><p><!--[-->It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page.<!--]--></p><p><!--[-->Guidance for creating your own theme can be found on the Theming page of the <a href="https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Ripple 2.0 Design System Figma file<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->If you don’t have access, you can <a href="https://www.vic.gov.au/ripple-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->request access to view the Ripple 2.0 Design System<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="component-specific-theming"><a href="#component-specific-theming"><!--[-->Component-specific theming<!--]--></a></h2><p><!--[-->The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component.<!--]--></p><p><!--[-->There are 2 options for component-specific styling:<!--]--></p><ul><!--[--><li><!--[-->neutral<!--]--></li><li><!--[-->custom.<!--]--></li><!--]--></ul><h3 id="neutral"><a href="#neutral"><!--[-->Neutral<!--]--></a></h3><p><!--[-->Neutral can be applied to the following components:<!--]--></p><ul><!--[--><li><!--[-->buttons<!--]--></li><li><!--[-->header (only reverse and image variants)<!--]--></li><li><!--[-->footer.<!--]--></li><!--]--></ul><p><!--[-->The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised.<!--]--></p><h3 id="custom"><a href="#custom"><!--[-->Custom<!--]--></a></h3><p><!--[-->Custom component theming can only be applied to the footer.<!--]--></p><p><!--[-->The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required.<!--]--></p><p><!--[-->To learn more about custom styling please see the Theming page of the <a href="https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Ripple 2.0 Design System Figma file<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="theme-accessibility"><a href="#theme-accessibility"><!--[-->Theme accessibility<!--]--></a></h2><p><!--[-->Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: <a href="https://www.vic.gov.au/brand-victoria-guidelines-logos" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Brand Victoria guidelines<!--]--><!--]--><!----><!--]--></a> for more information).<!--]--></p><p><!--[-->Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast.<!--]--></p><p><!--[-->Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->1.4.3 Contrast Minimum (Level AA)<!--]--><!--]--><!----><!--]--></a> The visual presentation of <a href="https://www.w3.org/TR/WCAG21/#dfn-text" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->text<!--]--><!--]--><!----><!--]--></a> and <a href="https://www.w3.org/TR/WCAG21/#dfn-images-of-text" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->images of text<!--]--><!--]--><!----><!--]--></a> has a <a href="https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->contrast ratio<!--]--><!--]--><!----><!--]--></a> of at least 4.5:1, except for the following:<!--]--></p><p><!--[--><a href="https://www.w3.org/TR/WCAG21/#dfn-large-scale" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Large-scale<!--]--><!--]--><!----><!--]--></a> text and images of large-scale text have a contrast ratio of at least 3:1;<!--]--></p><p><!--[-->Text or images of text that are part of an inactive <a href="https://www.w3.org/TR/WCAG21/#dfn-user-interface-components" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->user interface component<!--]--><!--]--><!----><!--]--></a>, that are <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->pure decoration<!--]--><!--]--><!----><!--]--></a>, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.<!--]--></p><p><!--[-->Text that is part of a logo or brand name has no contrast requirement.<!--]--></p><!--]--></blockquote><h3 id="accessibility-testing-requirements"><a href="#accessibility-testing-requirements"><!--[-->Accessibility testing requirements<!--]--></a></h3><p><!--[-->When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->minimum contrast ratio of 4:5:1<!--]--><!--]--><!----><!--]--></a> for normal text contrast, 3:1 for large text and non-text elements must be met.<!--]--></p><p><!--[-->Links are required to meet a ratio of 4.5:1 colour contrast.<!--]--></p><p><!--[-->In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:<!--]--></p><ul><!--[--><li><!--[-->dark type / rpl-clr-dark / #1A1A1A<!--]--></li><li><!--[-->light type / rpl-clr-light / #FFFFFF.<!--]--></li><!--]--></ul><p><!--[-->The link colour is tested against 3 colours:<!--]--></p><ul><!--[--><li><!--[-->light type / rpl-clr-light / #FFFFFF<!--]--></li><li><!--[-->rpl-clr-neutral-100 / #F5F5F5<!--]--></li><li><!--[-->rpl-clr-accent-alt / #E6F5FD (example hex only).<!--]--></li><!--]--></ul><p><!--[-->Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the <a href="https://www.figma.com/community/plugin/733343906244951586" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma plugin 'Color Blind'<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="colour-token-automatic-logic"><a href="#colour-token-automatic-logic"><!--[-->Colour token automatic logic<!--]--></a></h2><p><!--[-->Below is a full list of colour tokens required to theme the Ripple 2.0 Design System.<!--]--></p><p><!--[-->Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements. -For example, if the primary colour is classified as dark:<!--]--></p><ul><!--[--><li><!--[-->rpl-clr-type-primary-contrast will automatically be rpl-clr-light<!--]--></li><li><!--[-->rpl-clr-type-primary-accessible will automatically be rpl-clr-primary.<!--]--></li><!--]--></ul><h3 id="core"><a href="#core"><!--[-->Core<!--]--></a></h3><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Custom / Automatic<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-primary<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-primary-alt<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-primary-alpha<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-primary')<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-accent<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-accent-alt<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-focus<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-link<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-gradient-horizontal<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-gradient-vertical<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h3 id="typography-colour-tokens"><a href="#typography-colour-tokens"><!--[-->Typography colour tokens<!--]--></a></h3><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Custom / Automatic<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-type-primary-contrast<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-primary’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-contrast-alpha<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-type-primary-contrast')<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-accent-contrast<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-accent’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-accessible<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-primary’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-alt-accessible<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-primary’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-focus-contrast<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-focus’ contrast requirements)<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h3 id="footer-specific-optional"><a href="#footer-specific-optional"><!--[-->Footer-specific (optional)<!--]--></a></h3><p><!--[-->See: <a href="/design-system/design/theming-guidance-for-designers/#component-specific-theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->component-specific theming<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Custom / Automatic<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-footer<!--]--></td><td><!--[-->Custom or automatic<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-footer-alt<!--]--></td><td><!--[-->Custom or automatic<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-footer-contrast<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-footer’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-footer-accessible<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-footer’ contrast requirements)<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><hr class="docs-hr" data-v-341b6a73><h2 id="automatic-colour-token-logic"><a href="#automatic-colour-token-logic"><!--[-->Automatic Colour Token Logic<!--]--></a></h2><p><!--[-->Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility.<!--]--></p><ul><!--[--><li><!--[-->‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A).<!--]--></li><li><!--[-->‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF).<!--]--></li><!--]--></ul><h3 id="primary-access-focus-and-link"><a href="#primary-access-focus-and-link"><!--[-->Primary, Access, Focus and Link<!--]--></a></h3><h4 id="primary"><a href="#primary"><!--[-->Primary<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Colour ‘Dark’<!--]--></th><th><!--[-->Colour 'Light<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-primary-alpha<!--]--></td><td><!--[-->rpl-clr-primary at 50% opacity<!--]--></td><td><!--[-->rpl-clr-primary at 50% opacity<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-contrast<!--]--></td><td><!--[-->rpl-clr-light<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-contrast-alpha<!--]--></td><td><!--[-->rpl-clr-type-primary-contrast at 75% opacity<!--]--></td><td><!--[-->rpl-clr-type-primary-contrast at 75% opacity<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-accessible<!--]--></td><td><!--[-->rpl-clr-primary<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-alt-accessible<!--]--></td><td><!--[-->rlpl-clr-primary-alt<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h4 id="accent"><a href="#accent"><!--[-->Accent<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Colour ‘Dark’<!--]--></th><th><!--[-->Colour 'Light<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-type-accent-contrast<!--]--></td><td><!--[-->rpl-clr-light<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h4 id="focus"><a href="#focus"><!--[-->Focus<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Colour ‘Dark’<!--]--></th><th><!--[-->Colour 'Light<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-type-focus-contrast<!--]--></td><td><!--[-->rpl-clr-light<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h4 id="link"><a href="#link"><!--[-->Link<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Colour ‘Dark’<!--]--></th><th><!--[-->Colour 'Light<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[--><!--]--></td><td><!--[--><em><!--[-->If Primary ‘Dark’<!--]--></em><!--]--></td><td><!--[--><em><!--[-->If Primary ‘Light’<!--]--></em><!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-link<!--]--></td><td><!--[-->rpl-clr-primary<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h3 id="gradient"><a href="#gradient"><!--[-->Gradient<!--]--></a></h3><p><!--[-->Including a gradient is optional for theming.<!--]--></p><p><!--[-->If a gradient is not used, 'rpl-clr-accent' will be used in its place.<!--]--></p><h4 id="gradient-1"><a href="#gradient-1"><!--[-->Gradient<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Gradient<!--]--></th><th><!--[-->Accent<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-gradient-horizontal<!--]--></td><td><!--[-->rpl-clr-gradient (90 degrees)<!--]--></td><td><!--[-->rpl-clr-accent<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-gradient-vertical<!--]--></td><td><!--[-->rpl-clr-gradient (180 degrees)<!--]--></td><td><!--[-->rpl-clr-accent<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/4.theming-guidance-for-designers.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/theming-guidance-for-designers/_payload.json">[{"state":1,"_errors":1575,"serverRendered":1577,"path":1578,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":1256,"$sdd-globals":1278,"$sdd-navigation":1279},{"/design-system/design/theming-guidance-for-designers":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":1251,"_id":1252,"_source":1253,"_file":1254,"_extension":1255},"/design-system/design/theming-guidance-for-designers","design",false,"","Theming guidance for designers",null,"page","Core",{"type":14,"children":15,"toc":1230},"root",[16,24,71,75,80,85,90,95,100,105,108,114,119,124,129,142,166,171,176,189,202,205,210,215,220,233,239,244,262,267,273,278,283,294,297,302,316,321,326,408,414,427,432,437,450,455,473,486,489,495,500,505,518,523,660,666,762,768,779,849,852,858,863,876,882,889,995,1001,1040,1046,1085,1091,1153,1159,1164,1169,1174],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21],{"type":22,"value":23},"text","Jump to:",{"type":17,"tag":25,"props":26,"children":27},"ul",{},[28,41,51,61],{"type":17,"tag":29,"props":30,"children":31},"li",{},[32,39],{"type":17,"tag":33,"props":34,"children":36},"a",{"href":35},"/design-system/design/theming-guidance-for-designers/#create-a-custom-theme",[37],{"type":22,"value":38},"Create a custom theme",{"type":22,"value":40},".",{"type":17,"tag":29,"props":42,"children":43},{},[44,50],{"type":17,"tag":33,"props":45,"children":47},{"href":46},"/design-system/design/theming-guidance-for-designers/#component-specific-theming",[48],{"type":22,"value":49},"Component-specific theming",{"type":22,"value":40},{"type":17,"tag":29,"props":52,"children":53},{},[54,60],{"type":17,"tag":33,"props":55,"children":57},{"href":56},"/design-system/design/theming-guidance-for-designers/#theme-accessibility",[58],{"type":22,"value":59},"Theme accessibility",{"type":22,"value":40},{"type":17,"tag":29,"props":62,"children":63},{},[64,70],{"type":17,"tag":33,"props":65,"children":67},{"href":66},"/design-system/design/theming-guidance-for-designers/#automatic-colour-token-logic",[68],{"type":22,"value":69},"Automatic colour token logic",{"type":22,"value":40},{"type":17,"tag":72,"props":73,"children":74},"hr",{},[],{"type":17,"tag":18,"props":76,"children":77},{},[78],{"type":22,"value":79},"Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming.",{"type":17,"tag":18,"props":81,"children":82},{},[83],{"type":22,"value":84},"Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation.",{"type":17,"tag":18,"props":86,"children":87},{},[88],{"type":22,"value":89},"When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience.",{"type":17,"tag":18,"props":91,"children":92},{},[93],{"type":22,"value":94},"We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast.",{"type":17,"tag":18,"props":96,"children":97},{},[98],{"type":22,"value":99},"We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met.",{"type":17,"tag":18,"props":101,"children":102},{},[103],{"type":22,"value":104},"To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team.",{"type":17,"tag":72,"props":106,"children":107},{},[],{"type":17,"tag":109,"props":110,"children":112},"h2",{"id":111},"create-a-custom-theme",[113],{"type":22,"value":38},{"type":17,"tag":18,"props":115,"children":116},{},[117],{"type":22,"value":118},"Ripple has been designed with a primary and accent colour. These inform the colour framework.",{"type":17,"tag":18,"props":120,"children":121},{},[122],{"type":22,"value":123},"A link colour, focus colour and optional gradient are also required when theming.",{"type":17,"tag":18,"props":125,"children":126},{},[127],{"type":22,"value":128},"The primary, accent and focus colours can be either light or dark:",{"type":17,"tag":25,"props":130,"children":131},{},[132,137],{"type":17,"tag":29,"props":133,"children":134},{},[135],{"type":22,"value":136},"'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A).",{"type":17,"tag":29,"props":138,"children":139},{},[140],{"type":22,"value":141},"‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF).",{"type":17,"tag":18,"props":143,"children":144},{},[145,147,155,157,164],{"type":22,"value":146},"To classify your colour as light or dark, we recommend the use ",{"type":17,"tag":33,"props":148,"children":152},{"href":149,"rel":150},"https://webaim.org/resources/contrastchecker/",[151],"nofollow",[153],{"type":22,"value":154},"WebAim Colour Contrast Checker",{"type":22,"value":156}," or the ",{"type":17,"tag":33,"props":158,"children":161},{"href":159,"rel":160},"https://www.figma.com/community/plugin/733159460536249875",[151],[162],{"type":22,"value":163},"Figma plugin, A11y - Colour Contrast Checker",{"type":22,"value":165}," to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above.",{"type":17,"tag":18,"props":167,"children":168},{},[169],{"type":22,"value":170},"Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements.",{"type":17,"tag":18,"props":172,"children":173},{},[174],{"type":22,"value":175},"It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page.",{"type":17,"tag":18,"props":177,"children":178},{},[179,181,188],{"type":22,"value":180},"Guidance for creating your own theme can be found on the Theming page of the ",{"type":17,"tag":33,"props":182,"children":185},{"href":183,"rel":184},"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1",[151],[186],{"type":22,"value":187},"Ripple 2.0 Design System Figma file",{"type":22,"value":40},{"type":17,"tag":18,"props":190,"children":191},{},[192,194,201],{"type":22,"value":193},"If you don’t have access, you can ",{"type":17,"tag":33,"props":195,"children":198},{"href":196,"rel":197},"https://www.vic.gov.au/ripple-design-system",[151],[199],{"type":22,"value":200},"request access to view the Ripple 2.0 Design System",{"type":22,"value":40},{"type":17,"tag":72,"props":203,"children":204},{},[],{"type":17,"tag":109,"props":206,"children":208},{"id":207},"component-specific-theming",[209],{"type":22,"value":49},{"type":17,"tag":18,"props":211,"children":212},{},[213],{"type":22,"value":214},"The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component.",{"type":17,"tag":18,"props":216,"children":217},{},[218],{"type":22,"value":219},"There are 2 options for component-specific styling:",{"type":17,"tag":25,"props":221,"children":222},{},[223,228],{"type":17,"tag":29,"props":224,"children":225},{},[226],{"type":22,"value":227},"neutral",{"type":17,"tag":29,"props":229,"children":230},{},[231],{"type":22,"value":232},"custom.",{"type":17,"tag":234,"props":235,"children":236},"h3",{"id":227},[237],{"type":22,"value":238},"Neutral",{"type":17,"tag":18,"props":240,"children":241},{},[242],{"type":22,"value":243},"Neutral can be applied to the following components:",{"type":17,"tag":25,"props":245,"children":246},{},[247,252,257],{"type":17,"tag":29,"props":248,"children":249},{},[250],{"type":22,"value":251},"buttons",{"type":17,"tag":29,"props":253,"children":254},{},[255],{"type":22,"value":256},"header (only reverse and image variants)",{"type":17,"tag":29,"props":258,"children":259},{},[260],{"type":22,"value":261},"footer.",{"type":17,"tag":18,"props":263,"children":264},{},[265],{"type":22,"value":266},"The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised.",{"type":17,"tag":234,"props":268,"children":270},{"id":269},"custom",[271],{"type":22,"value":272},"Custom",{"type":17,"tag":18,"props":274,"children":275},{},[276],{"type":22,"value":277},"Custom component theming can only be applied to the footer.",{"type":17,"tag":18,"props":279,"children":280},{},[281],{"type":22,"value":282},"The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required.",{"type":17,"tag":18,"props":284,"children":285},{},[286,288,293],{"type":22,"value":287},"To learn more about custom styling please see the Theming page of the ",{"type":17,"tag":33,"props":289,"children":291},{"href":183,"rel":290},[151],[292],{"type":22,"value":187},{"type":22,"value":40},{"type":17,"tag":72,"props":295,"children":296},{},[],{"type":17,"tag":109,"props":298,"children":300},{"id":299},"theme-accessibility",[301],{"type":22,"value":59},{"type":17,"tag":18,"props":303,"children":304},{},[305,307,314],{"type":22,"value":306},"Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: ",{"type":17,"tag":33,"props":308,"children":311},{"href":309,"rel":310},"https://www.vic.gov.au/brand-victoria-guidelines-logos",[151],[312],{"type":22,"value":313},"Brand Victoria guidelines",{"type":22,"value":315}," for more information).",{"type":17,"tag":18,"props":317,"children":318},{},[319],{"type":22,"value":320},"Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast.",{"type":17,"tag":18,"props":322,"children":323},{},[324],{"type":22,"value":325},"Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency.",{"type":17,"tag":327,"props":328,"children":329},"blockquote",{},[330,368,380,403],{"type":17,"tag":18,"props":331,"children":332},{},[333,340,342,348,350,357,359,366],{"type":17,"tag":33,"props":334,"children":337},{"href":335,"rel":336},"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",[151],[338],{"type":22,"value":339},"1.4.3 Contrast Minimum (Level AA)",{"type":22,"value":341},"\nThe visual presentation of ",{"type":17,"tag":33,"props":343,"children":346},{"href":344,"rel":345},"https://www.w3.org/TR/WCAG21/#dfn-text",[151],[347],{"type":22,"value":22},{"type":22,"value":349}," and ",{"type":17,"tag":33,"props":351,"children":354},{"href":352,"rel":353},"https://www.w3.org/TR/WCAG21/#dfn-images-of-text",[151],[355],{"type":22,"value":356},"images of text",{"type":22,"value":358}," has a ",{"type":17,"tag":33,"props":360,"children":363},{"href":361,"rel":362},"https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio",[151],[364],{"type":22,"value":365},"contrast ratio",{"type":22,"value":367}," of at least 4.5:1, except for the following:",{"type":17,"tag":18,"props":369,"children":370},{},[371,378],{"type":17,"tag":33,"props":372,"children":375},{"href":373,"rel":374},"https://www.w3.org/TR/WCAG21/#dfn-large-scale",[151],[376],{"type":22,"value":377},"Large-scale",{"type":22,"value":379}," text and images of large-scale text have a contrast ratio of at least 3:1;",{"type":17,"tag":18,"props":381,"children":382},{},[383,385,392,394,401],{"type":22,"value":384},"Text or images of text that are part of an inactive ",{"type":17,"tag":33,"props":386,"children":389},{"href":387,"rel":388},"https://www.w3.org/TR/WCAG21/#dfn-user-interface-components",[151],[390],{"type":22,"value":391},"user interface component",{"type":22,"value":393},", that are ",{"type":17,"tag":33,"props":395,"children":398},{"href":396,"rel":397},"https://www.w3.org/TR/WCAG21/#dfn-pure-decoration",[151],[399],{"type":22,"value":400},"pure decoration",{"type":22,"value":402},", that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.",{"type":17,"tag":18,"props":404,"children":405},{},[406],{"type":22,"value":407},"Text that is part of a logo or brand name has no contrast requirement.",{"type":17,"tag":234,"props":409,"children":411},{"id":410},"accessibility-testing-requirements",[412],{"type":22,"value":413},"Accessibility testing requirements",{"type":17,"tag":18,"props":415,"children":416},{},[417,419,425],{"type":22,"value":418},"When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a ",{"type":17,"tag":33,"props":420,"children":422},{"href":335,"rel":421},[151],[423],{"type":22,"value":424},"minimum contrast ratio of 4:5:1",{"type":22,"value":426}," for normal text contrast, 3:1 for large text and non-text elements must be met.",{"type":17,"tag":18,"props":428,"children":429},{},[430],{"type":22,"value":431},"Links are required to meet a ratio of 4.5:1 colour contrast.",{"type":17,"tag":18,"props":433,"children":434},{},[435],{"type":22,"value":436},"In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:",{"type":17,"tag":25,"props":438,"children":439},{},[440,445],{"type":17,"tag":29,"props":441,"children":442},{},[443],{"type":22,"value":444},"dark type / rpl-clr-dark / #1A1A1A",{"type":17,"tag":29,"props":446,"children":447},{},[448],{"type":22,"value":449},"light type / rpl-clr-light / #FFFFFF.",{"type":17,"tag":18,"props":451,"children":452},{},[453],{"type":22,"value":454},"The link colour is tested against 3 colours:",{"type":17,"tag":25,"props":456,"children":457},{},[458,463,468],{"type":17,"tag":29,"props":459,"children":460},{},[461],{"type":22,"value":462},"light type / rpl-clr-light / #FFFFFF",{"type":17,"tag":29,"props":464,"children":465},{},[466],{"type":22,"value":467},"rpl-clr-neutral-100 / #F5F5F5",{"type":17,"tag":29,"props":469,"children":470},{},[471],{"type":22,"value":472},"rpl-clr-accent-alt / #E6F5FD (example hex only).",{"type":17,"tag":18,"props":474,"children":475},{},[476,478,485],{"type":22,"value":477},"Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the ",{"type":17,"tag":33,"props":479,"children":482},{"href":480,"rel":481},"https://www.figma.com/community/plugin/733343906244951586",[151],[483],{"type":22,"value":484},"Figma plugin 'Color Blind'",{"type":22,"value":40},{"type":17,"tag":72,"props":487,"children":488},{},[],{"type":17,"tag":109,"props":490,"children":492},{"id":491},"colour-token-automatic-logic",[493],{"type":22,"value":494},"Colour token automatic logic",{"type":17,"tag":18,"props":496,"children":497},{},[498],{"type":22,"value":499},"Below is a full list of colour tokens required to theme the Ripple 2.0 Design System.",{"type":17,"tag":18,"props":501,"children":502},{},[503],{"type":22,"value":504},"Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements.\nFor example, if the primary colour is classified as dark:",{"type":17,"tag":25,"props":506,"children":507},{},[508,513],{"type":17,"tag":29,"props":509,"children":510},{},[511],{"type":22,"value":512},"rpl-clr-type-primary-contrast will automatically be rpl-clr-light",{"type":17,"tag":29,"props":514,"children":515},{},[516],{"type":22,"value":517},"rpl-clr-type-primary-accessible will automatically be rpl-clr-primary.",{"type":17,"tag":234,"props":519,"children":521},{"id":520},"core",[522],{"type":22,"value":12},{"type":17,"tag":524,"props":525,"children":526},"table",{},[527,546],{"type":17,"tag":528,"props":529,"children":530},"thead",{},[531],{"type":17,"tag":532,"props":533,"children":534},"tr",{},[535,541],{"type":17,"tag":536,"props":537,"children":538},"th",{"align":10},[539],{"type":22,"value":540},"Token",{"type":17,"tag":536,"props":542,"children":543},{"align":10},[544],{"type":22,"value":545},"Custom / Automatic",{"type":17,"tag":547,"props":548,"children":549},"tbody",{},[550,563,575,588,600,612,624,636,648],{"type":17,"tag":532,"props":551,"children":552},{},[553,559],{"type":17,"tag":554,"props":555,"children":556},"td",{"align":10},[557],{"type":22,"value":558},"rpl-clr-primary",{"type":17,"tag":554,"props":560,"children":561},{"align":10},[562],{"type":22,"value":272},{"type":17,"tag":532,"props":564,"children":565},{},[566,571],{"type":17,"tag":554,"props":567,"children":568},{"align":10},[569],{"type":22,"value":570},"rpl-clr-primary-alt",{"type":17,"tag":554,"props":572,"children":573},{"align":10},[574],{"type":22,"value":272},{"type":17,"tag":532,"props":576,"children":577},{},[578,583],{"type":17,"tag":554,"props":579,"children":580},{"align":10},[581],{"type":22,"value":582},"rpl-clr-primary-alpha",{"type":17,"tag":554,"props":584,"children":585},{"align":10},[586],{"type":22,"value":587},"Automatic (based on ‘rlp-clr-primary')",{"type":17,"tag":532,"props":589,"children":590},{},[591,596],{"type":17,"tag":554,"props":592,"children":593},{"align":10},[594],{"type":22,"value":595},"rpl-clr-accent",{"type":17,"tag":554,"props":597,"children":598},{"align":10},[599],{"type":22,"value":272},{"type":17,"tag":532,"props":601,"children":602},{},[603,608],{"type":17,"tag":554,"props":604,"children":605},{"align":10},[606],{"type":22,"value":607},"rpl-clr-accent-alt",{"type":17,"tag":554,"props":609,"children":610},{"align":10},[611],{"type":22,"value":272},{"type":17,"tag":532,"props":613,"children":614},{},[615,620],{"type":17,"tag":554,"props":616,"children":617},{"align":10},[618],{"type":22,"value":619},"rpl-clr-focus",{"type":17,"tag":554,"props":621,"children":622},{"align":10},[623],{"type":22,"value":272},{"type":17,"tag":532,"props":625,"children":626},{},[627,632],{"type":17,"tag":554,"props":628,"children":629},{"align":10},[630],{"type":22,"value":631},"rpl-clr-link",{"type":17,"tag":554,"props":633,"children":634},{"align":10},[635],{"type":22,"value":272},{"type":17,"tag":532,"props":637,"children":638},{},[639,644],{"type":17,"tag":554,"props":640,"children":641},{"align":10},[642],{"type":22,"value":643},"rpl-clr-gradient-horizontal",{"type":17,"tag":554,"props":645,"children":646},{"align":10},[647],{"type":22,"value":272},{"type":17,"tag":532,"props":649,"children":650},{},[651,656],{"type":17,"tag":554,"props":652,"children":653},{"align":10},[654],{"type":22,"value":655},"rpl-clr-gradient-vertical",{"type":17,"tag":554,"props":657,"children":658},{"align":10},[659],{"type":22,"value":272},{"type":17,"tag":234,"props":661,"children":663},{"id":662},"typography-colour-tokens",[664],{"type":22,"value":665},"Typography colour tokens",{"type":17,"tag":524,"props":667,"children":668},{},[669,683],{"type":17,"tag":528,"props":670,"children":671},{},[672],{"type":17,"tag":532,"props":673,"children":674},{},[675,679],{"type":17,"tag":536,"props":676,"children":677},{"align":10},[678],{"type":22,"value":540},{"type":17,"tag":536,"props":680,"children":681},{"align":10},[682],{"type":22,"value":545},{"type":17,"tag":547,"props":684,"children":685},{},[686,699,712,725,737,749],{"type":17,"tag":532,"props":687,"children":688},{},[689,694],{"type":17,"tag":554,"props":690,"children":691},{"align":10},[692],{"type":22,"value":693},"rpl-clr-type-primary-contrast",{"type":17,"tag":554,"props":695,"children":696},{"align":10},[697],{"type":22,"value":698},"Automatic (based on ‘rlp-clr-primary’ contrast requirements)",{"type":17,"tag":532,"props":700,"children":701},{},[702,707],{"type":17,"tag":554,"props":703,"children":704},{"align":10},[705],{"type":22,"value":706},"rpl-clr-type-primary-contrast-alpha",{"type":17,"tag":554,"props":708,"children":709},{"align":10},[710],{"type":22,"value":711},"Automatic (based on ‘rlp-clr-type-primary-contrast')",{"type":17,"tag":532,"props":713,"children":714},{},[715,720],{"type":17,"tag":554,"props":716,"children":717},{"align":10},[718],{"type":22,"value":719},"rpl-clr-type-accent-contrast",{"type":17,"tag":554,"props":721,"children":722},{"align":10},[723],{"type":22,"value":724},"Automatic (based on ‘rlp-clr-accent’ contrast requirements)",{"type":17,"tag":532,"props":726,"children":727},{},[728,733],{"type":17,"tag":554,"props":729,"children":730},{"align":10},[731],{"type":22,"value":732},"rpl-clr-type-primary-accessible",{"type":17,"tag":554,"props":734,"children":735},{"align":10},[736],{"type":22,"value":698},{"type":17,"tag":532,"props":738,"children":739},{},[740,745],{"type":17,"tag":554,"props":741,"children":742},{"align":10},[743],{"type":22,"value":744},"rpl-clr-type-primary-alt-accessible",{"type":17,"tag":554,"props":746,"children":747},{"align":10},[748],{"type":22,"value":698},{"type":17,"tag":532,"props":750,"children":751},{},[752,757],{"type":17,"tag":554,"props":753,"children":754},{"align":10},[755],{"type":22,"value":756},"rpl-clr-type-focus-contrast",{"type":17,"tag":554,"props":758,"children":759},{"align":10},[760],{"type":22,"value":761},"Automatic (based on ‘rlp-clr-focus’ contrast requirements)",{"type":17,"tag":234,"props":763,"children":765},{"id":764},"footer-specific-optional",[766],{"type":22,"value":767},"Footer-specific (optional)",{"type":17,"tag":18,"props":769,"children":770},{},[771,773,778],{"type":22,"value":772},"See: ",{"type":17,"tag":33,"props":774,"children":775},{"href":46},[776],{"type":22,"value":777},"component-specific theming",{"type":22,"value":40},{"type":17,"tag":524,"props":780,"children":781},{},[782,796],{"type":17,"tag":528,"props":783,"children":784},{},[785],{"type":17,"tag":532,"props":786,"children":787},{},[788,792],{"type":17,"tag":536,"props":789,"children":790},{"align":10},[791],{"type":22,"value":540},{"type":17,"tag":536,"props":793,"children":794},{"align":10},[795],{"type":22,"value":545},{"type":17,"tag":547,"props":797,"children":798},{},[799,812,824,837],{"type":17,"tag":532,"props":800,"children":801},{},[802,807],{"type":17,"tag":554,"props":803,"children":804},{"align":10},[805],{"type":22,"value":806},"rpl-clr-footer",{"type":17,"tag":554,"props":808,"children":809},{"align":10},[810],{"type":22,"value":811},"Custom or automatic",{"type":17,"tag":532,"props":813,"children":814},{},[815,820],{"type":17,"tag":554,"props":816,"children":817},{"align":10},[818],{"type":22,"value":819},"rpl-clr-footer-alt",{"type":17,"tag":554,"props":821,"children":822},{"align":10},[823],{"type":22,"value":811},{"type":17,"tag":532,"props":825,"children":826},{},[827,832],{"type":17,"tag":554,"props":828,"children":829},{"align":10},[830],{"type":22,"value":831},"rpl-clr-footer-contrast",{"type":17,"tag":554,"props":833,"children":834},{"align":10},[835],{"type":22,"value":836},"Automatic (based on ‘rlp-clr-footer’ contrast requirements)",{"type":17,"tag":532,"props":838,"children":839},{},[840,845],{"type":17,"tag":554,"props":841,"children":842},{"align":10},[843],{"type":22,"value":844},"rpl-clr-type-footer-accessible",{"type":17,"tag":554,"props":846,"children":847},{"align":10},[848],{"type":22,"value":836},{"type":17,"tag":72,"props":850,"children":851},{},[],{"type":17,"tag":109,"props":853,"children":855},{"id":854},"automatic-colour-token-logic",[856],{"type":22,"value":857},"Automatic Colour Token Logic",{"type":17,"tag":18,"props":859,"children":860},{},[861],{"type":22,"value":862},"Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility.",{"type":17,"tag":25,"props":864,"children":865},{},[866,871],{"type":17,"tag":29,"props":867,"children":868},{},[869],{"type":22,"value":870},"‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A).",{"type":17,"tag":29,"props":872,"children":873},{},[874],{"type":22,"value":875},"‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF).",{"type":17,"tag":234,"props":877,"children":879},{"id":878},"primary-access-focus-and-link",[880],{"type":22,"value":881},"Primary, Access, Focus and Link",{"type":17,"tag":883,"props":884,"children":886},"h4",{"id":885},"primary",[887],{"type":22,"value":888},"Primary",{"type":17,"tag":524,"props":890,"children":891},{},[892,912],{"type":17,"tag":528,"props":893,"children":894},{},[895],{"type":17,"tag":532,"props":896,"children":897},{},[898,902,907],{"type":17,"tag":536,"props":899,"children":900},{"align":10},[901],{"type":22,"value":540},{"type":17,"tag":536,"props":903,"children":904},{"align":10},[905],{"type":22,"value":906},"Colour ‘Dark’",{"type":17,"tag":536,"props":908,"children":909},{"align":10},[910],{"type":22,"value":911},"Colour 'Light",{"type":17,"tag":547,"props":913,"children":914},{},[915,931,948,964,979],{"type":17,"tag":532,"props":916,"children":917},{},[918,922,927],{"type":17,"tag":554,"props":919,"children":920},{"align":10},[921],{"type":22,"value":582},{"type":17,"tag":554,"props":923,"children":924},{"align":10},[925],{"type":22,"value":926},"rpl-clr-primary at 50% opacity",{"type":17,"tag":554,"props":928,"children":929},{"align":10},[930],{"type":22,"value":926},{"type":17,"tag":532,"props":932,"children":933},{},[934,938,943],{"type":17,"tag":554,"props":935,"children":936},{"align":10},[937],{"type":22,"value":693},{"type":17,"tag":554,"props":939,"children":940},{"align":10},[941],{"type":22,"value":942},"rpl-clr-light",{"type":17,"tag":554,"props":944,"children":945},{"align":10},[946],{"type":22,"value":947},"rpl-clr-dark",{"type":17,"tag":532,"props":949,"children":950},{},[951,955,960],{"type":17,"tag":554,"props":952,"children":953},{"align":10},[954],{"type":22,"value":706},{"type":17,"tag":554,"props":956,"children":957},{"align":10},[958],{"type":22,"value":959},"rpl-clr-type-primary-contrast at 75% opacity",{"type":17,"tag":554,"props":961,"children":962},{"align":10},[963],{"type":22,"value":959},{"type":17,"tag":532,"props":965,"children":966},{},[967,971,975],{"type":17,"tag":554,"props":968,"children":969},{"align":10},[970],{"type":22,"value":732},{"type":17,"tag":554,"props":972,"children":973},{"align":10},[974],{"type":22,"value":558},{"type":17,"tag":554,"props":976,"children":977},{"align":10},[978],{"type":22,"value":947},{"type":17,"tag":532,"props":980,"children":981},{},[982,986,991],{"type":17,"tag":554,"props":983,"children":984},{"align":10},[985],{"type":22,"value":744},{"type":17,"tag":554,"props":987,"children":988},{"align":10},[989],{"type":22,"value":990},"rlpl-clr-primary-alt",{"type":17,"tag":554,"props":992,"children":993},{"align":10},[994],{"type":22,"value":947},{"type":17,"tag":883,"props":996,"children":998},{"id":997},"accent",[999],{"type":22,"value":1000},"Accent",{"type":17,"tag":524,"props":1002,"children":1003},{},[1004,1022],{"type":17,"tag":528,"props":1005,"children":1006},{},[1007],{"type":17,"tag":532,"props":1008,"children":1009},{},[1010,1014,1018],{"type":17,"tag":536,"props":1011,"children":1012},{"align":10},[1013],{"type":22,"value":540},{"type":17,"tag":536,"props":1015,"children":1016},{"align":10},[1017],{"type":22,"value":906},{"type":17,"tag":536,"props":1019,"children":1020},{"align":10},[1021],{"type":22,"value":911},{"type":17,"tag":547,"props":1023,"children":1024},{},[1025],{"type":17,"tag":532,"props":1026,"children":1027},{},[1028,1032,1036],{"type":17,"tag":554,"props":1029,"children":1030},{"align":10},[1031],{"type":22,"value":719},{"type":17,"tag":554,"props":1033,"children":1034},{"align":10},[1035],{"type":22,"value":942},{"type":17,"tag":554,"props":1037,"children":1038},{"align":10},[1039],{"type":22,"value":947},{"type":17,"tag":883,"props":1041,"children":1043},{"id":1042},"focus",[1044],{"type":22,"value":1045},"Focus",{"type":17,"tag":524,"props":1047,"children":1048},{},[1049,1067],{"type":17,"tag":528,"props":1050,"children":1051},{},[1052],{"type":17,"tag":532,"props":1053,"children":1054},{},[1055,1059,1063],{"type":17,"tag":536,"props":1056,"children":1057},{"align":10},[1058],{"type":22,"value":540},{"type":17,"tag":536,"props":1060,"children":1061},{"align":10},[1062],{"type":22,"value":906},{"type":17,"tag":536,"props":1064,"children":1065},{"align":10},[1066],{"type":22,"value":911},{"type":17,"tag":547,"props":1068,"children":1069},{},[1070],{"type":17,"tag":532,"props":1071,"children":1072},{},[1073,1077,1081],{"type":17,"tag":554,"props":1074,"children":1075},{"align":10},[1076],{"type":22,"value":756},{"type":17,"tag":554,"props":1078,"children":1079},{"align":10},[1080],{"type":22,"value":942},{"type":17,"tag":554,"props":1082,"children":1083},{"align":10},[1084],{"type":22,"value":947},{"type":17,"tag":883,"props":1086,"children":1088},{"id":1087},"link",[1089],{"type":22,"value":1090},"Link",{"type":17,"tag":524,"props":1092,"children":1093},{},[1094,1112],{"type":17,"tag":528,"props":1095,"children":1096},{},[1097],{"type":17,"tag":532,"props":1098,"children":1099},{},[1100,1104,1108],{"type":17,"tag":536,"props":1101,"children":1102},{"align":10},[1103],{"type":22,"value":540},{"type":17,"tag":536,"props":1105,"children":1106},{"align":10},[1107],{"type":22,"value":906},{"type":17,"tag":536,"props":1109,"children":1110},{"align":10},[1111],{"type":22,"value":911},{"type":17,"tag":547,"props":1113,"children":1114},{},[1115,1138],{"type":17,"tag":532,"props":1116,"children":1117},{},[1118,1121,1130],{"type":17,"tag":554,"props":1119,"children":1120},{"align":10},[],{"type":17,"tag":554,"props":1122,"children":1123},{"align":10},[1124],{"type":17,"tag":1125,"props":1126,"children":1127},"em",{},[1128],{"type":22,"value":1129},"If Primary ‘Dark’",{"type":17,"tag":554,"props":1131,"children":1132},{"align":10},[1133],{"type":17,"tag":1125,"props":1134,"children":1135},{},[1136],{"type":22,"value":1137},"If Primary ‘Light’",{"type":17,"tag":532,"props":1139,"children":1140},{},[1141,1145,1149],{"type":17,"tag":554,"props":1142,"children":1143},{"align":10},[1144],{"type":22,"value":631},{"type":17,"tag":554,"props":1146,"children":1147},{"align":10},[1148],{"type":22,"value":558},{"type":17,"tag":554,"props":1150,"children":1151},{"align":10},[1152],{"type":22,"value":272},{"type":17,"tag":234,"props":1154,"children":1156},{"id":1155},"gradient",[1157],{"type":22,"value":1158},"Gradient",{"type":17,"tag":18,"props":1160,"children":1161},{},[1162],{"type":22,"value":1163},"Including a gradient is optional for theming.",{"type":17,"tag":18,"props":1165,"children":1166},{},[1167],{"type":22,"value":1168},"If a gradient is not used, 'rpl-clr-accent' will be used in its place.",{"type":17,"tag":883,"props":1170,"children":1172},{"id":1171},"gradient-1",[1173],{"type":22,"value":1158},{"type":17,"tag":524,"props":1175,"children":1176},{},[1177,1195],{"type":17,"tag":528,"props":1178,"children":1179},{},[1180],{"type":17,"tag":532,"props":1181,"children":1182},{},[1183,1187,1191],{"type":17,"tag":536,"props":1184,"children":1185},{"align":10},[1186],{"type":22,"value":540},{"type":17,"tag":536,"props":1188,"children":1189},{"align":10},[1190],{"type":22,"value":1158},{"type":17,"tag":536,"props":1192,"children":1193},{"align":10},[1194],{"type":22,"value":1000},{"type":17,"tag":547,"props":1196,"children":1197},{},[1198,1214],{"type":17,"tag":532,"props":1199,"children":1200},{},[1201,1205,1210],{"type":17,"tag":554,"props":1202,"children":1203},{"align":10},[1204],{"type":22,"value":643},{"type":17,"tag":554,"props":1206,"children":1207},{"align":10},[1208],{"type":22,"value":1209},"rpl-clr-gradient (90 degrees)",{"type":17,"tag":554,"props":1211,"children":1212},{"align":10},[1213],{"type":22,"value":595},{"type":17,"tag":532,"props":1215,"children":1216},{},[1217,1221,1226],{"type":17,"tag":554,"props":1218,"children":1219},{"align":10},[1220],{"type":22,"value":655},{"type":17,"tag":554,"props":1222,"children":1223},{"align":10},[1224],{"type":22,"value":1225},"rpl-clr-gradient (180 degrees)",{"type":17,"tag":554,"props":1227,"children":1228},{"align":10},[1229],{"type":22,"value":595},{"title":8,"searchDepth":1231,"depth":1231,"links":1232},2,[1233,1234,1239,1242,1247],{"id":111,"depth":1231,"text":38},{"id":207,"depth":1231,"text":49,"children":1235},[1236,1238],{"id":227,"depth":1237,"text":238},3,{"id":269,"depth":1237,"text":272},{"id":299,"depth":1231,"text":59,"children":1240},[1241],{"id":410,"depth":1237,"text":413},{"id":491,"depth":1231,"text":494,"children":1243},[1244,1245,1246],{"id":520,"depth":1237,"text":12},{"id":662,"depth":1237,"text":665},{"id":764,"depth":1237,"text":767},{"id":854,"depth":1231,"text":857,"children":1248},[1249,1250],{"id":878,"depth":1237,"text":881},{"id":1155,"depth":1237,"text":1158},"markdown","content:design-system:2.design:4.theming-guidance-for-designers.md","content","design-system/2.design/4.theming-guidance-for-designers.md","md",{"/design-system/design/theming-guidance-for-designers":1257},[1258,1264],{"_path":1259,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":1260,"description":1261,"layout":11,"label":12,"_type":1251,"_id":1262,"_source":1253,"_file":1263,"_extension":1255},"/design-system/design/design-tokens","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","content:design-system:2.design:3.design-tokens.md","design-system/2.design/3.design-tokens.md",{"_path":1265,"_dir":1266,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":1267,"description":1268,"layout":11,"links":1269,"_type":1251,"_id":1276,"_source":1253,"_file":1277,"_extension":1255},"/design-system/develop/getting-started","develop","Getting started","Information for developers using the Ripple 2 UI libraries",[1270,1273],{"text":1271,"url":1272},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":1274,"url":1275},"Storybook","/storybook","content:design-system:3.develop:1.getting-started.md","design-system/3.develop/1.getting-started.md",{},[1280,1285,1527],{"title":1281,"_path":1282,"icon":1283,"layout":1284},"Ripple Design System","/","carbon:home","home",{"title":1286,"_path":1287,"children":1288},"Design System","/design-system",[1289,1305,1316,1345,1379],{"title":1290,"_path":1291,"children":1292},"About","/design-system/about",[1293,1296,1299,1302],{"title":1294,"_path":1295,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":1297,"_path":1298,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":1300,"_path":1301,"layout":11},"Support","/design-system/about/getting-support",{"title":1303,"_path":1304,"layout":11},"Contributing","/design-system/about/contributing",{"title":1306,"_path":1307,"children":1308},"Design","/design-system/design",[1309,1311,1314,1315],{"title":1267,"_path":1310,"layout":11},"/design-system/design/getting-started",{"title":1312,"_path":1313,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":1260,"_path":1259,"layout":11},{"title":9,"_path":5,"layout":11},{"title":1317,"_path":1318,"children":1319},"Develop","/design-system/develop",[1320,1321,1323,1326],{"title":1267,"_path":1265,"layout":11},{"title":1303,"_path":1322,"layout":11},"/design-system/develop/contributing",{"title":1324,"_path":1325,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":1327,"_path":1328,"children":1329,"layout":11},"Usage","/design-system/develop/usage",[1330,1333,1336,1339,1342],{"title":1331,"_path":1332,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":1334,"_path":1335,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":1337,"_path":1338,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":1340,"_path":1341,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":1343,"_path":1344,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":1346,"_path":1347,"children":1348},"Styles","/design-system/styles",[1349,1352,1355,1358,1361,1364,1367,1370,1373,1376],{"title":1350,"_path":1351,"layout":11},"Colour","/design-system/styles/colour",{"title":1353,"_path":1354,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":1356,"_path":1357,"layout":11},"Grid","/design-system/styles/grid",{"title":1359,"_path":1360,"layout":11},"Icons","/design-system/styles/icons",{"title":1362,"_path":1363,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":1365,"_path":1366,"layout":11},"Layout","/design-system/styles/layout",{"title":1368,"_path":1369,"layout":11},"Logo","/design-system/styles/logo",{"title":1371,"_path":1372,"layout":11},"Motion","/design-system/styles/motion",{"title":1374,"_path":1375,"layout":11},"Spacing","/design-system/styles/spacing",{"title":1377,"_path":1378,"layout":11},"Typography","/design-system/styles/typography",{"title":1380,"_path":1381,"children":1382},"Components","/design-system/components",[1383,1386,1389,1392,1395,1398,1401,1404,1407,1410,1413,1416,1419,1422,1425,1428,1431,1434,1437,1440,1443,1446,1449,1452,1455,1458,1461,1464,1467,1470,1473,1476,1479,1482,1485,1488,1491,1494,1497,1500,1503,1506,1509,1512,1515,1518,1521,1524],{"title":1384,"_path":1385,"layout":11},"Accordion","/design-system/components/accordion",{"title":1387,"_path":1388,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":1390,"_path":1391,"layout":11},"Alert","/design-system/components/alert",{"title":1393,"_path":1394,"layout":11},"Block quote","/design-system/components/block-quote",{"title":1396,"_path":1397,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":1399,"_path":1400,"layout":11},"Button","/design-system/components/button",{"title":1402,"_path":1403,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":1405,"_path":1406,"layout":11},"Callout","/design-system/components/callout",{"title":1408,"_path":1409,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":1411,"_path":1412,"layout":11},"Card","/design-system/components/card",{"title":1414,"_path":1415,"layout":11},"Carousel","/design-system/components/carousel",{"title":1417,"_path":1418,"layout":11},"Category grid","/design-system/components/category-grid",{"title":1420,"_path":1421,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":1423,"_path":1424,"layout":11},"Chip","/design-system/components/chip",{"title":1426,"_path":1427,"layout":11},"Contact us","/design-system/components/contact-us",{"title":1429,"_path":1430,"layout":11},"Date input","/design-system/components/date-input",{"title":1432,"_path":1433,"layout":11},"Detail list","/design-system/components/detail-list",{"title":1435,"_path":1436,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":1438,"_path":1439,"layout":11},"File","/design-system/components/file",{"title":1441,"_path":1442,"layout":11},"Footer","/design-system/components/footer",{"title":1444,"_path":1445,"layout":11},"Form alert","/design-system/components/form-alert",{"title":1447,"_path":1448,"layout":11},"Form","/design-system/components/form",{"title":1450,"_path":1451,"layout":11},"Header","/design-system/components/header",{"title":1453,"_path":1454,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":1456,"_path":1457,"layout":11},"Input field","/design-system/components/input-field",{"title":1459,"_path":1460,"layout":11},"Key dates","/design-system/components/key-dates",{"title":1462,"_path":1463,"layout":11},"Media embed","/design-system/components/media-embed",{"title":1465,"_path":1466,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":1468,"_path":1469,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":1471,"_path":1472,"layout":11},"Media","/design-system/components/media",{"title":1474,"_path":1475,"layout":11},"Option button","/design-system/components/option-button",{"title":1477,"_path":1478,"layout":11},"Page action","/design-system/components/page-action",{"title":1480,"_path":1481,"layout":11},"Pagination","/design-system/components/pagination",{"title":1483,"_path":1484,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":1486,"_path":1487,"layout":11},"Profile","/design-system/components/profile",{"title":1489,"_path":1490,"layout":11},"Radio button","/design-system/components/radio-button",{"title":1492,"_path":1493,"layout":11},"Related links","/design-system/components/related-links",{"title":1495,"_path":1496,"layout":11},"Results listing","/design-system/components/results-listing",{"title":1498,"_path":1499,"layout":11},"Search bar","/design-system/components/search-bar",{"title":1501,"_path":1502,"layout":11},"Skip link","/design-system/components/skip-link",{"title":1504,"_path":1505,"layout":11},"Social share","/design-system/components/social-share",{"title":1507,"_path":1508,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":1510,"_path":1511,"layout":11},"Table","/design-system/components/table",{"title":1513,"_path":1514,"layout":11},"Tabs","/design-system/components/tabs",{"title":1516,"_path":1517,"layout":11},"Tag","/design-system/components/tag",{"title":1519,"_path":1520,"layout":11},"Text area","/design-system/components/text-area",{"title":1522,"_path":1523,"layout":11},"Timeline","/design-system/components/timeline",{"title":1525,"_path":1526,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":1528,"_path":1529,"children":1530,"layout":11},"Ripple Framework","/framework",[1531,1532,1550,1572],{"title":1528,"_path":1529,"layout":11},{"title":1533,"_path":1534,"children":1535},"Key Concepts","/framework/key-concepts",[1536,1538,1541,1544,1547],{"title":1337,"_path":1537,"layout":11},"/framework/key-concepts/nuxt",{"title":1539,"_path":1540,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":1542,"_path":1543,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":1545,"_path":1546,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":1548,"_path":1549,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":1551,"_path":1552,"children":1553},"Guides","/framework/guides",[1554,1557,1560,1563,1566,1569],{"title":1555,"_path":1556,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":1558,"_path":1559,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":1561,"_path":1562,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":1564,"_path":1565,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":1567,"_path":1568,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":1570,"_path":1571,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":1573,"_path":1574,"layout":11},"Core modules","/framework/core-modules",["Reactive",1576],{"module-navigation":10},true,"/design-system/design/theming-guidance-for-designers/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> +For example, if the primary colour is classified as dark:<!--]--></p><ul><!--[--><li><!--[-->rpl-clr-type-primary-contrast will automatically be rpl-clr-light<!--]--></li><li><!--[-->rpl-clr-type-primary-accessible will automatically be rpl-clr-primary.<!--]--></li><!--]--></ul><h3 id="core"><a href="#core"><!--[-->Core<!--]--></a></h3><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Custom / Automatic<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-primary<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-primary-alt<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-primary-alpha<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-primary')<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-accent<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-accent-alt<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-focus<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-link<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-gradient-horizontal<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-gradient-vertical<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h3 id="typography-colour-tokens"><a href="#typography-colour-tokens"><!--[-->Typography colour tokens<!--]--></a></h3><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Custom / Automatic<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-type-primary-contrast<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-primary’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-contrast-alpha<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-type-primary-contrast')<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-accent-contrast<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-accent’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-accessible<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-primary’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-alt-accessible<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-primary’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-focus-contrast<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-focus’ contrast requirements)<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h3 id="footer-specific-optional"><a href="#footer-specific-optional"><!--[-->Footer-specific (optional)<!--]--></a></h3><p><!--[-->See: <a href="/design-system/design/theming-guidance-for-designers/#component-specific-theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->component-specific theming<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Custom / Automatic<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-footer<!--]--></td><td><!--[-->Custom or automatic<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-footer-alt<!--]--></td><td><!--[-->Custom or automatic<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-footer-contrast<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-footer’ contrast requirements)<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-footer-accessible<!--]--></td><td><!--[-->Automatic (based on ‘rlp-clr-footer’ contrast requirements)<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><hr class="docs-hr" data-v-341b6a73><h2 id="automatic-colour-token-logic"><a href="#automatic-colour-token-logic"><!--[-->Automatic Colour Token Logic<!--]--></a></h2><p><!--[-->Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility.<!--]--></p><ul><!--[--><li><!--[-->‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A).<!--]--></li><li><!--[-->‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF).<!--]--></li><!--]--></ul><h3 id="primary-access-focus-and-link"><a href="#primary-access-focus-and-link"><!--[-->Primary, Access, Focus and Link<!--]--></a></h3><h4 id="primary"><a href="#primary"><!--[-->Primary<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Colour ‘Dark’<!--]--></th><th><!--[-->Colour 'Light<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-primary-alpha<!--]--></td><td><!--[-->rpl-clr-primary at 50% opacity<!--]--></td><td><!--[-->rpl-clr-primary at 50% opacity<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-contrast<!--]--></td><td><!--[-->rpl-clr-light<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-contrast-alpha<!--]--></td><td><!--[-->rpl-clr-type-primary-contrast at 75% opacity<!--]--></td><td><!--[-->rpl-clr-type-primary-contrast at 75% opacity<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-accessible<!--]--></td><td><!--[-->rpl-clr-primary<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-type-primary-alt-accessible<!--]--></td><td><!--[-->rlpl-clr-primary-alt<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h4 id="accent"><a href="#accent"><!--[-->Accent<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Colour ‘Dark’<!--]--></th><th><!--[-->Colour 'Light<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-type-accent-contrast<!--]--></td><td><!--[-->rpl-clr-light<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h4 id="focus"><a href="#focus"><!--[-->Focus<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Colour ‘Dark’<!--]--></th><th><!--[-->Colour 'Light<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-type-focus-contrast<!--]--></td><td><!--[-->rpl-clr-light<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h4 id="link"><a href="#link"><!--[-->Link<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Colour ‘Dark’<!--]--></th><th><!--[-->Colour 'Light<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[--><!--]--></td><td><!--[--><em><!--[-->If Primary ‘Dark’<!--]--></em><!--]--></td><td><!--[--><em><!--[-->If Primary ‘Light’<!--]--></em><!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-link<!--]--></td><td><!--[-->rpl-clr-primary<!--]--></td><td><!--[-->Custom<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h3 id="gradient"><a href="#gradient"><!--[-->Gradient<!--]--></a></h3><p><!--[-->Including a gradient is optional for theming.<!--]--></p><p><!--[-->If a gradient is not used, 'rpl-clr-accent' will be used in its place.<!--]--></p><h4 id="gradient-1"><a href="#gradient-1"><!--[-->Gradient<!--]--></a></h4><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Gradient<!--]--></th><th><!--[-->Accent<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-gradient-horizontal<!--]--></td><td><!--[-->rpl-clr-gradient (90 degrees)<!--]--></td><td><!--[-->rpl-clr-accent<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-gradient-vertical<!--]--></td><td><!--[-->rpl-clr-gradient (180 degrees)<!--]--></td><td><!--[-->rpl-clr-accent<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/4.theming-guidance-for-designers.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/theming-guidance-for-designers/_payload.json">[{"state":1,"_errors":1575,"serverRendered":1577,"path":1578,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":1256,"$sdd-globals":1278,"$sdd-navigation":1279},{"/design-system/design/theming-guidance-for-designers":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"label":12,"body":13,"_type":1251,"_id":1252,"_source":1253,"_file":1254,"_extension":1255},"/design-system/design/theming-guidance-for-designers","design",false,"","Theming guidance for designers",null,"page","Core",{"type":14,"children":15,"toc":1230},"root",[16,24,71,75,80,85,90,95,100,105,108,114,119,124,129,142,166,171,176,189,202,205,210,215,220,233,239,244,262,267,273,278,283,294,297,302,316,321,326,408,414,427,432,437,450,455,473,486,489,495,500,505,518,523,660,666,762,768,779,849,852,858,863,876,882,889,995,1001,1040,1046,1085,1091,1153,1159,1164,1169,1174],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21],{"type":22,"value":23},"text","Jump to:",{"type":17,"tag":25,"props":26,"children":27},"ul",{},[28,41,51,61],{"type":17,"tag":29,"props":30,"children":31},"li",{},[32,39],{"type":17,"tag":33,"props":34,"children":36},"a",{"href":35},"/design-system/design/theming-guidance-for-designers/#create-a-custom-theme",[37],{"type":22,"value":38},"Create a custom theme",{"type":22,"value":40},".",{"type":17,"tag":29,"props":42,"children":43},{},[44,50],{"type":17,"tag":33,"props":45,"children":47},{"href":46},"/design-system/design/theming-guidance-for-designers/#component-specific-theming",[48],{"type":22,"value":49},"Component-specific theming",{"type":22,"value":40},{"type":17,"tag":29,"props":52,"children":53},{},[54,60],{"type":17,"tag":33,"props":55,"children":57},{"href":56},"/design-system/design/theming-guidance-for-designers/#theme-accessibility",[58],{"type":22,"value":59},"Theme accessibility",{"type":22,"value":40},{"type":17,"tag":29,"props":62,"children":63},{},[64,70],{"type":17,"tag":33,"props":65,"children":67},{"href":66},"/design-system/design/theming-guidance-for-designers/#automatic-colour-token-logic",[68],{"type":22,"value":69},"Automatic colour token logic",{"type":22,"value":40},{"type":17,"tag":72,"props":73,"children":74},"hr",{},[],{"type":17,"tag":18,"props":76,"children":77},{},[78],{"type":22,"value":79},"Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming.",{"type":17,"tag":18,"props":81,"children":82},{},[83],{"type":22,"value":84},"Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation.",{"type":17,"tag":18,"props":86,"children":87},{},[88],{"type":22,"value":89},"When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience.",{"type":17,"tag":18,"props":91,"children":92},{},[93],{"type":22,"value":94},"We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast.",{"type":17,"tag":18,"props":96,"children":97},{},[98],{"type":22,"value":99},"We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met.",{"type":17,"tag":18,"props":101,"children":102},{},[103],{"type":22,"value":104},"To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team.",{"type":17,"tag":72,"props":106,"children":107},{},[],{"type":17,"tag":109,"props":110,"children":112},"h2",{"id":111},"create-a-custom-theme",[113],{"type":22,"value":38},{"type":17,"tag":18,"props":115,"children":116},{},[117],{"type":22,"value":118},"Ripple has been designed with a primary and accent colour. These inform the colour framework.",{"type":17,"tag":18,"props":120,"children":121},{},[122],{"type":22,"value":123},"A link colour, focus colour and optional gradient are also required when theming.",{"type":17,"tag":18,"props":125,"children":126},{},[127],{"type":22,"value":128},"The primary, accent and focus colours can be either light or dark:",{"type":17,"tag":25,"props":130,"children":131},{},[132,137],{"type":17,"tag":29,"props":133,"children":134},{},[135],{"type":22,"value":136},"'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A).",{"type":17,"tag":29,"props":138,"children":139},{},[140],{"type":22,"value":141},"‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF).",{"type":17,"tag":18,"props":143,"children":144},{},[145,147,155,157,164],{"type":22,"value":146},"To classify your colour as light or dark, we recommend the use ",{"type":17,"tag":33,"props":148,"children":152},{"href":149,"rel":150},"https://webaim.org/resources/contrastchecker/",[151],"nofollow",[153],{"type":22,"value":154},"WebAim Colour Contrast Checker",{"type":22,"value":156}," or the ",{"type":17,"tag":33,"props":158,"children":161},{"href":159,"rel":160},"https://www.figma.com/community/plugin/733159460536249875",[151],[162],{"type":22,"value":163},"Figma plugin, A11y - Colour Contrast Checker",{"type":22,"value":165}," to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above.",{"type":17,"tag":18,"props":167,"children":168},{},[169],{"type":22,"value":170},"Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements.",{"type":17,"tag":18,"props":172,"children":173},{},[174],{"type":22,"value":175},"It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page.",{"type":17,"tag":18,"props":177,"children":178},{},[179,181,188],{"type":22,"value":180},"Guidance for creating your own theme can be found on the Theming page of the ",{"type":17,"tag":33,"props":182,"children":185},{"href":183,"rel":184},"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1",[151],[186],{"type":22,"value":187},"Ripple 2.0 Design System Figma file",{"type":22,"value":40},{"type":17,"tag":18,"props":190,"children":191},{},[192,194,201],{"type":22,"value":193},"If you don’t have access, you can ",{"type":17,"tag":33,"props":195,"children":198},{"href":196,"rel":197},"https://www.vic.gov.au/ripple-design-system",[151],[199],{"type":22,"value":200},"request access to view the Ripple 2.0 Design System",{"type":22,"value":40},{"type":17,"tag":72,"props":203,"children":204},{},[],{"type":17,"tag":109,"props":206,"children":208},{"id":207},"component-specific-theming",[209],{"type":22,"value":49},{"type":17,"tag":18,"props":211,"children":212},{},[213],{"type":22,"value":214},"The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component.",{"type":17,"tag":18,"props":216,"children":217},{},[218],{"type":22,"value":219},"There are 2 options for component-specific styling:",{"type":17,"tag":25,"props":221,"children":222},{},[223,228],{"type":17,"tag":29,"props":224,"children":225},{},[226],{"type":22,"value":227},"neutral",{"type":17,"tag":29,"props":229,"children":230},{},[231],{"type":22,"value":232},"custom.",{"type":17,"tag":234,"props":235,"children":236},"h3",{"id":227},[237],{"type":22,"value":238},"Neutral",{"type":17,"tag":18,"props":240,"children":241},{},[242],{"type":22,"value":243},"Neutral can be applied to the following components:",{"type":17,"tag":25,"props":245,"children":246},{},[247,252,257],{"type":17,"tag":29,"props":248,"children":249},{},[250],{"type":22,"value":251},"buttons",{"type":17,"tag":29,"props":253,"children":254},{},[255],{"type":22,"value":256},"header (only reverse and image variants)",{"type":17,"tag":29,"props":258,"children":259},{},[260],{"type":22,"value":261},"footer.",{"type":17,"tag":18,"props":263,"children":264},{},[265],{"type":22,"value":266},"The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised.",{"type":17,"tag":234,"props":268,"children":270},{"id":269},"custom",[271],{"type":22,"value":272},"Custom",{"type":17,"tag":18,"props":274,"children":275},{},[276],{"type":22,"value":277},"Custom component theming can only be applied to the footer.",{"type":17,"tag":18,"props":279,"children":280},{},[281],{"type":22,"value":282},"The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required.",{"type":17,"tag":18,"props":284,"children":285},{},[286,288,293],{"type":22,"value":287},"To learn more about custom styling please see the Theming page of the ",{"type":17,"tag":33,"props":289,"children":291},{"href":183,"rel":290},[151],[292],{"type":22,"value":187},{"type":22,"value":40},{"type":17,"tag":72,"props":295,"children":296},{},[],{"type":17,"tag":109,"props":298,"children":300},{"id":299},"theme-accessibility",[301],{"type":22,"value":59},{"type":17,"tag":18,"props":303,"children":304},{},[305,307,314],{"type":22,"value":306},"Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: ",{"type":17,"tag":33,"props":308,"children":311},{"href":309,"rel":310},"https://www.vic.gov.au/brand-victoria-guidelines-logos",[151],[312],{"type":22,"value":313},"Brand Victoria guidelines",{"type":22,"value":315}," for more information).",{"type":17,"tag":18,"props":317,"children":318},{},[319],{"type":22,"value":320},"Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast.",{"type":17,"tag":18,"props":322,"children":323},{},[324],{"type":22,"value":325},"Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency.",{"type":17,"tag":327,"props":328,"children":329},"blockquote",{},[330,368,380,403],{"type":17,"tag":18,"props":331,"children":332},{},[333,340,342,348,350,357,359,366],{"type":17,"tag":33,"props":334,"children":337},{"href":335,"rel":336},"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",[151],[338],{"type":22,"value":339},"1.4.3 Contrast Minimum (Level AA)",{"type":22,"value":341},"\nThe visual presentation of ",{"type":17,"tag":33,"props":343,"children":346},{"href":344,"rel":345},"https://www.w3.org/TR/WCAG21/#dfn-text",[151],[347],{"type":22,"value":22},{"type":22,"value":349}," and ",{"type":17,"tag":33,"props":351,"children":354},{"href":352,"rel":353},"https://www.w3.org/TR/WCAG21/#dfn-images-of-text",[151],[355],{"type":22,"value":356},"images of text",{"type":22,"value":358}," has a ",{"type":17,"tag":33,"props":360,"children":363},{"href":361,"rel":362},"https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio",[151],[364],{"type":22,"value":365},"contrast ratio",{"type":22,"value":367}," of at least 4.5:1, except for the following:",{"type":17,"tag":18,"props":369,"children":370},{},[371,378],{"type":17,"tag":33,"props":372,"children":375},{"href":373,"rel":374},"https://www.w3.org/TR/WCAG21/#dfn-large-scale",[151],[376],{"type":22,"value":377},"Large-scale",{"type":22,"value":379}," text and images of large-scale text have a contrast ratio of at least 3:1;",{"type":17,"tag":18,"props":381,"children":382},{},[383,385,392,394,401],{"type":22,"value":384},"Text or images of text that are part of an inactive ",{"type":17,"tag":33,"props":386,"children":389},{"href":387,"rel":388},"https://www.w3.org/TR/WCAG21/#dfn-user-interface-components",[151],[390],{"type":22,"value":391},"user interface component",{"type":22,"value":393},", that are ",{"type":17,"tag":33,"props":395,"children":398},{"href":396,"rel":397},"https://www.w3.org/TR/WCAG21/#dfn-pure-decoration",[151],[399],{"type":22,"value":400},"pure decoration",{"type":22,"value":402},", that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.",{"type":17,"tag":18,"props":404,"children":405},{},[406],{"type":22,"value":407},"Text that is part of a logo or brand name has no contrast requirement.",{"type":17,"tag":234,"props":409,"children":411},{"id":410},"accessibility-testing-requirements",[412],{"type":22,"value":413},"Accessibility testing requirements",{"type":17,"tag":18,"props":415,"children":416},{},[417,419,425],{"type":22,"value":418},"When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a ",{"type":17,"tag":33,"props":420,"children":422},{"href":335,"rel":421},[151],[423],{"type":22,"value":424},"minimum contrast ratio of 4:5:1",{"type":22,"value":426}," for normal text contrast, 3:1 for large text and non-text elements must be met.",{"type":17,"tag":18,"props":428,"children":429},{},[430],{"type":22,"value":431},"Links are required to meet a ratio of 4.5:1 colour contrast.",{"type":17,"tag":18,"props":433,"children":434},{},[435],{"type":22,"value":436},"In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:",{"type":17,"tag":25,"props":438,"children":439},{},[440,445],{"type":17,"tag":29,"props":441,"children":442},{},[443],{"type":22,"value":444},"dark type / rpl-clr-dark / #1A1A1A",{"type":17,"tag":29,"props":446,"children":447},{},[448],{"type":22,"value":449},"light type / rpl-clr-light / #FFFFFF.",{"type":17,"tag":18,"props":451,"children":452},{},[453],{"type":22,"value":454},"The link colour is tested against 3 colours:",{"type":17,"tag":25,"props":456,"children":457},{},[458,463,468],{"type":17,"tag":29,"props":459,"children":460},{},[461],{"type":22,"value":462},"light type / rpl-clr-light / #FFFFFF",{"type":17,"tag":29,"props":464,"children":465},{},[466],{"type":22,"value":467},"rpl-clr-neutral-100 / #F5F5F5",{"type":17,"tag":29,"props":469,"children":470},{},[471],{"type":22,"value":472},"rpl-clr-accent-alt / #E6F5FD (example hex only).",{"type":17,"tag":18,"props":474,"children":475},{},[476,478,485],{"type":22,"value":477},"Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the ",{"type":17,"tag":33,"props":479,"children":482},{"href":480,"rel":481},"https://www.figma.com/community/plugin/733343906244951586",[151],[483],{"type":22,"value":484},"Figma plugin 'Color Blind'",{"type":22,"value":40},{"type":17,"tag":72,"props":487,"children":488},{},[],{"type":17,"tag":109,"props":490,"children":492},{"id":491},"colour-token-automatic-logic",[493],{"type":22,"value":494},"Colour token automatic logic",{"type":17,"tag":18,"props":496,"children":497},{},[498],{"type":22,"value":499},"Below is a full list of colour tokens required to theme the Ripple 2.0 Design System.",{"type":17,"tag":18,"props":501,"children":502},{},[503],{"type":22,"value":504},"Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements.\nFor example, if the primary colour is classified as dark:",{"type":17,"tag":25,"props":506,"children":507},{},[508,513],{"type":17,"tag":29,"props":509,"children":510},{},[511],{"type":22,"value":512},"rpl-clr-type-primary-contrast will automatically be rpl-clr-light",{"type":17,"tag":29,"props":514,"children":515},{},[516],{"type":22,"value":517},"rpl-clr-type-primary-accessible will automatically be rpl-clr-primary.",{"type":17,"tag":234,"props":519,"children":521},{"id":520},"core",[522],{"type":22,"value":12},{"type":17,"tag":524,"props":525,"children":526},"table",{},[527,546],{"type":17,"tag":528,"props":529,"children":530},"thead",{},[531],{"type":17,"tag":532,"props":533,"children":534},"tr",{},[535,541],{"type":17,"tag":536,"props":537,"children":538},"th",{"align":10},[539],{"type":22,"value":540},"Token",{"type":17,"tag":536,"props":542,"children":543},{"align":10},[544],{"type":22,"value":545},"Custom / Automatic",{"type":17,"tag":547,"props":548,"children":549},"tbody",{},[550,563,575,588,600,612,624,636,648],{"type":17,"tag":532,"props":551,"children":552},{},[553,559],{"type":17,"tag":554,"props":555,"children":556},"td",{"align":10},[557],{"type":22,"value":558},"rpl-clr-primary",{"type":17,"tag":554,"props":560,"children":561},{"align":10},[562],{"type":22,"value":272},{"type":17,"tag":532,"props":564,"children":565},{},[566,571],{"type":17,"tag":554,"props":567,"children":568},{"align":10},[569],{"type":22,"value":570},"rpl-clr-primary-alt",{"type":17,"tag":554,"props":572,"children":573},{"align":10},[574],{"type":22,"value":272},{"type":17,"tag":532,"props":576,"children":577},{},[578,583],{"type":17,"tag":554,"props":579,"children":580},{"align":10},[581],{"type":22,"value":582},"rpl-clr-primary-alpha",{"type":17,"tag":554,"props":584,"children":585},{"align":10},[586],{"type":22,"value":587},"Automatic (based on ‘rlp-clr-primary')",{"type":17,"tag":532,"props":589,"children":590},{},[591,596],{"type":17,"tag":554,"props":592,"children":593},{"align":10},[594],{"type":22,"value":595},"rpl-clr-accent",{"type":17,"tag":554,"props":597,"children":598},{"align":10},[599],{"type":22,"value":272},{"type":17,"tag":532,"props":601,"children":602},{},[603,608],{"type":17,"tag":554,"props":604,"children":605},{"align":10},[606],{"type":22,"value":607},"rpl-clr-accent-alt",{"type":17,"tag":554,"props":609,"children":610},{"align":10},[611],{"type":22,"value":272},{"type":17,"tag":532,"props":613,"children":614},{},[615,620],{"type":17,"tag":554,"props":616,"children":617},{"align":10},[618],{"type":22,"value":619},"rpl-clr-focus",{"type":17,"tag":554,"props":621,"children":622},{"align":10},[623],{"type":22,"value":272},{"type":17,"tag":532,"props":625,"children":626},{},[627,632],{"type":17,"tag":554,"props":628,"children":629},{"align":10},[630],{"type":22,"value":631},"rpl-clr-link",{"type":17,"tag":554,"props":633,"children":634},{"align":10},[635],{"type":22,"value":272},{"type":17,"tag":532,"props":637,"children":638},{},[639,644],{"type":17,"tag":554,"props":640,"children":641},{"align":10},[642],{"type":22,"value":643},"rpl-clr-gradient-horizontal",{"type":17,"tag":554,"props":645,"children":646},{"align":10},[647],{"type":22,"value":272},{"type":17,"tag":532,"props":649,"children":650},{},[651,656],{"type":17,"tag":554,"props":652,"children":653},{"align":10},[654],{"type":22,"value":655},"rpl-clr-gradient-vertical",{"type":17,"tag":554,"props":657,"children":658},{"align":10},[659],{"type":22,"value":272},{"type":17,"tag":234,"props":661,"children":663},{"id":662},"typography-colour-tokens",[664],{"type":22,"value":665},"Typography colour tokens",{"type":17,"tag":524,"props":667,"children":668},{},[669,683],{"type":17,"tag":528,"props":670,"children":671},{},[672],{"type":17,"tag":532,"props":673,"children":674},{},[675,679],{"type":17,"tag":536,"props":676,"children":677},{"align":10},[678],{"type":22,"value":540},{"type":17,"tag":536,"props":680,"children":681},{"align":10},[682],{"type":22,"value":545},{"type":17,"tag":547,"props":684,"children":685},{},[686,699,712,725,737,749],{"type":17,"tag":532,"props":687,"children":688},{},[689,694],{"type":17,"tag":554,"props":690,"children":691},{"align":10},[692],{"type":22,"value":693},"rpl-clr-type-primary-contrast",{"type":17,"tag":554,"props":695,"children":696},{"align":10},[697],{"type":22,"value":698},"Automatic (based on ‘rlp-clr-primary’ contrast requirements)",{"type":17,"tag":532,"props":700,"children":701},{},[702,707],{"type":17,"tag":554,"props":703,"children":704},{"align":10},[705],{"type":22,"value":706},"rpl-clr-type-primary-contrast-alpha",{"type":17,"tag":554,"props":708,"children":709},{"align":10},[710],{"type":22,"value":711},"Automatic (based on ‘rlp-clr-type-primary-contrast')",{"type":17,"tag":532,"props":713,"children":714},{},[715,720],{"type":17,"tag":554,"props":716,"children":717},{"align":10},[718],{"type":22,"value":719},"rpl-clr-type-accent-contrast",{"type":17,"tag":554,"props":721,"children":722},{"align":10},[723],{"type":22,"value":724},"Automatic (based on ‘rlp-clr-accent’ contrast requirements)",{"type":17,"tag":532,"props":726,"children":727},{},[728,733],{"type":17,"tag":554,"props":729,"children":730},{"align":10},[731],{"type":22,"value":732},"rpl-clr-type-primary-accessible",{"type":17,"tag":554,"props":734,"children":735},{"align":10},[736],{"type":22,"value":698},{"type":17,"tag":532,"props":738,"children":739},{},[740,745],{"type":17,"tag":554,"props":741,"children":742},{"align":10},[743],{"type":22,"value":744},"rpl-clr-type-primary-alt-accessible",{"type":17,"tag":554,"props":746,"children":747},{"align":10},[748],{"type":22,"value":698},{"type":17,"tag":532,"props":750,"children":751},{},[752,757],{"type":17,"tag":554,"props":753,"children":754},{"align":10},[755],{"type":22,"value":756},"rpl-clr-type-focus-contrast",{"type":17,"tag":554,"props":758,"children":759},{"align":10},[760],{"type":22,"value":761},"Automatic (based on ‘rlp-clr-focus’ contrast requirements)",{"type":17,"tag":234,"props":763,"children":765},{"id":764},"footer-specific-optional",[766],{"type":22,"value":767},"Footer-specific (optional)",{"type":17,"tag":18,"props":769,"children":770},{},[771,773,778],{"type":22,"value":772},"See: ",{"type":17,"tag":33,"props":774,"children":775},{"href":46},[776],{"type":22,"value":777},"component-specific theming",{"type":22,"value":40},{"type":17,"tag":524,"props":780,"children":781},{},[782,796],{"type":17,"tag":528,"props":783,"children":784},{},[785],{"type":17,"tag":532,"props":786,"children":787},{},[788,792],{"type":17,"tag":536,"props":789,"children":790},{"align":10},[791],{"type":22,"value":540},{"type":17,"tag":536,"props":793,"children":794},{"align":10},[795],{"type":22,"value":545},{"type":17,"tag":547,"props":797,"children":798},{},[799,812,824,837],{"type":17,"tag":532,"props":800,"children":801},{},[802,807],{"type":17,"tag":554,"props":803,"children":804},{"align":10},[805],{"type":22,"value":806},"rpl-clr-footer",{"type":17,"tag":554,"props":808,"children":809},{"align":10},[810],{"type":22,"value":811},"Custom or automatic",{"type":17,"tag":532,"props":813,"children":814},{},[815,820],{"type":17,"tag":554,"props":816,"children":817},{"align":10},[818],{"type":22,"value":819},"rpl-clr-footer-alt",{"type":17,"tag":554,"props":821,"children":822},{"align":10},[823],{"type":22,"value":811},{"type":17,"tag":532,"props":825,"children":826},{},[827,832],{"type":17,"tag":554,"props":828,"children":829},{"align":10},[830],{"type":22,"value":831},"rpl-clr-footer-contrast",{"type":17,"tag":554,"props":833,"children":834},{"align":10},[835],{"type":22,"value":836},"Automatic (based on ‘rlp-clr-footer’ contrast requirements)",{"type":17,"tag":532,"props":838,"children":839},{},[840,845],{"type":17,"tag":554,"props":841,"children":842},{"align":10},[843],{"type":22,"value":844},"rpl-clr-type-footer-accessible",{"type":17,"tag":554,"props":846,"children":847},{"align":10},[848],{"type":22,"value":836},{"type":17,"tag":72,"props":850,"children":851},{},[],{"type":17,"tag":109,"props":853,"children":855},{"id":854},"automatic-colour-token-logic",[856],{"type":22,"value":857},"Automatic Colour Token Logic",{"type":17,"tag":18,"props":859,"children":860},{},[861],{"type":22,"value":862},"Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility.",{"type":17,"tag":25,"props":864,"children":865},{},[866,871],{"type":17,"tag":29,"props":867,"children":868},{},[869],{"type":22,"value":870},"‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A).",{"type":17,"tag":29,"props":872,"children":873},{},[874],{"type":22,"value":875},"‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF).",{"type":17,"tag":234,"props":877,"children":879},{"id":878},"primary-access-focus-and-link",[880],{"type":22,"value":881},"Primary, Access, Focus and Link",{"type":17,"tag":883,"props":884,"children":886},"h4",{"id":885},"primary",[887],{"type":22,"value":888},"Primary",{"type":17,"tag":524,"props":890,"children":891},{},[892,912],{"type":17,"tag":528,"props":893,"children":894},{},[895],{"type":17,"tag":532,"props":896,"children":897},{},[898,902,907],{"type":17,"tag":536,"props":899,"children":900},{"align":10},[901],{"type":22,"value":540},{"type":17,"tag":536,"props":903,"children":904},{"align":10},[905],{"type":22,"value":906},"Colour ‘Dark’",{"type":17,"tag":536,"props":908,"children":909},{"align":10},[910],{"type":22,"value":911},"Colour 'Light",{"type":17,"tag":547,"props":913,"children":914},{},[915,931,948,964,979],{"type":17,"tag":532,"props":916,"children":917},{},[918,922,927],{"type":17,"tag":554,"props":919,"children":920},{"align":10},[921],{"type":22,"value":582},{"type":17,"tag":554,"props":923,"children":924},{"align":10},[925],{"type":22,"value":926},"rpl-clr-primary at 50% opacity",{"type":17,"tag":554,"props":928,"children":929},{"align":10},[930],{"type":22,"value":926},{"type":17,"tag":532,"props":932,"children":933},{},[934,938,943],{"type":17,"tag":554,"props":935,"children":936},{"align":10},[937],{"type":22,"value":693},{"type":17,"tag":554,"props":939,"children":940},{"align":10},[941],{"type":22,"value":942},"rpl-clr-light",{"type":17,"tag":554,"props":944,"children":945},{"align":10},[946],{"type":22,"value":947},"rpl-clr-dark",{"type":17,"tag":532,"props":949,"children":950},{},[951,955,960],{"type":17,"tag":554,"props":952,"children":953},{"align":10},[954],{"type":22,"value":706},{"type":17,"tag":554,"props":956,"children":957},{"align":10},[958],{"type":22,"value":959},"rpl-clr-type-primary-contrast at 75% opacity",{"type":17,"tag":554,"props":961,"children":962},{"align":10},[963],{"type":22,"value":959},{"type":17,"tag":532,"props":965,"children":966},{},[967,971,975],{"type":17,"tag":554,"props":968,"children":969},{"align":10},[970],{"type":22,"value":732},{"type":17,"tag":554,"props":972,"children":973},{"align":10},[974],{"type":22,"value":558},{"type":17,"tag":554,"props":976,"children":977},{"align":10},[978],{"type":22,"value":947},{"type":17,"tag":532,"props":980,"children":981},{},[982,986,991],{"type":17,"tag":554,"props":983,"children":984},{"align":10},[985],{"type":22,"value":744},{"type":17,"tag":554,"props":987,"children":988},{"align":10},[989],{"type":22,"value":990},"rlpl-clr-primary-alt",{"type":17,"tag":554,"props":992,"children":993},{"align":10},[994],{"type":22,"value":947},{"type":17,"tag":883,"props":996,"children":998},{"id":997},"accent",[999],{"type":22,"value":1000},"Accent",{"type":17,"tag":524,"props":1002,"children":1003},{},[1004,1022],{"type":17,"tag":528,"props":1005,"children":1006},{},[1007],{"type":17,"tag":532,"props":1008,"children":1009},{},[1010,1014,1018],{"type":17,"tag":536,"props":1011,"children":1012},{"align":10},[1013],{"type":22,"value":540},{"type":17,"tag":536,"props":1015,"children":1016},{"align":10},[1017],{"type":22,"value":906},{"type":17,"tag":536,"props":1019,"children":1020},{"align":10},[1021],{"type":22,"value":911},{"type":17,"tag":547,"props":1023,"children":1024},{},[1025],{"type":17,"tag":532,"props":1026,"children":1027},{},[1028,1032,1036],{"type":17,"tag":554,"props":1029,"children":1030},{"align":10},[1031],{"type":22,"value":719},{"type":17,"tag":554,"props":1033,"children":1034},{"align":10},[1035],{"type":22,"value":942},{"type":17,"tag":554,"props":1037,"children":1038},{"align":10},[1039],{"type":22,"value":947},{"type":17,"tag":883,"props":1041,"children":1043},{"id":1042},"focus",[1044],{"type":22,"value":1045},"Focus",{"type":17,"tag":524,"props":1047,"children":1048},{},[1049,1067],{"type":17,"tag":528,"props":1050,"children":1051},{},[1052],{"type":17,"tag":532,"props":1053,"children":1054},{},[1055,1059,1063],{"type":17,"tag":536,"props":1056,"children":1057},{"align":10},[1058],{"type":22,"value":540},{"type":17,"tag":536,"props":1060,"children":1061},{"align":10},[1062],{"type":22,"value":906},{"type":17,"tag":536,"props":1064,"children":1065},{"align":10},[1066],{"type":22,"value":911},{"type":17,"tag":547,"props":1068,"children":1069},{},[1070],{"type":17,"tag":532,"props":1071,"children":1072},{},[1073,1077,1081],{"type":17,"tag":554,"props":1074,"children":1075},{"align":10},[1076],{"type":22,"value":756},{"type":17,"tag":554,"props":1078,"children":1079},{"align":10},[1080],{"type":22,"value":942},{"type":17,"tag":554,"props":1082,"children":1083},{"align":10},[1084],{"type":22,"value":947},{"type":17,"tag":883,"props":1086,"children":1088},{"id":1087},"link",[1089],{"type":22,"value":1090},"Link",{"type":17,"tag":524,"props":1092,"children":1093},{},[1094,1112],{"type":17,"tag":528,"props":1095,"children":1096},{},[1097],{"type":17,"tag":532,"props":1098,"children":1099},{},[1100,1104,1108],{"type":17,"tag":536,"props":1101,"children":1102},{"align":10},[1103],{"type":22,"value":540},{"type":17,"tag":536,"props":1105,"children":1106},{"align":10},[1107],{"type":22,"value":906},{"type":17,"tag":536,"props":1109,"children":1110},{"align":10},[1111],{"type":22,"value":911},{"type":17,"tag":547,"props":1113,"children":1114},{},[1115,1138],{"type":17,"tag":532,"props":1116,"children":1117},{},[1118,1121,1130],{"type":17,"tag":554,"props":1119,"children":1120},{"align":10},[],{"type":17,"tag":554,"props":1122,"children":1123},{"align":10},[1124],{"type":17,"tag":1125,"props":1126,"children":1127},"em",{},[1128],{"type":22,"value":1129},"If Primary ‘Dark’",{"type":17,"tag":554,"props":1131,"children":1132},{"align":10},[1133],{"type":17,"tag":1125,"props":1134,"children":1135},{},[1136],{"type":22,"value":1137},"If Primary ‘Light’",{"type":17,"tag":532,"props":1139,"children":1140},{},[1141,1145,1149],{"type":17,"tag":554,"props":1142,"children":1143},{"align":10},[1144],{"type":22,"value":631},{"type":17,"tag":554,"props":1146,"children":1147},{"align":10},[1148],{"type":22,"value":558},{"type":17,"tag":554,"props":1150,"children":1151},{"align":10},[1152],{"type":22,"value":272},{"type":17,"tag":234,"props":1154,"children":1156},{"id":1155},"gradient",[1157],{"type":22,"value":1158},"Gradient",{"type":17,"tag":18,"props":1160,"children":1161},{},[1162],{"type":22,"value":1163},"Including a gradient is optional for theming.",{"type":17,"tag":18,"props":1165,"children":1166},{},[1167],{"type":22,"value":1168},"If a gradient is not used, 'rpl-clr-accent' will be used in its place.",{"type":17,"tag":883,"props":1170,"children":1172},{"id":1171},"gradient-1",[1173],{"type":22,"value":1158},{"type":17,"tag":524,"props":1175,"children":1176},{},[1177,1195],{"type":17,"tag":528,"props":1178,"children":1179},{},[1180],{"type":17,"tag":532,"props":1181,"children":1182},{},[1183,1187,1191],{"type":17,"tag":536,"props":1184,"children":1185},{"align":10},[1186],{"type":22,"value":540},{"type":17,"tag":536,"props":1188,"children":1189},{"align":10},[1190],{"type":22,"value":1158},{"type":17,"tag":536,"props":1192,"children":1193},{"align":10},[1194],{"type":22,"value":1000},{"type":17,"tag":547,"props":1196,"children":1197},{},[1198,1214],{"type":17,"tag":532,"props":1199,"children":1200},{},[1201,1205,1210],{"type":17,"tag":554,"props":1202,"children":1203},{"align":10},[1204],{"type":22,"value":643},{"type":17,"tag":554,"props":1206,"children":1207},{"align":10},[1208],{"type":22,"value":1209},"rpl-clr-gradient (90 degrees)",{"type":17,"tag":554,"props":1211,"children":1212},{"align":10},[1213],{"type":22,"value":595},{"type":17,"tag":532,"props":1215,"children":1216},{},[1217,1221,1226],{"type":17,"tag":554,"props":1218,"children":1219},{"align":10},[1220],{"type":22,"value":655},{"type":17,"tag":554,"props":1222,"children":1223},{"align":10},[1224],{"type":22,"value":1225},"rpl-clr-gradient (180 degrees)",{"type":17,"tag":554,"props":1227,"children":1228},{"align":10},[1229],{"type":22,"value":595},{"title":8,"searchDepth":1231,"depth":1231,"links":1232},2,[1233,1234,1239,1242,1247],{"id":111,"depth":1231,"text":38},{"id":207,"depth":1231,"text":49,"children":1235},[1236,1238],{"id":227,"depth":1237,"text":238},3,{"id":269,"depth":1237,"text":272},{"id":299,"depth":1231,"text":59,"children":1240},[1241],{"id":410,"depth":1237,"text":413},{"id":491,"depth":1231,"text":494,"children":1243},[1244,1245,1246],{"id":520,"depth":1237,"text":12},{"id":662,"depth":1237,"text":665},{"id":764,"depth":1237,"text":767},{"id":854,"depth":1231,"text":857,"children":1248},[1249,1250],{"id":878,"depth":1237,"text":881},{"id":1155,"depth":1237,"text":1158},"markdown","content:design-system:2.design:4.theming-guidance-for-designers.md","content","design-system/2.design/4.theming-guidance-for-designers.md","md",{"/design-system/design/theming-guidance-for-designers":1257},[1258,1264],{"_path":1259,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":1260,"description":1261,"layout":11,"label":12,"_type":1251,"_id":1262,"_source":1253,"_file":1263,"_extension":1255},"/design-system/design/design-tokens","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","content:design-system:2.design:3.design-tokens.md","design-system/2.design/3.design-tokens.md",{"_path":1265,"_dir":1266,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":1267,"description":1268,"layout":11,"links":1269,"_type":1251,"_id":1276,"_source":1253,"_file":1277,"_extension":1255},"/design-system/develop/getting-started","develop","Getting started","Information for developers using the Ripple 2 UI libraries",[1270,1273],{"text":1271,"url":1272},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":1274,"url":1275},"Storybook","/storybook","content:design-system:3.develop:1.getting-started.md","design-system/3.develop/1.getting-started.md",{},[1280,1285,1527],{"title":1281,"_path":1282,"icon":1283,"layout":1284},"Ripple Design System","/","carbon:home","home",{"title":1286,"_path":1287,"children":1288},"Design System","/design-system",[1289,1305,1316,1345,1379],{"title":1290,"_path":1291,"children":1292},"About","/design-system/about",[1293,1296,1299,1302],{"title":1294,"_path":1295,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":1297,"_path":1298,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":1300,"_path":1301,"layout":11},"Support","/design-system/about/getting-support",{"title":1303,"_path":1304,"layout":11},"Contributing","/design-system/about/contributing",{"title":1306,"_path":1307,"children":1308},"Design","/design-system/design",[1309,1311,1314,1315],{"title":1267,"_path":1310,"layout":11},"/design-system/design/getting-started",{"title":1312,"_path":1313,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":1260,"_path":1259,"layout":11},{"title":9,"_path":5,"layout":11},{"title":1317,"_path":1318,"children":1319},"Develop","/design-system/develop",[1320,1321,1323,1326],{"title":1267,"_path":1265,"layout":11},{"title":1303,"_path":1322,"layout":11},"/design-system/develop/contributing",{"title":1324,"_path":1325,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":1327,"_path":1328,"children":1329,"layout":11},"Usage","/design-system/develop/usage",[1330,1333,1336,1339,1342],{"title":1331,"_path":1332,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":1334,"_path":1335,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":1337,"_path":1338,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":1340,"_path":1341,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":1343,"_path":1344,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":1346,"_path":1347,"children":1348},"Styles","/design-system/styles",[1349,1352,1355,1358,1361,1364,1367,1370,1373,1376],{"title":1350,"_path":1351,"layout":11},"Colour","/design-system/styles/colour",{"title":1353,"_path":1354,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":1356,"_path":1357,"layout":11},"Grid","/design-system/styles/grid",{"title":1359,"_path":1360,"layout":11},"Icons","/design-system/styles/icons",{"title":1362,"_path":1363,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":1365,"_path":1366,"layout":11},"Layout","/design-system/styles/layout",{"title":1368,"_path":1369,"layout":11},"Logo","/design-system/styles/logo",{"title":1371,"_path":1372,"layout":11},"Motion","/design-system/styles/motion",{"title":1374,"_path":1375,"layout":11},"Spacing","/design-system/styles/spacing",{"title":1377,"_path":1378,"layout":11},"Typography","/design-system/styles/typography",{"title":1380,"_path":1381,"children":1382},"Components","/design-system/components",[1383,1386,1389,1392,1395,1398,1401,1404,1407,1410,1413,1416,1419,1422,1425,1428,1431,1434,1437,1440,1443,1446,1449,1452,1455,1458,1461,1464,1467,1470,1473,1476,1479,1482,1485,1488,1491,1494,1497,1500,1503,1506,1509,1512,1515,1518,1521,1524],{"title":1384,"_path":1385,"layout":11},"Accordion","/design-system/components/accordion",{"title":1387,"_path":1388,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":1390,"_path":1391,"layout":11},"Alert","/design-system/components/alert",{"title":1393,"_path":1394,"layout":11},"Block quote","/design-system/components/block-quote",{"title":1396,"_path":1397,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":1399,"_path":1400,"layout":11},"Button","/design-system/components/button",{"title":1402,"_path":1403,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":1405,"_path":1406,"layout":11},"Callout","/design-system/components/callout",{"title":1408,"_path":1409,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":1411,"_path":1412,"layout":11},"Card","/design-system/components/card",{"title":1414,"_path":1415,"layout":11},"Carousel","/design-system/components/carousel",{"title":1417,"_path":1418,"layout":11},"Category grid","/design-system/components/category-grid",{"title":1420,"_path":1421,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":1423,"_path":1424,"layout":11},"Chip","/design-system/components/chip",{"title":1426,"_path":1427,"layout":11},"Contact us","/design-system/components/contact-us",{"title":1429,"_path":1430,"layout":11},"Date input","/design-system/components/date-input",{"title":1432,"_path":1433,"layout":11},"Detail list","/design-system/components/detail-list",{"title":1435,"_path":1436,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":1438,"_path":1439,"layout":11},"File","/design-system/components/file",{"title":1441,"_path":1442,"layout":11},"Footer","/design-system/components/footer",{"title":1444,"_path":1445,"layout":11},"Form alert","/design-system/components/form-alert",{"title":1447,"_path":1448,"layout":11},"Form","/design-system/components/form",{"title":1450,"_path":1451,"layout":11},"Header","/design-system/components/header",{"title":1453,"_path":1454,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":1456,"_path":1457,"layout":11},"Input field","/design-system/components/input-field",{"title":1459,"_path":1460,"layout":11},"Key dates","/design-system/components/key-dates",{"title":1462,"_path":1463,"layout":11},"Media embed","/design-system/components/media-embed",{"title":1465,"_path":1466,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":1468,"_path":1469,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":1471,"_path":1472,"layout":11},"Media","/design-system/components/media",{"title":1474,"_path":1475,"layout":11},"Option button","/design-system/components/option-button",{"title":1477,"_path":1478,"layout":11},"Page action","/design-system/components/page-action",{"title":1480,"_path":1481,"layout":11},"Pagination","/design-system/components/pagination",{"title":1483,"_path":1484,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":1486,"_path":1487,"layout":11},"Profile","/design-system/components/profile",{"title":1489,"_path":1490,"layout":11},"Radio button","/design-system/components/radio-button",{"title":1492,"_path":1493,"layout":11},"Related links","/design-system/components/related-links",{"title":1495,"_path":1496,"layout":11},"Results listing","/design-system/components/results-listing",{"title":1498,"_path":1499,"layout":11},"Search bar","/design-system/components/search-bar",{"title":1501,"_path":1502,"layout":11},"Skip link","/design-system/components/skip-link",{"title":1504,"_path":1505,"layout":11},"Social share","/design-system/components/social-share",{"title":1507,"_path":1508,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":1510,"_path":1511,"layout":11},"Table","/design-system/components/table",{"title":1513,"_path":1514,"layout":11},"Tabs","/design-system/components/tabs",{"title":1516,"_path":1517,"layout":11},"Tag","/design-system/components/tag",{"title":1519,"_path":1520,"layout":11},"Text area","/design-system/components/text-area",{"title":1522,"_path":1523,"layout":11},"Timeline","/design-system/components/timeline",{"title":1525,"_path":1526,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":1528,"_path":1529,"children":1530,"layout":11},"Ripple Framework","/framework",[1531,1532,1550,1572],{"title":1528,"_path":1529,"layout":11},{"title":1533,"_path":1534,"children":1535},"Key Concepts","/framework/key-concepts",[1536,1538,1541,1544,1547],{"title":1337,"_path":1537,"layout":11},"/framework/key-concepts/nuxt",{"title":1539,"_path":1540,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":1542,"_path":1543,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":1545,"_path":1546,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":1548,"_path":1549,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":1551,"_path":1552,"children":1553},"Guides","/framework/guides",[1554,1557,1560,1563,1566,1569],{"title":1555,"_path":1556,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":1558,"_path":1559,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":1561,"_path":1562,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":1564,"_path":1565,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":1567,"_path":1568,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":1570,"_path":1571,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":1573,"_path":1574,"layout":11},"Core modules","/framework/core-modules",["Reactive",1576],{"module-navigation":10},true,"/design-system/design/theming-guidance-for-designers/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/develop/contributing/index.html b/design-system/develop/contributing/index.html index 57c3555786..8f7447b391 100644 --- a/design-system/develop/contributing/index.html +++ b/design-system/develop/contributing/index.html @@ -24,7 +24,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contributing</h1><p class="rpl-type-p-large" data-v-3163c6df>Information for developers wishing to contribute to the Ripple 2 UI libraries</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><blockquote class="rpl-callout"><!--[--><p><!--[-->When contributing or participating in discussions, ensure that you are following our <a href="https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->contributor code of conduct<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 id="report-an-issue"><a href="#report-an-issue"><!--[-->Report an issue<!--]--></a></h2><p><!--[-->If you find an issue in Ripple, you can create an issue in github here <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://github.com/dpc-sdp/ripple-framework/issues<!--]--><!--]--><!----><!--]--></a>. Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed.<!--]--></p><p><!--[-->Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue.<!--]--></p><h2 id="join-the-discussion"><a href="#join-the-discussion"><!--[-->Join the discussion<!--]--></a></h2><p><!--[-->Do you have an idea for a new component or feature? Use the <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Discussions<!--]--><!--]--><!----><!--]--></a> feature in Ripple Github repo to start the conversation.<!--]--></p><h2 id="writing-code"><a href="#writing-code"><!--[-->Writing code<!--]--></a></h2><p><!--[-->If you are ready to write some code in the Ripple git repo, please see the <a href="https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Contributing guide<!--]--><!--]--><!----><!--]--></a> in Github.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/2.contributing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/contributing/_payload.json">[{"state":1,"_errors":430,"serverRendered":433,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":112,"$sdd-globals":133,"$sdd-navigation":134},{"/design-system/develop/contributing":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":107,"_id":108,"_source":109,"_file":110,"_extension":111},"/design-system/develop/contributing","develop",false,"","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","page",{"type":13,"children":14,"toc":101},"root",[15,36,43,56,61,67,81,87],{"type":16,"tag":17,"props":18,"children":19},"element","blockquote",{},[20],{"type":16,"tag":21,"props":22,"children":23},"p",{},[24,27],{"type":25,"value":26},"text","When contributing or participating in discussions, ensure that you are following our ",{"type":16,"tag":28,"props":29,"children":33},"a",{"href":30,"rel":31},"https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md",[32],"nofollow",[34],{"type":25,"value":35},"contributor code of conduct",{"type":16,"tag":37,"props":38,"children":40},"h2",{"id":39},"report-an-issue",[41],{"type":25,"value":42},"Report an issue",{"type":16,"tag":21,"props":44,"children":45},{},[46,48,54],{"type":25,"value":47},"If you find an issue in Ripple, you can create an issue in github here ",{"type":16,"tag":28,"props":49,"children":52},{"href":50,"rel":51},"https://github.com/dpc-sdp/ripple-framework/issues",[32],[53],{"type":25,"value":50},{"type":25,"value":55},". Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed.",{"type":16,"tag":21,"props":57,"children":58},{},[59],{"type":25,"value":60},"Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue.",{"type":16,"tag":37,"props":62,"children":64},{"id":63},"join-the-discussion",[65],{"type":25,"value":66},"Join the discussion",{"type":16,"tag":21,"props":68,"children":69},{},[70,72,79],{"type":25,"value":71},"Do you have an idea for a new component or feature? Use the ",{"type":16,"tag":28,"props":73,"children":76},{"href":74,"rel":75},"https://github.com/dpc-sdp/ripple-framework/discussions",[32],[77],{"type":25,"value":78},"Discussions",{"type":25,"value":80}," feature in Ripple Github repo to start the conversation.",{"type":16,"tag":37,"props":82,"children":84},{"id":83},"writing-code",[85],{"type":25,"value":86},"Writing code",{"type":16,"tag":21,"props":88,"children":89},{},[90,92,99],{"type":25,"value":91},"If you are ready to write some code in the Ripple git repo, please see the ",{"type":16,"tag":28,"props":93,"children":96},{"href":94,"rel":95},"https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md",[32],[97],{"type":25,"value":98},"Contributing guide",{"type":25,"value":100}," in Github.",{"title":8,"searchDepth":102,"depth":102,"links":103},2,[104,105,106],{"id":39,"depth":102,"text":42},{"id":63,"depth":102,"text":66},{"id":83,"depth":102,"text":86},"markdown","content:design-system:3.develop:2.contributing.md","content","design-system/3.develop/2.contributing.md","md",{"/design-system/develop/contributing":113},[114,127],{"_path":115,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":116,"description":117,"layout":11,"links":118,"_type":107,"_id":125,"_source":109,"_file":126,"_extension":111},"/design-system/develop/getting-started","Getting started","Information for developers using the Ripple 2 UI libraries",[119,122],{"text":120,"url":121},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":123,"url":124},"Storybook","/storybook","content:design-system:3.develop:1.getting-started.md","design-system/3.develop/1.getting-started.md",{"_path":128,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":129,"description":130,"layout":11,"_type":107,"_id":131,"_source":109,"_file":132,"_extension":111},"/design-system/develop/theming","Theme and brand application","Information for developers using Ripple 2 UI libraries","content:design-system:3.develop:2.theming.md","design-system/3.develop/2.theming.md",{},[135,140,382],{"title":136,"_path":137,"icon":138,"layout":139},"Ripple Design System","/","carbon:home","home",{"title":141,"_path":142,"children":143},"Design System","/design-system",[144,159,174,200,234],{"title":145,"_path":146,"children":147},"About","/design-system/about",[148,151,154,157],{"title":149,"_path":150,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":152,"_path":153,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":155,"_path":156,"layout":11},"Support","/design-system/about/getting-support",{"title":9,"_path":158,"layout":11},"/design-system/about/contributing",{"title":160,"_path":161,"children":162},"Design","/design-system/design",[163,165,168,171],{"title":116,"_path":164,"layout":11},"/design-system/design/getting-started",{"title":166,"_path":167,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":169,"_path":170,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":172,"_path":173,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":175,"_path":176,"children":177},"Develop","/design-system/develop",[178,179,180,181],{"title":116,"_path":115,"layout":11},{"title":9,"_path":5,"layout":11},{"title":129,"_path":128,"layout":11},{"title":182,"_path":183,"children":184,"layout":11},"Usage","/design-system/develop/usage",[185,188,191,194,197],{"title":186,"_path":187,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":189,"_path":190,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":192,"_path":193,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":195,"_path":196,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":198,"_path":199,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":201,"_path":202,"children":203},"Styles","/design-system/styles",[204,207,210,213,216,219,222,225,228,231],{"title":205,"_path":206,"layout":11},"Colour","/design-system/styles/colour",{"title":208,"_path":209,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":211,"_path":212,"layout":11},"Grid","/design-system/styles/grid",{"title":214,"_path":215,"layout":11},"Icons","/design-system/styles/icons",{"title":217,"_path":218,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":220,"_path":221,"layout":11},"Layout","/design-system/styles/layout",{"title":223,"_path":224,"layout":11},"Logo","/design-system/styles/logo",{"title":226,"_path":227,"layout":11},"Motion","/design-system/styles/motion",{"title":229,"_path":230,"layout":11},"Spacing","/design-system/styles/spacing",{"title":232,"_path":233,"layout":11},"Typography","/design-system/styles/typography",{"title":235,"_path":236,"children":237},"Components","/design-system/components",[238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379],{"title":239,"_path":240,"layout":11},"Accordion","/design-system/components/accordion",{"title":242,"_path":243,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":245,"_path":246,"layout":11},"Alert","/design-system/components/alert",{"title":248,"_path":249,"layout":11},"Block quote","/design-system/components/block-quote",{"title":251,"_path":252,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":254,"_path":255,"layout":11},"Button","/design-system/components/button",{"title":257,"_path":258,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":260,"_path":261,"layout":11},"Callout","/design-system/components/callout",{"title":263,"_path":264,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":266,"_path":267,"layout":11},"Card","/design-system/components/card",{"title":269,"_path":270,"layout":11},"Carousel","/design-system/components/carousel",{"title":272,"_path":273,"layout":11},"Category grid","/design-system/components/category-grid",{"title":275,"_path":276,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":278,"_path":279,"layout":11},"Chip","/design-system/components/chip",{"title":281,"_path":282,"layout":11},"Contact us","/design-system/components/contact-us",{"title":284,"_path":285,"layout":11},"Date input","/design-system/components/date-input",{"title":287,"_path":288,"layout":11},"Detail list","/design-system/components/detail-list",{"title":290,"_path":291,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":293,"_path":294,"layout":11},"File","/design-system/components/file",{"title":296,"_path":297,"layout":11},"Footer","/design-system/components/footer",{"title":299,"_path":300,"layout":11},"Form alert","/design-system/components/form-alert",{"title":302,"_path":303,"layout":11},"Form","/design-system/components/form",{"title":305,"_path":306,"layout":11},"Header","/design-system/components/header",{"title":308,"_path":309,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":311,"_path":312,"layout":11},"Input field","/design-system/components/input-field",{"title":314,"_path":315,"layout":11},"Key dates","/design-system/components/key-dates",{"title":317,"_path":318,"layout":11},"Media embed","/design-system/components/media-embed",{"title":320,"_path":321,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":323,"_path":324,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":326,"_path":327,"layout":11},"Media","/design-system/components/media",{"title":329,"_path":330,"layout":11},"Option button","/design-system/components/option-button",{"title":332,"_path":333,"layout":11},"Page action","/design-system/components/page-action",{"title":335,"_path":336,"layout":11},"Pagination","/design-system/components/pagination",{"title":338,"_path":339,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":341,"_path":342,"layout":11},"Profile","/design-system/components/profile",{"title":344,"_path":345,"layout":11},"Radio button","/design-system/components/radio-button",{"title":347,"_path":348,"layout":11},"Related links","/design-system/components/related-links",{"title":350,"_path":351,"layout":11},"Results listing","/design-system/components/results-listing",{"title":353,"_path":354,"layout":11},"Search bar","/design-system/components/search-bar",{"title":356,"_path":357,"layout":11},"Skip link","/design-system/components/skip-link",{"title":359,"_path":360,"layout":11},"Social share","/design-system/components/social-share",{"title":362,"_path":363,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":365,"_path":366,"layout":11},"Table","/design-system/components/table",{"title":368,"_path":369,"layout":11},"Tabs","/design-system/components/tabs",{"title":371,"_path":372,"layout":11},"Tag","/design-system/components/tag",{"title":374,"_path":375,"layout":11},"Text area","/design-system/components/text-area",{"title":377,"_path":378,"layout":11},"Timeline","/design-system/components/timeline",{"title":380,"_path":381,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":383,"_path":384,"children":385,"layout":11},"Ripple Framework","/framework",[386,387,405,427],{"title":383,"_path":384,"layout":11},{"title":388,"_path":389,"children":390},"Key Concepts","/framework/key-concepts",[391,393,396,399,402],{"title":192,"_path":392,"layout":11},"/framework/key-concepts/nuxt",{"title":394,"_path":395,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":397,"_path":398,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":400,"_path":401,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":403,"_path":404,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":406,"_path":407,"children":408},"Guides","/framework/guides",[409,412,415,418,421,424],{"title":410,"_path":411,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":413,"_path":414,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":416,"_path":417,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":419,"_path":420,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":422,"_path":423,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":425,"_path":426,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":428,"_path":429,"layout":11},"Core modules","/framework/core-modules",["Reactive",431],{"module-navigation":432},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contributing</h1><p class="rpl-type-p-large" data-v-3163c6df>Information for developers wishing to contribute to the Ripple 2 UI libraries</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><blockquote class="rpl-callout"><!--[--><p><!--[-->When contributing or participating in discussions, ensure that you are following our <a href="https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->contributor code of conduct<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 id="report-an-issue"><a href="#report-an-issue"><!--[-->Report an issue<!--]--></a></h2><p><!--[-->If you find an issue in Ripple, you can create an issue in github here <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://github.com/dpc-sdp/ripple-framework/issues<!--]--><!--]--><!----><!--]--></a>. Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed.<!--]--></p><p><!--[-->Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue.<!--]--></p><h2 id="join-the-discussion"><a href="#join-the-discussion"><!--[-->Join the discussion<!--]--></a></h2><p><!--[-->Do you have an idea for a new component or feature? Use the <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Discussions<!--]--><!--]--><!----><!--]--></a> feature in Ripple Github repo to start the conversation.<!--]--></p><h2 id="writing-code"><a href="#writing-code"><!--[-->Writing code<!--]--></a></h2><p><!--[-->If you are ready to write some code in the Ripple git repo, please see the <a href="https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Contributing guide<!--]--><!--]--><!----><!--]--></a> in Github.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/2.contributing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/contributing/_payload.json">[{"state":1,"_errors":430,"serverRendered":433,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":112,"$sdd-globals":133,"$sdd-navigation":134},{"/design-system/develop/contributing":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":107,"_id":108,"_source":109,"_file":110,"_extension":111},"/design-system/develop/contributing","develop",false,"","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","page",{"type":13,"children":14,"toc":101},"root",[15,36,43,56,61,67,81,87],{"type":16,"tag":17,"props":18,"children":19},"element","blockquote",{},[20],{"type":16,"tag":21,"props":22,"children":23},"p",{},[24,27],{"type":25,"value":26},"text","When contributing or participating in discussions, ensure that you are following our ",{"type":16,"tag":28,"props":29,"children":33},"a",{"href":30,"rel":31},"https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md",[32],"nofollow",[34],{"type":25,"value":35},"contributor code of conduct",{"type":16,"tag":37,"props":38,"children":40},"h2",{"id":39},"report-an-issue",[41],{"type":25,"value":42},"Report an issue",{"type":16,"tag":21,"props":44,"children":45},{},[46,48,54],{"type":25,"value":47},"If you find an issue in Ripple, you can create an issue in github here ",{"type":16,"tag":28,"props":49,"children":52},{"href":50,"rel":51},"https://github.com/dpc-sdp/ripple-framework/issues",[32],[53],{"type":25,"value":50},{"type":25,"value":55},". Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed.",{"type":16,"tag":21,"props":57,"children":58},{},[59],{"type":25,"value":60},"Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue.",{"type":16,"tag":37,"props":62,"children":64},{"id":63},"join-the-discussion",[65],{"type":25,"value":66},"Join the discussion",{"type":16,"tag":21,"props":68,"children":69},{},[70,72,79],{"type":25,"value":71},"Do you have an idea for a new component or feature? Use the ",{"type":16,"tag":28,"props":73,"children":76},{"href":74,"rel":75},"https://github.com/dpc-sdp/ripple-framework/discussions",[32],[77],{"type":25,"value":78},"Discussions",{"type":25,"value":80}," feature in Ripple Github repo to start the conversation.",{"type":16,"tag":37,"props":82,"children":84},{"id":83},"writing-code",[85],{"type":25,"value":86},"Writing code",{"type":16,"tag":21,"props":88,"children":89},{},[90,92,99],{"type":25,"value":91},"If you are ready to write some code in the Ripple git repo, please see the ",{"type":16,"tag":28,"props":93,"children":96},{"href":94,"rel":95},"https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md",[32],[97],{"type":25,"value":98},"Contributing guide",{"type":25,"value":100}," in Github.",{"title":8,"searchDepth":102,"depth":102,"links":103},2,[104,105,106],{"id":39,"depth":102,"text":42},{"id":63,"depth":102,"text":66},{"id":83,"depth":102,"text":86},"markdown","content:design-system:3.develop:2.contributing.md","content","design-system/3.develop/2.contributing.md","md",{"/design-system/develop/contributing":113},[114,127],{"_path":115,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":116,"description":117,"layout":11,"links":118,"_type":107,"_id":125,"_source":109,"_file":126,"_extension":111},"/design-system/develop/getting-started","Getting started","Information for developers using the Ripple 2 UI libraries",[119,122],{"text":120,"url":121},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":123,"url":124},"Storybook","/storybook","content:design-system:3.develop:1.getting-started.md","design-system/3.develop/1.getting-started.md",{"_path":128,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":129,"description":130,"layout":11,"_type":107,"_id":131,"_source":109,"_file":132,"_extension":111},"/design-system/develop/theming","Theme and brand application","Information for developers using Ripple 2 UI libraries","content:design-system:3.develop:2.theming.md","design-system/3.develop/2.theming.md",{},[135,140,382],{"title":136,"_path":137,"icon":138,"layout":139},"Ripple Design System","/","carbon:home","home",{"title":141,"_path":142,"children":143},"Design System","/design-system",[144,159,174,200,234],{"title":145,"_path":146,"children":147},"About","/design-system/about",[148,151,154,157],{"title":149,"_path":150,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":152,"_path":153,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":155,"_path":156,"layout":11},"Support","/design-system/about/getting-support",{"title":9,"_path":158,"layout":11},"/design-system/about/contributing",{"title":160,"_path":161,"children":162},"Design","/design-system/design",[163,165,168,171],{"title":116,"_path":164,"layout":11},"/design-system/design/getting-started",{"title":166,"_path":167,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":169,"_path":170,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":172,"_path":173,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":175,"_path":176,"children":177},"Develop","/design-system/develop",[178,179,180,181],{"title":116,"_path":115,"layout":11},{"title":9,"_path":5,"layout":11},{"title":129,"_path":128,"layout":11},{"title":182,"_path":183,"children":184,"layout":11},"Usage","/design-system/develop/usage",[185,188,191,194,197],{"title":186,"_path":187,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":189,"_path":190,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":192,"_path":193,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":195,"_path":196,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":198,"_path":199,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":201,"_path":202,"children":203},"Styles","/design-system/styles",[204,207,210,213,216,219,222,225,228,231],{"title":205,"_path":206,"layout":11},"Colour","/design-system/styles/colour",{"title":208,"_path":209,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":211,"_path":212,"layout":11},"Grid","/design-system/styles/grid",{"title":214,"_path":215,"layout":11},"Icons","/design-system/styles/icons",{"title":217,"_path":218,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":220,"_path":221,"layout":11},"Layout","/design-system/styles/layout",{"title":223,"_path":224,"layout":11},"Logo","/design-system/styles/logo",{"title":226,"_path":227,"layout":11},"Motion","/design-system/styles/motion",{"title":229,"_path":230,"layout":11},"Spacing","/design-system/styles/spacing",{"title":232,"_path":233,"layout":11},"Typography","/design-system/styles/typography",{"title":235,"_path":236,"children":237},"Components","/design-system/components",[238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379],{"title":239,"_path":240,"layout":11},"Accordion","/design-system/components/accordion",{"title":242,"_path":243,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":245,"_path":246,"layout":11},"Alert","/design-system/components/alert",{"title":248,"_path":249,"layout":11},"Block quote","/design-system/components/block-quote",{"title":251,"_path":252,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":254,"_path":255,"layout":11},"Button","/design-system/components/button",{"title":257,"_path":258,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":260,"_path":261,"layout":11},"Callout","/design-system/components/callout",{"title":263,"_path":264,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":266,"_path":267,"layout":11},"Card","/design-system/components/card",{"title":269,"_path":270,"layout":11},"Carousel","/design-system/components/carousel",{"title":272,"_path":273,"layout":11},"Category grid","/design-system/components/category-grid",{"title":275,"_path":276,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":278,"_path":279,"layout":11},"Chip","/design-system/components/chip",{"title":281,"_path":282,"layout":11},"Contact us","/design-system/components/contact-us",{"title":284,"_path":285,"layout":11},"Date input","/design-system/components/date-input",{"title":287,"_path":288,"layout":11},"Detail list","/design-system/components/detail-list",{"title":290,"_path":291,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":293,"_path":294,"layout":11},"File","/design-system/components/file",{"title":296,"_path":297,"layout":11},"Footer","/design-system/components/footer",{"title":299,"_path":300,"layout":11},"Form alert","/design-system/components/form-alert",{"title":302,"_path":303,"layout":11},"Form","/design-system/components/form",{"title":305,"_path":306,"layout":11},"Header","/design-system/components/header",{"title":308,"_path":309,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":311,"_path":312,"layout":11},"Input field","/design-system/components/input-field",{"title":314,"_path":315,"layout":11},"Key dates","/design-system/components/key-dates",{"title":317,"_path":318,"layout":11},"Media embed","/design-system/components/media-embed",{"title":320,"_path":321,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":323,"_path":324,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":326,"_path":327,"layout":11},"Media","/design-system/components/media",{"title":329,"_path":330,"layout":11},"Option button","/design-system/components/option-button",{"title":332,"_path":333,"layout":11},"Page action","/design-system/components/page-action",{"title":335,"_path":336,"layout":11},"Pagination","/design-system/components/pagination",{"title":338,"_path":339,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":341,"_path":342,"layout":11},"Profile","/design-system/components/profile",{"title":344,"_path":345,"layout":11},"Radio button","/design-system/components/radio-button",{"title":347,"_path":348,"layout":11},"Related links","/design-system/components/related-links",{"title":350,"_path":351,"layout":11},"Results listing","/design-system/components/results-listing",{"title":353,"_path":354,"layout":11},"Search bar","/design-system/components/search-bar",{"title":356,"_path":357,"layout":11},"Skip link","/design-system/components/skip-link",{"title":359,"_path":360,"layout":11},"Social share","/design-system/components/social-share",{"title":362,"_path":363,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":365,"_path":366,"layout":11},"Table","/design-system/components/table",{"title":368,"_path":369,"layout":11},"Tabs","/design-system/components/tabs",{"title":371,"_path":372,"layout":11},"Tag","/design-system/components/tag",{"title":374,"_path":375,"layout":11},"Text area","/design-system/components/text-area",{"title":377,"_path":378,"layout":11},"Timeline","/design-system/components/timeline",{"title":380,"_path":381,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":383,"_path":384,"children":385,"layout":11},"Ripple Framework","/framework",[386,387,405,427],{"title":383,"_path":384,"layout":11},{"title":388,"_path":389,"children":390},"Key Concepts","/framework/key-concepts",[391,393,396,399,402],{"title":192,"_path":392,"layout":11},"/framework/key-concepts/nuxt",{"title":394,"_path":395,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":397,"_path":398,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":400,"_path":401,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":403,"_path":404,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":406,"_path":407,"children":408},"Guides","/framework/guides",[409,412,415,418,421,424],{"title":410,"_path":411,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":413,"_path":414,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":416,"_path":417,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":419,"_path":420,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":422,"_path":423,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":425,"_path":426,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":428,"_path":429,"layout":11},"Core modules","/framework/core-modules",["Reactive",431],{"module-navigation":432},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/develop/getting-started/index.html b/design-system/develop/getting-started/index.html index 9291b9ff6d..be468301e1 100644 --- a/design-system/develop/getting-started/index.html +++ b/design-system/develop/getting-started/index.html @@ -24,7 +24,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Getting started</h1><p class="rpl-type-p-large" data-v-3163c6df>Information for developers using the Ripple 2 UI libraries</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://github.com/dpc-sdp/ripple-framework" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Github<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><li data-v-3163c6df><a href="/storybook" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Storybook<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:<!--]--></p><ul><!--[--><li><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code>: A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography.<!--]--></li><li><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code>: A collection of form inputs and support for building complex forms via <a href="https://formkit.com/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Formkit<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->These docs are for Ripple 2<!--]--></strong><!--]--></p><p><!--[-->Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the <a href="https://github.com/dpc-sdp/ripple" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->original Ripple GitHub repo<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--></blockquote><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->Are you developing a site on the SDP platform?<!--]--></strong><!--]--></p><p><!--[-->This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here.<!--]--></p><p><!--[-->For information about using Ripple in SDP sites, visit the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple Framework for SDP documentation<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 id="accessing-the-source-code"><a href="#accessing-the-source-code"><!--[-->Accessing the Source code<!--]--></a></h2><p><!--[-->Ripple 2 is an open source project and the source code can be found in the <a href="https://github.com/dpc-sdp/ripple-framework" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->ripple-framework monorepo on Github<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:<!--]--></p><ul><!--[--><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->View <code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code> on Github<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->View <code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code> on Github<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 id="viewing-examples-in-storybook"><a href="#viewing-examples-in-storybook"><!--[-->Viewing examples in Storybook<!--]--></a></h2><p><!--[-->The Ripple Storybook has information about props and slots that each Vue component supports. <a href="/storybook" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->View the Ripple storybook<!--]--><!--]--><!----><!--]--></a> to start exploring the available components.<!--]--></p><p><!--[-->Most of the examples found on this documentation site link directly examples in storybook.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->See the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->usage<!--]--><!--]--><!----><!--]--></a> guide for information about getting started with the different ways of implementing Ripple.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/1.getting-started.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/getting-started/_payload.json">[{"state":1,"_errors":542,"serverRendered":544,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":232,"$sdd-globals":248,"$sdd-navigation":249},{"/design-system/develop/getting-started":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"links":12,"body":19,"_type":227,"_id":228,"_source":229,"_file":230,"_extension":231},"/design-system/develop/getting-started","develop",false,"","Getting started","Information for developers using the Ripple 2 UI libraries","page",[13,16],{"text":14,"url":15},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":17,"url":18},"Storybook","/storybook",{"type":20,"children":21,"toc":221},"root",[22,30,65,92,119,126,138,143,176,182,194,199,203,209],{"type":23,"tag":24,"props":25,"children":26},"element","p",{},[27],{"type":28,"value":29},"text","This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:",{"type":23,"tag":31,"props":32,"children":33},"ul",{},[34,46],{"type":23,"tag":35,"props":36,"children":37},"li",{},[38,44],{"type":23,"tag":39,"props":40,"children":41},"code-inline",{},[42],{"type":28,"value":43},"ripple-ui-core",{"type":28,"value":45},": A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography.",{"type":23,"tag":35,"props":47,"children":48},{},[49,54,56],{"type":23,"tag":39,"props":50,"children":51},{},[52],{"type":28,"value":53},"ripple-ui-forms",{"type":28,"value":55},": A collection of form inputs and support for building complex forms via ",{"type":23,"tag":57,"props":58,"children":62},"a",{"href":59,"rel":60},"https://formkit.com/",[61],"nofollow",[63],{"type":28,"value":64},"Formkit",{"type":23,"tag":66,"props":67,"children":68},"blockquote",{},[69,78],{"type":23,"tag":24,"props":70,"children":71},{},[72],{"type":23,"tag":73,"props":74,"children":75},"strong",{},[76],{"type":28,"value":77},"These docs are for Ripple 2",{"type":23,"tag":24,"props":79,"children":80},{},[81,83,90],{"type":28,"value":82},"Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the ",{"type":23,"tag":57,"props":84,"children":87},{"href":85,"rel":86},"https://github.com/dpc-sdp/ripple",[61],[88],{"type":28,"value":89},"original Ripple GitHub repo",{"type":28,"value":91},".",{"type":23,"tag":66,"props":93,"children":94},{},[95,103,108],{"type":23,"tag":24,"props":96,"children":97},{},[98],{"type":23,"tag":73,"props":99,"children":100},{},[101],{"type":28,"value":102},"Are you developing a site on the SDP platform?",{"type":23,"tag":24,"props":104,"children":105},{},[106],{"type":28,"value":107},"This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here.",{"type":23,"tag":24,"props":109,"children":110},{},[111,113],{"type":28,"value":112},"For information about using Ripple in SDP sites, visit the ",{"type":23,"tag":57,"props":114,"children":116},{"href":115},"/framework",[117],{"type":28,"value":118},"Ripple Framework for SDP documentation",{"type":23,"tag":120,"props":121,"children":123},"h2",{"id":122},"accessing-the-source-code",[124],{"type":28,"value":125},"Accessing the Source code",{"type":23,"tag":24,"props":127,"children":128},{},[129,131,137],{"type":28,"value":130},"Ripple 2 is an open source project and the source code can be found in the ",{"type":23,"tag":57,"props":132,"children":134},{"href":15,"rel":133},[61],[135],{"type":28,"value":136},"ripple-framework monorepo on Github",{"type":28,"value":91},{"type":23,"tag":24,"props":139,"children":140},{},[141],{"type":28,"value":142},"This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:",{"type":23,"tag":31,"props":144,"children":145},{},[146,162],{"type":23,"tag":35,"props":147,"children":148},{},[149],{"type":23,"tag":57,"props":150,"children":153},{"href":151,"rel":152},"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core",[61],[154,156,160],{"type":28,"value":155},"View ",{"type":23,"tag":39,"props":157,"children":158},{},[159],{"type":28,"value":43},{"type":28,"value":161}," on Github",{"type":23,"tag":35,"props":163,"children":164},{},[165],{"type":23,"tag":57,"props":166,"children":169},{"href":167,"rel":168},"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms",[61],[170,171,175],{"type":28,"value":155},{"type":23,"tag":39,"props":172,"children":173},{},[174],{"type":28,"value":53},{"type":28,"value":161},{"type":23,"tag":120,"props":177,"children":179},{"id":178},"viewing-examples-in-storybook",[180],{"type":28,"value":181},"Viewing examples in Storybook",{"type":23,"tag":24,"props":183,"children":184},{},[185,187,192],{"type":28,"value":186},"The Ripple Storybook has information about props and slots that each Vue component supports. ",{"type":23,"tag":57,"props":188,"children":189},{"href":18},[190],{"type":28,"value":191},"View the Ripple storybook",{"type":28,"value":193}," to start exploring the available components.",{"type":23,"tag":24,"props":195,"children":196},{},[197],{"type":28,"value":198},"Most of the examples found on this documentation site link directly examples in storybook.",{"type":23,"tag":200,"props":201,"children":202},"hr",{},[],{"type":23,"tag":120,"props":204,"children":206},{"id":205},"usage",[207],{"type":28,"value":208},"Usage",{"type":23,"tag":24,"props":210,"children":211},{},[212,214,219],{"type":28,"value":213},"See the ",{"type":23,"tag":57,"props":215,"children":217},{"href":216},"/design-system/develop/usage",[218],{"type":28,"value":205},{"type":28,"value":220}," guide for information about getting started with the different ways of implementing Ripple.",{"title":8,"searchDepth":222,"depth":222,"links":223},2,[224,225,226],{"id":122,"depth":222,"text":125},{"id":178,"depth":222,"text":181},{"id":205,"depth":222,"text":208},"markdown","content:design-system:3.develop:1.getting-started.md","content","design-system/3.develop/1.getting-started.md","md",{"/design-system/develop/getting-started":233},[234,242],{"_path":235,"_dir":236,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":237,"description":238,"layout":11,"label":239,"_type":227,"_id":240,"_source":229,"_file":241,"_extension":231},"/design-system/design/theming-guidance-for-designers","design","Theming guidance for designers",null,"Core","content:design-system:2.design:4.theming-guidance-for-designers.md","design-system/2.design/4.theming-guidance-for-designers.md",{"_path":243,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":244,"description":245,"layout":11,"_type":227,"_id":246,"_source":229,"_file":247,"_extension":231},"/design-system/develop/contributing","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","content:design-system:3.develop:2.contributing.md","design-system/3.develop/2.contributing.md",{},[250,255,495],{"title":251,"_path":252,"icon":253,"layout":254},"Ripple Design System","/","carbon:home","home",{"title":256,"_path":257,"children":258},"Design System","/design-system",[259,274,287,313,347],{"title":260,"_path":261,"children":262},"About","/design-system/about",[263,266,269,272],{"title":264,"_path":265,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":267,"_path":268,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":270,"_path":271,"layout":11},"Support","/design-system/about/getting-support",{"title":244,"_path":273,"layout":11},"/design-system/about/contributing",{"title":275,"_path":276,"children":277},"Design","/design-system/design",[278,280,283,286],{"title":9,"_path":279,"layout":11},"/design-system/design/getting-started",{"title":281,"_path":282,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":284,"_path":285,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":237,"_path":235,"layout":11},{"title":288,"_path":289,"children":290},"Develop","/design-system/develop",[291,292,293,296],{"title":9,"_path":5,"layout":11},{"title":244,"_path":243,"layout":11},{"title":294,"_path":295,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":208,"_path":216,"children":297,"layout":11},[298,301,304,307,310],{"title":299,"_path":300,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":302,"_path":303,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":305,"_path":306,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":308,"_path":309,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":311,"_path":312,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":314,"_path":315,"children":316},"Styles","/design-system/styles",[317,320,323,326,329,332,335,338,341,344],{"title":318,"_path":319,"layout":11},"Colour","/design-system/styles/colour",{"title":321,"_path":322,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":324,"_path":325,"layout":11},"Grid","/design-system/styles/grid",{"title":327,"_path":328,"layout":11},"Icons","/design-system/styles/icons",{"title":330,"_path":331,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":333,"_path":334,"layout":11},"Layout","/design-system/styles/layout",{"title":336,"_path":337,"layout":11},"Logo","/design-system/styles/logo",{"title":339,"_path":340,"layout":11},"Motion","/design-system/styles/motion",{"title":342,"_path":343,"layout":11},"Spacing","/design-system/styles/spacing",{"title":345,"_path":346,"layout":11},"Typography","/design-system/styles/typography",{"title":348,"_path":349,"children":350},"Components","/design-system/components",[351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492],{"title":352,"_path":353,"layout":11},"Accordion","/design-system/components/accordion",{"title":355,"_path":356,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":358,"_path":359,"layout":11},"Alert","/design-system/components/alert",{"title":361,"_path":362,"layout":11},"Block quote","/design-system/components/block-quote",{"title":364,"_path":365,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":367,"_path":368,"layout":11},"Button","/design-system/components/button",{"title":370,"_path":371,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":373,"_path":374,"layout":11},"Callout","/design-system/components/callout",{"title":376,"_path":377,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":379,"_path":380,"layout":11},"Card","/design-system/components/card",{"title":382,"_path":383,"layout":11},"Carousel","/design-system/components/carousel",{"title":385,"_path":386,"layout":11},"Category grid","/design-system/components/category-grid",{"title":388,"_path":389,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":391,"_path":392,"layout":11},"Chip","/design-system/components/chip",{"title":394,"_path":395,"layout":11},"Contact us","/design-system/components/contact-us",{"title":397,"_path":398,"layout":11},"Date input","/design-system/components/date-input",{"title":400,"_path":401,"layout":11},"Detail list","/design-system/components/detail-list",{"title":403,"_path":404,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":406,"_path":407,"layout":11},"File","/design-system/components/file",{"title":409,"_path":410,"layout":11},"Footer","/design-system/components/footer",{"title":412,"_path":413,"layout":11},"Form alert","/design-system/components/form-alert",{"title":415,"_path":416,"layout":11},"Form","/design-system/components/form",{"title":418,"_path":419,"layout":11},"Header","/design-system/components/header",{"title":421,"_path":422,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":424,"_path":425,"layout":11},"Input field","/design-system/components/input-field",{"title":427,"_path":428,"layout":11},"Key dates","/design-system/components/key-dates",{"title":430,"_path":431,"layout":11},"Media embed","/design-system/components/media-embed",{"title":433,"_path":434,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":436,"_path":437,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":439,"_path":440,"layout":11},"Media","/design-system/components/media",{"title":442,"_path":443,"layout":11},"Option button","/design-system/components/option-button",{"title":445,"_path":446,"layout":11},"Page action","/design-system/components/page-action",{"title":448,"_path":449,"layout":11},"Pagination","/design-system/components/pagination",{"title":451,"_path":452,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":454,"_path":455,"layout":11},"Profile","/design-system/components/profile",{"title":457,"_path":458,"layout":11},"Radio button","/design-system/components/radio-button",{"title":460,"_path":461,"layout":11},"Related links","/design-system/components/related-links",{"title":463,"_path":464,"layout":11},"Results listing","/design-system/components/results-listing",{"title":466,"_path":467,"layout":11},"Search bar","/design-system/components/search-bar",{"title":469,"_path":470,"layout":11},"Skip link","/design-system/components/skip-link",{"title":472,"_path":473,"layout":11},"Social share","/design-system/components/social-share",{"title":475,"_path":476,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":478,"_path":479,"layout":11},"Table","/design-system/components/table",{"title":481,"_path":482,"layout":11},"Tabs","/design-system/components/tabs",{"title":484,"_path":485,"layout":11},"Tag","/design-system/components/tag",{"title":487,"_path":488,"layout":11},"Text area","/design-system/components/text-area",{"title":490,"_path":491,"layout":11},"Timeline","/design-system/components/timeline",{"title":493,"_path":494,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":496,"_path":115,"children":497,"layout":11},"Ripple Framework",[498,499,517,539],{"title":496,"_path":115,"layout":11},{"title":500,"_path":501,"children":502},"Key Concepts","/framework/key-concepts",[503,505,508,511,514],{"title":305,"_path":504,"layout":11},"/framework/key-concepts/nuxt",{"title":506,"_path":507,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":509,"_path":510,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":512,"_path":513,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":515,"_path":516,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":518,"_path":519,"children":520},"Guides","/framework/guides",[521,524,527,530,533,536],{"title":522,"_path":523,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":525,"_path":526,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":528,"_path":529,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":531,"_path":532,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":534,"_path":535,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":537,"_path":538,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":540,"_path":541,"layout":11},"Core modules","/framework/core-modules",["Reactive",543],{"module-navigation":238},true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> + rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Getting started</h1><p class="rpl-type-p-large" data-v-3163c6df>Information for developers using the Ripple 2 UI libraries</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://github.com/dpc-sdp/ripple-framework" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Github<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><li data-v-3163c6df><a href="/storybook" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Storybook<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:<!--]--></p><ul><!--[--><li><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code>: A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography.<!--]--></li><li><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code>: A collection of form inputs and support for building complex forms via <a href="https://formkit.com/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Formkit<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->These docs are for Ripple 2<!--]--></strong><!--]--></p><p><!--[-->Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the <a href="https://github.com/dpc-sdp/ripple" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->original Ripple GitHub repo<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--></blockquote><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->Are you developing a site on the SDP platform?<!--]--></strong><!--]--></p><p><!--[-->This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here.<!--]--></p><p><!--[-->For information about using Ripple in SDP sites, visit the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple Framework for SDP documentation<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 id="accessing-the-source-code"><a href="#accessing-the-source-code"><!--[-->Accessing the Source code<!--]--></a></h2><p><!--[-->Ripple 2 is an open source project and the source code can be found in the <a href="https://github.com/dpc-sdp/ripple-framework" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->ripple-framework monorepo on Github<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:<!--]--></p><ul><!--[--><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->View <code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code> on Github<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->View <code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code> on Github<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 id="viewing-examples-in-storybook"><a href="#viewing-examples-in-storybook"><!--[-->Viewing examples in Storybook<!--]--></a></h2><p><!--[-->The Ripple Storybook has information about props and slots that each Vue component supports. <a href="/storybook" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->View the Ripple storybook<!--]--><!--]--><!----><!--]--></a> to start exploring the available components.<!--]--></p><p><!--[-->Most of the examples found on this documentation site link directly examples in storybook.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 id="usage"><a href="#usage"><!--[-->Usage<!--]--></a></h2><p><!--[-->See the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->usage<!--]--><!--]--><!----><!--]--></a> guide for information about getting started with the different ways of implementing Ripple.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/1.getting-started.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/getting-started/_payload.json">[{"state":1,"_errors":542,"serverRendered":544,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":232,"$sdd-globals":248,"$sdd-navigation":249},{"/design-system/develop/getting-started":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"links":12,"body":19,"_type":227,"_id":228,"_source":229,"_file":230,"_extension":231},"/design-system/develop/getting-started","develop",false,"","Getting started","Information for developers using the Ripple 2 UI libraries","page",[13,16],{"text":14,"url":15},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":17,"url":18},"Storybook","/storybook",{"type":20,"children":21,"toc":221},"root",[22,30,65,92,119,126,138,143,176,182,194,199,203,209],{"type":23,"tag":24,"props":25,"children":26},"element","p",{},[27],{"type":28,"value":29},"text","This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:",{"type":23,"tag":31,"props":32,"children":33},"ul",{},[34,46],{"type":23,"tag":35,"props":36,"children":37},"li",{},[38,44],{"type":23,"tag":39,"props":40,"children":41},"code-inline",{},[42],{"type":28,"value":43},"ripple-ui-core",{"type":28,"value":45},": A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography.",{"type":23,"tag":35,"props":47,"children":48},{},[49,54,56],{"type":23,"tag":39,"props":50,"children":51},{},[52],{"type":28,"value":53},"ripple-ui-forms",{"type":28,"value":55},": A collection of form inputs and support for building complex forms via ",{"type":23,"tag":57,"props":58,"children":62},"a",{"href":59,"rel":60},"https://formkit.com/",[61],"nofollow",[63],{"type":28,"value":64},"Formkit",{"type":23,"tag":66,"props":67,"children":68},"blockquote",{},[69,78],{"type":23,"tag":24,"props":70,"children":71},{},[72],{"type":23,"tag":73,"props":74,"children":75},"strong",{},[76],{"type":28,"value":77},"These docs are for Ripple 2",{"type":23,"tag":24,"props":79,"children":80},{},[81,83,90],{"type":28,"value":82},"Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the ",{"type":23,"tag":57,"props":84,"children":87},{"href":85,"rel":86},"https://github.com/dpc-sdp/ripple",[61],[88],{"type":28,"value":89},"original Ripple GitHub repo",{"type":28,"value":91},".",{"type":23,"tag":66,"props":93,"children":94},{},[95,103,108],{"type":23,"tag":24,"props":96,"children":97},{},[98],{"type":23,"tag":73,"props":99,"children":100},{},[101],{"type":28,"value":102},"Are you developing a site on the SDP platform?",{"type":23,"tag":24,"props":104,"children":105},{},[106],{"type":28,"value":107},"This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here.",{"type":23,"tag":24,"props":109,"children":110},{},[111,113],{"type":28,"value":112},"For information about using Ripple in SDP sites, visit the ",{"type":23,"tag":57,"props":114,"children":116},{"href":115},"/framework",[117],{"type":28,"value":118},"Ripple Framework for SDP documentation",{"type":23,"tag":120,"props":121,"children":123},"h2",{"id":122},"accessing-the-source-code",[124],{"type":28,"value":125},"Accessing the Source code",{"type":23,"tag":24,"props":127,"children":128},{},[129,131,137],{"type":28,"value":130},"Ripple 2 is an open source project and the source code can be found in the ",{"type":23,"tag":57,"props":132,"children":134},{"href":15,"rel":133},[61],[135],{"type":28,"value":136},"ripple-framework monorepo on Github",{"type":28,"value":91},{"type":23,"tag":24,"props":139,"children":140},{},[141],{"type":28,"value":142},"This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:",{"type":23,"tag":31,"props":144,"children":145},{},[146,162],{"type":23,"tag":35,"props":147,"children":148},{},[149],{"type":23,"tag":57,"props":150,"children":153},{"href":151,"rel":152},"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core",[61],[154,156,160],{"type":28,"value":155},"View ",{"type":23,"tag":39,"props":157,"children":158},{},[159],{"type":28,"value":43},{"type":28,"value":161}," on Github",{"type":23,"tag":35,"props":163,"children":164},{},[165],{"type":23,"tag":57,"props":166,"children":169},{"href":167,"rel":168},"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms",[61],[170,171,175],{"type":28,"value":155},{"type":23,"tag":39,"props":172,"children":173},{},[174],{"type":28,"value":53},{"type":28,"value":161},{"type":23,"tag":120,"props":177,"children":179},{"id":178},"viewing-examples-in-storybook",[180],{"type":28,"value":181},"Viewing examples in Storybook",{"type":23,"tag":24,"props":183,"children":184},{},[185,187,192],{"type":28,"value":186},"The Ripple Storybook has information about props and slots that each Vue component supports. ",{"type":23,"tag":57,"props":188,"children":189},{"href":18},[190],{"type":28,"value":191},"View the Ripple storybook",{"type":28,"value":193}," to start exploring the available components.",{"type":23,"tag":24,"props":195,"children":196},{},[197],{"type":28,"value":198},"Most of the examples found on this documentation site link directly examples in storybook.",{"type":23,"tag":200,"props":201,"children":202},"hr",{},[],{"type":23,"tag":120,"props":204,"children":206},{"id":205},"usage",[207],{"type":28,"value":208},"Usage",{"type":23,"tag":24,"props":210,"children":211},{},[212,214,219],{"type":28,"value":213},"See the ",{"type":23,"tag":57,"props":215,"children":217},{"href":216},"/design-system/develop/usage",[218],{"type":28,"value":205},{"type":28,"value":220}," guide for information about getting started with the different ways of implementing Ripple.",{"title":8,"searchDepth":222,"depth":222,"links":223},2,[224,225,226],{"id":122,"depth":222,"text":125},{"id":178,"depth":222,"text":181},{"id":205,"depth":222,"text":208},"markdown","content:design-system:3.develop:1.getting-started.md","content","design-system/3.develop/1.getting-started.md","md",{"/design-system/develop/getting-started":233},[234,242],{"_path":235,"_dir":236,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":237,"description":238,"layout":11,"label":239,"_type":227,"_id":240,"_source":229,"_file":241,"_extension":231},"/design-system/design/theming-guidance-for-designers","design","Theming guidance for designers",null,"Core","content:design-system:2.design:4.theming-guidance-for-designers.md","design-system/2.design/4.theming-guidance-for-designers.md",{"_path":243,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":244,"description":245,"layout":11,"_type":227,"_id":246,"_source":229,"_file":247,"_extension":231},"/design-system/develop/contributing","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","content:design-system:3.develop:2.contributing.md","design-system/3.develop/2.contributing.md",{},[250,255,495],{"title":251,"_path":252,"icon":253,"layout":254},"Ripple Design System","/","carbon:home","home",{"title":256,"_path":257,"children":258},"Design System","/design-system",[259,274,287,313,347],{"title":260,"_path":261,"children":262},"About","/design-system/about",[263,266,269,272],{"title":264,"_path":265,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":267,"_path":268,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":270,"_path":271,"layout":11},"Support","/design-system/about/getting-support",{"title":244,"_path":273,"layout":11},"/design-system/about/contributing",{"title":275,"_path":276,"children":277},"Design","/design-system/design",[278,280,283,286],{"title":9,"_path":279,"layout":11},"/design-system/design/getting-started",{"title":281,"_path":282,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":284,"_path":285,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":237,"_path":235,"layout":11},{"title":288,"_path":289,"children":290},"Develop","/design-system/develop",[291,292,293,296],{"title":9,"_path":5,"layout":11},{"title":244,"_path":243,"layout":11},{"title":294,"_path":295,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":208,"_path":216,"children":297,"layout":11},[298,301,304,307,310],{"title":299,"_path":300,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":302,"_path":303,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":305,"_path":306,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":308,"_path":309,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":311,"_path":312,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":314,"_path":315,"children":316},"Styles","/design-system/styles",[317,320,323,326,329,332,335,338,341,344],{"title":318,"_path":319,"layout":11},"Colour","/design-system/styles/colour",{"title":321,"_path":322,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":324,"_path":325,"layout":11},"Grid","/design-system/styles/grid",{"title":327,"_path":328,"layout":11},"Icons","/design-system/styles/icons",{"title":330,"_path":331,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":333,"_path":334,"layout":11},"Layout","/design-system/styles/layout",{"title":336,"_path":337,"layout":11},"Logo","/design-system/styles/logo",{"title":339,"_path":340,"layout":11},"Motion","/design-system/styles/motion",{"title":342,"_path":343,"layout":11},"Spacing","/design-system/styles/spacing",{"title":345,"_path":346,"layout":11},"Typography","/design-system/styles/typography",{"title":348,"_path":349,"children":350},"Components","/design-system/components",[351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492],{"title":352,"_path":353,"layout":11},"Accordion","/design-system/components/accordion",{"title":355,"_path":356,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":358,"_path":359,"layout":11},"Alert","/design-system/components/alert",{"title":361,"_path":362,"layout":11},"Block quote","/design-system/components/block-quote",{"title":364,"_path":365,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":367,"_path":368,"layout":11},"Button","/design-system/components/button",{"title":370,"_path":371,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":373,"_path":374,"layout":11},"Callout","/design-system/components/callout",{"title":376,"_path":377,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":379,"_path":380,"layout":11},"Card","/design-system/components/card",{"title":382,"_path":383,"layout":11},"Carousel","/design-system/components/carousel",{"title":385,"_path":386,"layout":11},"Category grid","/design-system/components/category-grid",{"title":388,"_path":389,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":391,"_path":392,"layout":11},"Chip","/design-system/components/chip",{"title":394,"_path":395,"layout":11},"Contact us","/design-system/components/contact-us",{"title":397,"_path":398,"layout":11},"Date input","/design-system/components/date-input",{"title":400,"_path":401,"layout":11},"Detail list","/design-system/components/detail-list",{"title":403,"_path":404,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":406,"_path":407,"layout":11},"File","/design-system/components/file",{"title":409,"_path":410,"layout":11},"Footer","/design-system/components/footer",{"title":412,"_path":413,"layout":11},"Form alert","/design-system/components/form-alert",{"title":415,"_path":416,"layout":11},"Form","/design-system/components/form",{"title":418,"_path":419,"layout":11},"Header","/design-system/components/header",{"title":421,"_path":422,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":424,"_path":425,"layout":11},"Input field","/design-system/components/input-field",{"title":427,"_path":428,"layout":11},"Key dates","/design-system/components/key-dates",{"title":430,"_path":431,"layout":11},"Media embed","/design-system/components/media-embed",{"title":433,"_path":434,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":436,"_path":437,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":439,"_path":440,"layout":11},"Media","/design-system/components/media",{"title":442,"_path":443,"layout":11},"Option button","/design-system/components/option-button",{"title":445,"_path":446,"layout":11},"Page action","/design-system/components/page-action",{"title":448,"_path":449,"layout":11},"Pagination","/design-system/components/pagination",{"title":451,"_path":452,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":454,"_path":455,"layout":11},"Profile","/design-system/components/profile",{"title":457,"_path":458,"layout":11},"Radio button","/design-system/components/radio-button",{"title":460,"_path":461,"layout":11},"Related links","/design-system/components/related-links",{"title":463,"_path":464,"layout":11},"Results listing","/design-system/components/results-listing",{"title":466,"_path":467,"layout":11},"Search bar","/design-system/components/search-bar",{"title":469,"_path":470,"layout":11},"Skip link","/design-system/components/skip-link",{"title":472,"_path":473,"layout":11},"Social share","/design-system/components/social-share",{"title":475,"_path":476,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":478,"_path":479,"layout":11},"Table","/design-system/components/table",{"title":481,"_path":482,"layout":11},"Tabs","/design-system/components/tabs",{"title":484,"_path":485,"layout":11},"Tag","/design-system/components/tag",{"title":487,"_path":488,"layout":11},"Text area","/design-system/components/text-area",{"title":490,"_path":491,"layout":11},"Timeline","/design-system/components/timeline",{"title":493,"_path":494,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":496,"_path":115,"children":497,"layout":11},"Ripple Framework",[498,499,517,539],{"title":496,"_path":115,"layout":11},{"title":500,"_path":501,"children":502},"Key Concepts","/framework/key-concepts",[503,505,508,511,514],{"title":305,"_path":504,"layout":11},"/framework/key-concepts/nuxt",{"title":506,"_path":507,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":509,"_path":510,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":512,"_path":513,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":515,"_path":516,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":518,"_path":519,"children":520},"Guides","/framework/guides",[521,524,527,530,533,536],{"title":522,"_path":523,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":525,"_path":526,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":528,"_path":529,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":531,"_path":532,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":534,"_path":535,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":537,"_path":538,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":540,"_path":541,"layout":11},"Core modules","/framework/core-modules",["Reactive",543],{"module-navigation":238},true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/develop/theming/index.html b/design-system/develop/theming/index.html index d53ade5e8c..4a3f152050 100644 --- a/design-system/develop/theming/index.html +++ b/design-system/develop/theming/index.html @@ -28,7 +28,7 @@ </span></span><span class="line" line="2"><span class="ct-996368"> </span><span class="ct-082380">--rpl-clr-primary</span><span class="ct-996368">: </span><span class="ct-109545">#6B19A3</span><span class="ct-996368">; </span></span><span class="line" line="3"><span class="ct-996368">}</span></span></code></pre><!--]--></div><p><!--[-->See the <a href="/design-system/styles/colour" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->colour<!--]--><!--]--><!----><!--]--></a> page for a list of theme-able colours.<!--]--></p><h2 id="assets"><a href="#assets"><!--[-->Assets<!--]--></a></h2><p><!--[-->Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand.<!--]--></p><p><!--[-->See the following components for guidance on providing graphic elements to theme your site:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/styles/logo" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Logos<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/header" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Header<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 id="brand-application-in-sdp-sites"><a href="#brand-application-in-sdp-sites"><!--[-->Brand application in SDP sites<!--]--></a></h2><p><!--[-->See the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->SDP Ripple framework<!--]--><!--]--><!----><!--]--></a> section for more information on customising SDP websites and applying brand.<!--]--></p><style>.ct-109545{color:#0550AE;} .ct-996368{color:#24292F;} -.ct-082380{color:#953800;}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/2.theming.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/theming/_payload.json">[{"state":1,"_errors":540,"serverRendered":543,"path":544,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":228,"$sdd-globals":249,"$sdd-navigation":250},{"/design-system/develop/theming":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":223,"_id":224,"_source":225,"_file":226,"_extension":227},"/design-system/develop/theming","develop",false,"","Theme and brand application","Information for developers using Ripple 2 UI libraries","page",{"type":13,"children":14,"toc":217},"root",[15,30,37,52,58,71,142,155,161,166,171,194,200,212],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20,23],{"type":21,"value":22},"text","Ripple allows for customisation of it's components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the ",{"type":16,"tag":24,"props":25,"children":27},"a",{"href":26},"/design-system/design/theming-guidance-for-designers",[28],{"type":21,"value":29},"theming guidance for designers",{"type":16,"tag":31,"props":32,"children":34},"h2",{"id":33},"css-variables",[35],{"type":21,"value":36},"CSS Variables",{"type":16,"tag":17,"props":38,"children":39},{},[40,42,50],{"type":21,"value":41},"Ripple is fully theme-able using ",{"type":16,"tag":24,"props":43,"children":47},{"href":44,"rel":45},"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",[46],"nofollow",[48],{"type":21,"value":49},"CSS variables",{"type":21,"value":51},", this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site.",{"type":16,"tag":31,"props":53,"children":55},{"id":54},"example",[56],{"type":21,"value":57},"Example",{"type":16,"tag":17,"props":59,"children":60},{},[61,63,69],{"type":21,"value":62},"To override theme values, simply set the css variable at ",{"type":16,"tag":64,"props":65,"children":66},"code-inline",{},[67],{"type":21,"value":68},":root",{"type":21,"value":70}," or an element that wraps elements you want to theme.",{"type":16,"tag":72,"props":73,"children":78},"code",{"className":74,"code":76,"language":77,"meta":8},[75],"language-css",":root {\n --rpl-clr-primary: #6B19A3;\n}\n","css",[79],{"type":16,"tag":80,"props":81,"children":82},"pre",{},[83],{"type":16,"tag":72,"props":84,"children":85},{"__ignoreMap":8},[86,103,133],{"type":16,"tag":87,"props":88,"children":91},"span",{"class":89,"line":90},"line",1,[92,97],{"type":16,"tag":87,"props":93,"children":95},{"class":94},"ct-109545",[96],{"type":21,"value":68},{"type":16,"tag":87,"props":98,"children":100},{"class":99},"ct-996368",[101],{"type":21,"value":102}," {\n",{"type":16,"tag":87,"props":104,"children":106},{"class":89,"line":105},2,[107,112,118,123,128],{"type":16,"tag":87,"props":108,"children":109},{"class":99},[110],{"type":21,"value":111}," ",{"type":16,"tag":87,"props":113,"children":115},{"class":114},"ct-082380",[116],{"type":21,"value":117},"--rpl-clr-primary",{"type":16,"tag":87,"props":119,"children":120},{"class":99},[121],{"type":21,"value":122},": ",{"type":16,"tag":87,"props":124,"children":125},{"class":94},[126],{"type":21,"value":127},"#6B19A3",{"type":16,"tag":87,"props":129,"children":130},{"class":99},[131],{"type":21,"value":132},";\n",{"type":16,"tag":87,"props":134,"children":136},{"class":89,"line":135},3,[137],{"type":16,"tag":87,"props":138,"children":139},{"class":99},[140],{"type":21,"value":141},"}",{"type":16,"tag":17,"props":143,"children":144},{},[145,147,153],{"type":21,"value":146},"See the ",{"type":16,"tag":24,"props":148,"children":150},{"href":149},"/design-system/styles/colour",[151],{"type":21,"value":152},"colour",{"type":21,"value":154}," page for a list of theme-able colours.",{"type":16,"tag":31,"props":156,"children":158},{"id":157},"assets",[159],{"type":21,"value":160},"Assets",{"type":16,"tag":17,"props":162,"children":163},{},[164],{"type":21,"value":165},"Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand.",{"type":16,"tag":17,"props":167,"children":168},{},[169],{"type":21,"value":170},"See the following components for guidance on providing graphic elements to theme your site:",{"type":16,"tag":172,"props":173,"children":174},"ul",{},[175,185],{"type":16,"tag":176,"props":177,"children":178},"li",{},[179],{"type":16,"tag":24,"props":180,"children":182},{"href":181},"/design-system/styles/logo",[183],{"type":21,"value":184},"Logos",{"type":16,"tag":176,"props":186,"children":187},{},[188],{"type":16,"tag":24,"props":189,"children":191},{"href":190},"/design-system/components/header",[192],{"type":21,"value":193},"Header",{"type":16,"tag":31,"props":195,"children":197},{"id":196},"brand-application-in-sdp-sites",[198],{"type":21,"value":199},"Brand application in SDP sites",{"type":16,"tag":17,"props":201,"children":202},{},[203,204,210],{"type":21,"value":146},{"type":16,"tag":24,"props":205,"children":207},{"href":206},"/framework",[208],{"type":21,"value":209},"SDP Ripple framework",{"type":21,"value":211}," section for more information on customising SDP websites and applying brand.",{"type":16,"tag":213,"children":214},"style",[215],{"type":21,"value":216},".ct-109545{color:#0550AE;}\n.ct-996368{color:#24292F;}\n.ct-082380{color:#953800;}",{"title":8,"searchDepth":105,"depth":105,"links":218},[219,220,221,222],{"id":33,"depth":105,"text":36},{"id":54,"depth":105,"text":57},{"id":157,"depth":105,"text":160},{"id":196,"depth":105,"text":199},"markdown","content:design-system:3.develop:2.theming.md","content","design-system/3.develop/2.theming.md","md",{"/design-system/develop/theming":229},[230,236],{"_path":231,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":232,"description":233,"layout":11,"_type":223,"_id":234,"_source":225,"_file":235,"_extension":227},"/design-system/develop/contributing","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","content:design-system:3.develop:2.contributing.md","design-system/3.develop/2.contributing.md",{"_path":237,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":238,"description":239,"layout":11,"links":240,"_type":223,"_id":247,"_source":225,"_file":248,"_extension":227},"/design-system/develop/usage","Usage","Ripple components can be used in several different ways depending on your project needs.",[241,244],{"text":242,"url":243},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":245,"url":246},"Storybook","/storybook","content:design-system:3.develop:3.usage.md","design-system/3.develop/3.usage.md",{},[251,256,493],{"title":252,"_path":253,"icon":254,"layout":255},"Ripple Design System","/","carbon:home","home",{"title":257,"_path":258,"children":259},"Design System","/design-system",[260,275,290,315,347],{"title":261,"_path":262,"children":263},"About","/design-system/about",[264,267,270,273],{"title":265,"_path":266,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":268,"_path":269,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":271,"_path":272,"layout":11},"Support","/design-system/about/getting-support",{"title":232,"_path":274,"layout":11},"/design-system/about/contributing",{"title":276,"_path":277,"children":278},"Design","/design-system/design",[279,282,285,288],{"title":280,"_path":281,"layout":11},"Getting started","/design-system/design/getting-started",{"title":283,"_path":284,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":286,"_path":287,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":289,"_path":26,"layout":11},"Theming guidance for designers",{"title":291,"_path":292,"children":293},"Develop","/design-system/develop",[294,296,297,298],{"title":280,"_path":295,"layout":11},"/design-system/develop/getting-started",{"title":232,"_path":231,"layout":11},{"title":9,"_path":5,"layout":11},{"title":238,"_path":237,"children":299,"layout":11},[300,303,306,309,312],{"title":301,"_path":302,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":304,"_path":305,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":307,"_path":308,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":310,"_path":311,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":313,"_path":314,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":316,"_path":317,"children":318},"Styles","/design-system/styles",[319,321,324,327,330,333,336,338,341,344],{"title":320,"_path":149,"layout":11},"Colour",{"title":322,"_path":323,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":325,"_path":326,"layout":11},"Grid","/design-system/styles/grid",{"title":328,"_path":329,"layout":11},"Icons","/design-system/styles/icons",{"title":331,"_path":332,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":334,"_path":335,"layout":11},"Layout","/design-system/styles/layout",{"title":337,"_path":181,"layout":11},"Logo",{"title":339,"_path":340,"layout":11},"Motion","/design-system/styles/motion",{"title":342,"_path":343,"layout":11},"Spacing","/design-system/styles/spacing",{"title":345,"_path":346,"layout":11},"Typography","/design-system/styles/typography",{"title":348,"_path":349,"children":350},"Components","/design-system/components",[351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490],{"title":352,"_path":353,"layout":11},"Accordion","/design-system/components/accordion",{"title":355,"_path":356,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":358,"_path":359,"layout":11},"Alert","/design-system/components/alert",{"title":361,"_path":362,"layout":11},"Block quote","/design-system/components/block-quote",{"title":364,"_path":365,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":367,"_path":368,"layout":11},"Button","/design-system/components/button",{"title":370,"_path":371,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":373,"_path":374,"layout":11},"Callout","/design-system/components/callout",{"title":376,"_path":377,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":379,"_path":380,"layout":11},"Card","/design-system/components/card",{"title":382,"_path":383,"layout":11},"Carousel","/design-system/components/carousel",{"title":385,"_path":386,"layout":11},"Category grid","/design-system/components/category-grid",{"title":388,"_path":389,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":391,"_path":392,"layout":11},"Chip","/design-system/components/chip",{"title":394,"_path":395,"layout":11},"Contact us","/design-system/components/contact-us",{"title":397,"_path":398,"layout":11},"Date input","/design-system/components/date-input",{"title":400,"_path":401,"layout":11},"Detail list","/design-system/components/detail-list",{"title":403,"_path":404,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":406,"_path":407,"layout":11},"File","/design-system/components/file",{"title":409,"_path":410,"layout":11},"Footer","/design-system/components/footer",{"title":412,"_path":413,"layout":11},"Form alert","/design-system/components/form-alert",{"title":415,"_path":416,"layout":11},"Form","/design-system/components/form",{"title":193,"_path":190,"layout":11},{"title":419,"_path":420,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":422,"_path":423,"layout":11},"Input field","/design-system/components/input-field",{"title":425,"_path":426,"layout":11},"Key dates","/design-system/components/key-dates",{"title":428,"_path":429,"layout":11},"Media embed","/design-system/components/media-embed",{"title":431,"_path":432,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":434,"_path":435,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":437,"_path":438,"layout":11},"Media","/design-system/components/media",{"title":440,"_path":441,"layout":11},"Option button","/design-system/components/option-button",{"title":443,"_path":444,"layout":11},"Page action","/design-system/components/page-action",{"title":446,"_path":447,"layout":11},"Pagination","/design-system/components/pagination",{"title":449,"_path":450,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":452,"_path":453,"layout":11},"Profile","/design-system/components/profile",{"title":455,"_path":456,"layout":11},"Radio button","/design-system/components/radio-button",{"title":458,"_path":459,"layout":11},"Related links","/design-system/components/related-links",{"title":461,"_path":462,"layout":11},"Results listing","/design-system/components/results-listing",{"title":464,"_path":465,"layout":11},"Search bar","/design-system/components/search-bar",{"title":467,"_path":468,"layout":11},"Skip link","/design-system/components/skip-link",{"title":470,"_path":471,"layout":11},"Social share","/design-system/components/social-share",{"title":473,"_path":474,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":476,"_path":477,"layout":11},"Table","/design-system/components/table",{"title":479,"_path":480,"layout":11},"Tabs","/design-system/components/tabs",{"title":482,"_path":483,"layout":11},"Tag","/design-system/components/tag",{"title":485,"_path":486,"layout":11},"Text area","/design-system/components/text-area",{"title":488,"_path":489,"layout":11},"Timeline","/design-system/components/timeline",{"title":491,"_path":492,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":494,"_path":206,"children":495,"layout":11},"Ripple Framework",[496,497,515,537],{"title":494,"_path":206,"layout":11},{"title":498,"_path":499,"children":500},"Key Concepts","/framework/key-concepts",[501,503,506,509,512],{"title":307,"_path":502,"layout":11},"/framework/key-concepts/nuxt",{"title":504,"_path":505,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":507,"_path":508,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":510,"_path":511,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":513,"_path":514,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":516,"_path":517,"children":518},"Guides","/framework/guides",[519,522,525,528,531,534],{"title":520,"_path":521,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":523,"_path":524,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":526,"_path":527,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":529,"_path":530,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":532,"_path":533,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":535,"_path":536,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":538,"_path":539,"layout":11},"Core modules","/framework/core-modules",["Reactive",541],{"module-navigation":542},null,true,"/design-system/develop/theming/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> +.ct-082380{color:#953800;}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/2.theming.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/theming/_payload.json">[{"state":1,"_errors":540,"serverRendered":543,"path":544,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":228,"$sdd-globals":249,"$sdd-navigation":250},{"/design-system/develop/theming":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":223,"_id":224,"_source":225,"_file":226,"_extension":227},"/design-system/develop/theming","develop",false,"","Theme and brand application","Information for developers using Ripple 2 UI libraries","page",{"type":13,"children":14,"toc":217},"root",[15,30,37,52,58,71,142,155,161,166,171,194,200,212],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20,23],{"type":21,"value":22},"text","Ripple allows for customisation of it's components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the ",{"type":16,"tag":24,"props":25,"children":27},"a",{"href":26},"/design-system/design/theming-guidance-for-designers",[28],{"type":21,"value":29},"theming guidance for designers",{"type":16,"tag":31,"props":32,"children":34},"h2",{"id":33},"css-variables",[35],{"type":21,"value":36},"CSS Variables",{"type":16,"tag":17,"props":38,"children":39},{},[40,42,50],{"type":21,"value":41},"Ripple is fully theme-able using ",{"type":16,"tag":24,"props":43,"children":47},{"href":44,"rel":45},"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",[46],"nofollow",[48],{"type":21,"value":49},"CSS variables",{"type":21,"value":51},", this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site.",{"type":16,"tag":31,"props":53,"children":55},{"id":54},"example",[56],{"type":21,"value":57},"Example",{"type":16,"tag":17,"props":59,"children":60},{},[61,63,69],{"type":21,"value":62},"To override theme values, simply set the css variable at ",{"type":16,"tag":64,"props":65,"children":66},"code-inline",{},[67],{"type":21,"value":68},":root",{"type":21,"value":70}," or an element that wraps elements you want to theme.",{"type":16,"tag":72,"props":73,"children":78},"code",{"className":74,"code":76,"language":77,"meta":8},[75],"language-css",":root {\n --rpl-clr-primary: #6B19A3;\n}\n","css",[79],{"type":16,"tag":80,"props":81,"children":82},"pre",{},[83],{"type":16,"tag":72,"props":84,"children":85},{"__ignoreMap":8},[86,103,133],{"type":16,"tag":87,"props":88,"children":91},"span",{"class":89,"line":90},"line",1,[92,97],{"type":16,"tag":87,"props":93,"children":95},{"class":94},"ct-109545",[96],{"type":21,"value":68},{"type":16,"tag":87,"props":98,"children":100},{"class":99},"ct-996368",[101],{"type":21,"value":102}," {\n",{"type":16,"tag":87,"props":104,"children":106},{"class":89,"line":105},2,[107,112,118,123,128],{"type":16,"tag":87,"props":108,"children":109},{"class":99},[110],{"type":21,"value":111}," ",{"type":16,"tag":87,"props":113,"children":115},{"class":114},"ct-082380",[116],{"type":21,"value":117},"--rpl-clr-primary",{"type":16,"tag":87,"props":119,"children":120},{"class":99},[121],{"type":21,"value":122},": ",{"type":16,"tag":87,"props":124,"children":125},{"class":94},[126],{"type":21,"value":127},"#6B19A3",{"type":16,"tag":87,"props":129,"children":130},{"class":99},[131],{"type":21,"value":132},";\n",{"type":16,"tag":87,"props":134,"children":136},{"class":89,"line":135},3,[137],{"type":16,"tag":87,"props":138,"children":139},{"class":99},[140],{"type":21,"value":141},"}",{"type":16,"tag":17,"props":143,"children":144},{},[145,147,153],{"type":21,"value":146},"See the ",{"type":16,"tag":24,"props":148,"children":150},{"href":149},"/design-system/styles/colour",[151],{"type":21,"value":152},"colour",{"type":21,"value":154}," page for a list of theme-able colours.",{"type":16,"tag":31,"props":156,"children":158},{"id":157},"assets",[159],{"type":21,"value":160},"Assets",{"type":16,"tag":17,"props":162,"children":163},{},[164],{"type":21,"value":165},"Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand.",{"type":16,"tag":17,"props":167,"children":168},{},[169],{"type":21,"value":170},"See the following components for guidance on providing graphic elements to theme your site:",{"type":16,"tag":172,"props":173,"children":174},"ul",{},[175,185],{"type":16,"tag":176,"props":177,"children":178},"li",{},[179],{"type":16,"tag":24,"props":180,"children":182},{"href":181},"/design-system/styles/logo",[183],{"type":21,"value":184},"Logos",{"type":16,"tag":176,"props":186,"children":187},{},[188],{"type":16,"tag":24,"props":189,"children":191},{"href":190},"/design-system/components/header",[192],{"type":21,"value":193},"Header",{"type":16,"tag":31,"props":195,"children":197},{"id":196},"brand-application-in-sdp-sites",[198],{"type":21,"value":199},"Brand application in SDP sites",{"type":16,"tag":17,"props":201,"children":202},{},[203,204,210],{"type":21,"value":146},{"type":16,"tag":24,"props":205,"children":207},{"href":206},"/framework",[208],{"type":21,"value":209},"SDP Ripple framework",{"type":21,"value":211}," section for more information on customising SDP websites and applying brand.",{"type":16,"tag":213,"children":214},"style",[215],{"type":21,"value":216},".ct-109545{color:#0550AE;}\n.ct-996368{color:#24292F;}\n.ct-082380{color:#953800;}",{"title":8,"searchDepth":105,"depth":105,"links":218},[219,220,221,222],{"id":33,"depth":105,"text":36},{"id":54,"depth":105,"text":57},{"id":157,"depth":105,"text":160},{"id":196,"depth":105,"text":199},"markdown","content:design-system:3.develop:2.theming.md","content","design-system/3.develop/2.theming.md","md",{"/design-system/develop/theming":229},[230,236],{"_path":231,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":232,"description":233,"layout":11,"_type":223,"_id":234,"_source":225,"_file":235,"_extension":227},"/design-system/develop/contributing","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","content:design-system:3.develop:2.contributing.md","design-system/3.develop/2.contributing.md",{"_path":237,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":238,"description":239,"layout":11,"links":240,"_type":223,"_id":247,"_source":225,"_file":248,"_extension":227},"/design-system/develop/usage","Usage","Ripple components can be used in several different ways depending on your project needs.",[241,244],{"text":242,"url":243},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":245,"url":246},"Storybook","/storybook","content:design-system:3.develop:3.usage.md","design-system/3.develop/3.usage.md",{},[251,256,493],{"title":252,"_path":253,"icon":254,"layout":255},"Ripple Design System","/","carbon:home","home",{"title":257,"_path":258,"children":259},"Design System","/design-system",[260,275,290,315,347],{"title":261,"_path":262,"children":263},"About","/design-system/about",[264,267,270,273],{"title":265,"_path":266,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":268,"_path":269,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":271,"_path":272,"layout":11},"Support","/design-system/about/getting-support",{"title":232,"_path":274,"layout":11},"/design-system/about/contributing",{"title":276,"_path":277,"children":278},"Design","/design-system/design",[279,282,285,288],{"title":280,"_path":281,"layout":11},"Getting started","/design-system/design/getting-started",{"title":283,"_path":284,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":286,"_path":287,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":289,"_path":26,"layout":11},"Theming guidance for designers",{"title":291,"_path":292,"children":293},"Develop","/design-system/develop",[294,296,297,298],{"title":280,"_path":295,"layout":11},"/design-system/develop/getting-started",{"title":232,"_path":231,"layout":11},{"title":9,"_path":5,"layout":11},{"title":238,"_path":237,"children":299,"layout":11},[300,303,306,309,312],{"title":301,"_path":302,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":304,"_path":305,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":307,"_path":308,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":310,"_path":311,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":313,"_path":314,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":316,"_path":317,"children":318},"Styles","/design-system/styles",[319,321,324,327,330,333,336,338,341,344],{"title":320,"_path":149,"layout":11},"Colour",{"title":322,"_path":323,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":325,"_path":326,"layout":11},"Grid","/design-system/styles/grid",{"title":328,"_path":329,"layout":11},"Icons","/design-system/styles/icons",{"title":331,"_path":332,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":334,"_path":335,"layout":11},"Layout","/design-system/styles/layout",{"title":337,"_path":181,"layout":11},"Logo",{"title":339,"_path":340,"layout":11},"Motion","/design-system/styles/motion",{"title":342,"_path":343,"layout":11},"Spacing","/design-system/styles/spacing",{"title":345,"_path":346,"layout":11},"Typography","/design-system/styles/typography",{"title":348,"_path":349,"children":350},"Components","/design-system/components",[351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490],{"title":352,"_path":353,"layout":11},"Accordion","/design-system/components/accordion",{"title":355,"_path":356,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":358,"_path":359,"layout":11},"Alert","/design-system/components/alert",{"title":361,"_path":362,"layout":11},"Block quote","/design-system/components/block-quote",{"title":364,"_path":365,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":367,"_path":368,"layout":11},"Button","/design-system/components/button",{"title":370,"_path":371,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":373,"_path":374,"layout":11},"Callout","/design-system/components/callout",{"title":376,"_path":377,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":379,"_path":380,"layout":11},"Card","/design-system/components/card",{"title":382,"_path":383,"layout":11},"Carousel","/design-system/components/carousel",{"title":385,"_path":386,"layout":11},"Category grid","/design-system/components/category-grid",{"title":388,"_path":389,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":391,"_path":392,"layout":11},"Chip","/design-system/components/chip",{"title":394,"_path":395,"layout":11},"Contact us","/design-system/components/contact-us",{"title":397,"_path":398,"layout":11},"Date input","/design-system/components/date-input",{"title":400,"_path":401,"layout":11},"Detail list","/design-system/components/detail-list",{"title":403,"_path":404,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":406,"_path":407,"layout":11},"File","/design-system/components/file",{"title":409,"_path":410,"layout":11},"Footer","/design-system/components/footer",{"title":412,"_path":413,"layout":11},"Form alert","/design-system/components/form-alert",{"title":415,"_path":416,"layout":11},"Form","/design-system/components/form",{"title":193,"_path":190,"layout":11},{"title":419,"_path":420,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":422,"_path":423,"layout":11},"Input field","/design-system/components/input-field",{"title":425,"_path":426,"layout":11},"Key dates","/design-system/components/key-dates",{"title":428,"_path":429,"layout":11},"Media embed","/design-system/components/media-embed",{"title":431,"_path":432,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":434,"_path":435,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":437,"_path":438,"layout":11},"Media","/design-system/components/media",{"title":440,"_path":441,"layout":11},"Option button","/design-system/components/option-button",{"title":443,"_path":444,"layout":11},"Page action","/design-system/components/page-action",{"title":446,"_path":447,"layout":11},"Pagination","/design-system/components/pagination",{"title":449,"_path":450,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":452,"_path":453,"layout":11},"Profile","/design-system/components/profile",{"title":455,"_path":456,"layout":11},"Radio button","/design-system/components/radio-button",{"title":458,"_path":459,"layout":11},"Related links","/design-system/components/related-links",{"title":461,"_path":462,"layout":11},"Results listing","/design-system/components/results-listing",{"title":464,"_path":465,"layout":11},"Search bar","/design-system/components/search-bar",{"title":467,"_path":468,"layout":11},"Skip link","/design-system/components/skip-link",{"title":470,"_path":471,"layout":11},"Social share","/design-system/components/social-share",{"title":473,"_path":474,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":476,"_path":477,"layout":11},"Table","/design-system/components/table",{"title":479,"_path":480,"layout":11},"Tabs","/design-system/components/tabs",{"title":482,"_path":483,"layout":11},"Tag","/design-system/components/tag",{"title":485,"_path":486,"layout":11},"Text area","/design-system/components/text-area",{"title":488,"_path":489,"layout":11},"Timeline","/design-system/components/timeline",{"title":491,"_path":492,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":494,"_path":206,"children":495,"layout":11},"Ripple Framework",[496,497,515,537],{"title":494,"_path":206,"layout":11},{"title":498,"_path":499,"children":500},"Key Concepts","/framework/key-concepts",[501,503,506,509,512],{"title":307,"_path":502,"layout":11},"/framework/key-concepts/nuxt",{"title":504,"_path":505,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":507,"_path":508,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":510,"_path":511,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":513,"_path":514,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":516,"_path":517,"children":518},"Guides","/framework/guides",[519,522,525,528,531,534],{"title":520,"_path":521,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":523,"_path":524,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":526,"_path":527,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":529,"_path":530,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":532,"_path":533,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":535,"_path":536,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":538,"_path":539,"layout":11},"Core modules","/framework/core-modules",["Reactive",541],{"module-navigation":542},null,true,"/design-system/develop/theming/"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/develop/usage/access-to-github-packages/index.html b/design-system/develop/usage/access-to-github-packages/index.html index afe3bd7435..9632086742 100644 --- a/design-system/develop/usage/access-to-github-packages/index.html +++ b/design-system/develop/usage/access-to-github-packages/index.html @@ -25,7 +25,7 @@ rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Access to Github Packages</h1><p class="rpl-type-p-large" data-v-3163c6df>How to access and use repos hosted on Github Packages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->NPM allows the use of multiple repo hosts, as long as they can be identified by namespace.<!--]--></p><p><!--[-->Ripple 2 is hosted publicly on Github Packages (ghcr) under the <strong><!--[-->@dpc/sdp<!--]--></strong> namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem.<!--]--></p><p><!--[-->First, create a Personal Access Token on Github:<!--]--></p><ol><!--[--><li><!--[-->Visit <a href="https://github.com/settings/tokens" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://github.com/settings/tokens<!--]--><!--]--><!----><!--]--></a> and select <strong><!--[-->Generate new token<!--]--></strong> > <strong><!--[-->Generate new token (classic)<!--]--></strong><!--]--></li><!--]--></ol><figure class="docs-example" style="width:360px;" data-v-442f4b84><div class="docs-example-body" data-v-442f4b84><img src="/img/generate.jpg" alt="Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic" data-v-442f4b84></div><!----></figure><ol start="2"><!--[--><li><!--[-->Fill in the <strong><!--[-->Note<!--]--></strong> and choose an <strong><!--[-->Expiration<!--]--></strong> - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry<!--]--></li><!--]--></ol><figure class="docs-example" style="width:505px;" data-v-442f4b84><div class="docs-example-body" data-v-442f4b84><img src="/img/token.jpg" alt="Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days" data-v-442f4b84></div><!----></figure><ol start="3"><!--[--><li><!--[-->Set the scope to only allow <code class="docs-code-inline" data-v-2e6046ca><!--[-->read:packages<!--]--></code>, and <strong><!--[-->Generate<!--]--></strong> token<!--]--></li><!--]--></ol><figure class="docs-example" style="width:827px;" data-v-442f4b84><div class="docs-example-body" data-v-442f4b84><img src="/img/permissions.jpg" alt="Screenshot of scope, with only read:packages selected" data-v-442f4b84></div><!----></figure><ol start="4"><!--[--><li><!--[-->Store the resulting token somewhere secure, and add it to either a user <code class="docs-code-inline" data-v-2e6046ca><!--[-->.npmrc<!--]--></code> (recommended) or the project-level <code class="docs-code-inline" data-v-2e6046ca><!--[-->.npmrc<!--]--></code> (the url on line 2 below is protocol-less, not a comment):<!--]--></li><!--]--></ol><div class="docs-code-block language-undefined" data-v-efa4b2dc><!--[--><pre><code><span class="line" line="1"><span>@dpc-sdp:registry=https://npm.pkg.github.com -</span></span><span class="line" line="2"><span>//npm.pkg.github.com/:_authToken=<github personal access token></span></span></code></pre><!--]--></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/1.access-to-github-packages.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/access-to-github-packages/_payload.json">[{"state":1,"_errors":520,"serverRendered":523,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":201,"$sdd-globals":223,"$sdd-navigation":224},{"/design-system/develop/usage/access-to-github-packages":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":196,"_id":197,"_source":198,"_file":199,"_extension":200},"/design-system/develop/usage/access-to-github-packages","usage",false,"","Access to Github Packages","How to access and use repos hosted on Github Packages.","page",{"type":13,"children":14,"toc":194},"root",[15,23,36,41,73,80,103,109,133,139,161],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":22},"text","NPM allows the use of multiple repo hosts, as long as they can be identified by namespace.",{"type":16,"tag":17,"props":24,"children":25},{},[26,28,34],{"type":21,"value":27},"Ripple 2 is hosted publicly on Github Packages (ghcr) under the ",{"type":16,"tag":29,"props":30,"children":31},"strong",{},[32],{"type":21,"value":33},"@dpc/sdp",{"type":21,"value":35}," namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem.",{"type":16,"tag":17,"props":37,"children":38},{},[39],{"type":21,"value":40},"First, create a Personal Access Token on Github:",{"type":16,"tag":42,"props":43,"children":44},"ol",{},[45],{"type":16,"tag":46,"props":47,"children":48},"li",{},[49,51,59,61,66,68],{"type":21,"value":50},"Visit ",{"type":16,"tag":52,"props":53,"children":57},"a",{"href":54,"rel":55},"https://github.com/settings/tokens",[56],"nofollow",[58],{"type":21,"value":54},{"type":21,"value":60}," and select ",{"type":16,"tag":29,"props":62,"children":63},{},[64],{"type":21,"value":65},"Generate new token",{"type":21,"value":67}," > ",{"type":16,"tag":29,"props":69,"children":70},{},[71],{"type":21,"value":72},"Generate new token (classic)",{"type":16,"tag":74,"props":75,"children":79},"docs-image-example",{"alt":76,"src":77,"style":78},"Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic","/img/generate.jpg","width:360px",[],{"type":16,"tag":42,"props":81,"children":83},{"start":82},2,[84],{"type":16,"tag":46,"props":85,"children":86},{},[87,89,94,96,101],{"type":21,"value":88},"Fill in the ",{"type":16,"tag":29,"props":90,"children":91},{},[92],{"type":21,"value":93},"Note",{"type":21,"value":95}," and choose an ",{"type":16,"tag":29,"props":97,"children":98},{},[99],{"type":21,"value":100},"Expiration",{"type":21,"value":102}," - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry",{"type":16,"tag":74,"props":104,"children":108},{"alt":105,"src":106,"style":107},"Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days","/img/token.jpg","width:505px",[],{"type":16,"tag":42,"props":110,"children":112},{"start":111},3,[113],{"type":16,"tag":46,"props":114,"children":115},{},[116,118,124,126,131],{"type":21,"value":117},"Set the scope to only allow ",{"type":16,"tag":119,"props":120,"children":121},"code-inline",{},[122],{"type":21,"value":123},"read:packages",{"type":21,"value":125},", and ",{"type":16,"tag":29,"props":127,"children":128},{},[129],{"type":21,"value":130},"Generate",{"type":21,"value":132}," token",{"type":16,"tag":74,"props":134,"children":138},{"alt":135,"src":136,"style":137},"Screenshot of scope, with only read:packages selected","/img/permissions.jpg","width:827px",[],{"type":16,"tag":42,"props":140,"children":142},{"start":141},4,[143],{"type":16,"tag":46,"props":144,"children":145},{},[146,148,153,155,159],{"type":21,"value":147},"Store the resulting token somewhere secure, and add it to either a user ",{"type":16,"tag":119,"props":149,"children":150},{},[151],{"type":21,"value":152},".npmrc",{"type":21,"value":154}," (recommended) or the project-level ",{"type":16,"tag":119,"props":156,"children":157},{},[158],{"type":21,"value":152},{"type":21,"value":160}," (the url on line 2 below is protocol-less, not a comment):",{"type":16,"tag":162,"props":163,"children":167},"code",{"className":164,"code":166},[165],"language-undefined","@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=\u003Cgithub personal access token>\n",[168],{"type":16,"tag":169,"props":170,"children":171},"pre",{},[172],{"type":16,"tag":162,"props":173,"children":174},{"__ignoreMap":8},[175,186],{"type":16,"tag":176,"props":177,"children":180},"span",{"class":178,"line":179},"line",1,[181],{"type":16,"tag":176,"props":182,"children":183},{},[184],{"type":21,"value":185},"@dpc-sdp:registry=https://npm.pkg.github.com\n",{"type":16,"tag":176,"props":187,"children":188},{"class":178,"line":82},[189],{"type":16,"tag":176,"props":190,"children":191},{},[192],{"type":21,"value":193},"//npm.pkg.github.com/:_authToken=\u003Cgithub personal access token>",{"title":8,"searchDepth":82,"depth":82,"links":195},[],"markdown","content:design-system:3.develop:4.usage:1.access-to-github-packages.md","content","design-system/3.develop/4.usage/1.access-to-github-packages.md","md",{"/design-system/develop/usage/access-to-github-packages":202},[203,217],{"_path":204,"_dir":205,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":206,"description":207,"layout":11,"links":208,"_type":196,"_id":215,"_source":198,"_file":216,"_extension":200},"/design-system/develop/usage","develop","Usage","Ripple components can be used in several different ways depending on your project needs.",[209,212],{"text":210,"url":211},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":213,"url":214},"Storybook","/storybook","content:design-system:3.develop:3.usage.md","design-system/3.develop/3.usage.md",{"_path":218,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":219,"description":220,"layout":11,"_type":196,"_id":221,"_source":198,"_file":222,"_extension":200},"/design-system/develop/usage/vue","Vue","How to use Ripple components with Vue.","content:design-system:3.develop:4.usage:2.vue.md","design-system/3.develop/4.usage/2.vue.md",{},[225,230,472],{"title":226,"_path":227,"icon":228,"layout":229},"Ripple Design System","/","carbon:home","home",{"title":231,"_path":232,"children":233},"Design System","/design-system",[234,250,266,290,324],{"title":235,"_path":236,"children":237},"About","/design-system/about",[238,241,244,247],{"title":239,"_path":240,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":242,"_path":243,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":245,"_path":246,"layout":11},"Support","/design-system/about/getting-support",{"title":248,"_path":249,"layout":11},"Contributing","/design-system/about/contributing",{"title":251,"_path":252,"children":253},"Design","/design-system/design",[254,257,260,263],{"title":255,"_path":256,"layout":11},"Getting started","/design-system/design/getting-started",{"title":258,"_path":259,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":261,"_path":262,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":264,"_path":265,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":267,"_path":268,"children":269},"Develop","/design-system/develop",[270,272,274,277],{"title":255,"_path":271,"layout":11},"/design-system/develop/getting-started",{"title":248,"_path":273,"layout":11},"/design-system/develop/contributing",{"title":275,"_path":276,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":206,"_path":204,"children":278,"layout":11},[279,280,281,284,287],{"title":9,"_path":5,"layout":11},{"title":219,"_path":218,"layout":11},{"title":282,"_path":283,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":285,"_path":286,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":288,"_path":289,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":291,"_path":292,"children":293},"Styles","/design-system/styles",[294,297,300,303,306,309,312,315,318,321],{"title":295,"_path":296,"layout":11},"Colour","/design-system/styles/colour",{"title":298,"_path":299,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":301,"_path":302,"layout":11},"Grid","/design-system/styles/grid",{"title":304,"_path":305,"layout":11},"Icons","/design-system/styles/icons",{"title":307,"_path":308,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":310,"_path":311,"layout":11},"Layout","/design-system/styles/layout",{"title":313,"_path":314,"layout":11},"Logo","/design-system/styles/logo",{"title":316,"_path":317,"layout":11},"Motion","/design-system/styles/motion",{"title":319,"_path":320,"layout":11},"Spacing","/design-system/styles/spacing",{"title":322,"_path":323,"layout":11},"Typography","/design-system/styles/typography",{"title":325,"_path":326,"children":327},"Components","/design-system/components",[328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469],{"title":329,"_path":330,"layout":11},"Accordion","/design-system/components/accordion",{"title":332,"_path":333,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":335,"_path":336,"layout":11},"Alert","/design-system/components/alert",{"title":338,"_path":339,"layout":11},"Block quote","/design-system/components/block-quote",{"title":341,"_path":342,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":344,"_path":345,"layout":11},"Button","/design-system/components/button",{"title":347,"_path":348,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":350,"_path":351,"layout":11},"Callout","/design-system/components/callout",{"title":353,"_path":354,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":356,"_path":357,"layout":11},"Card","/design-system/components/card",{"title":359,"_path":360,"layout":11},"Carousel","/design-system/components/carousel",{"title":362,"_path":363,"layout":11},"Category grid","/design-system/components/category-grid",{"title":365,"_path":366,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":368,"_path":369,"layout":11},"Chip","/design-system/components/chip",{"title":371,"_path":372,"layout":11},"Contact us","/design-system/components/contact-us",{"title":374,"_path":375,"layout":11},"Date input","/design-system/components/date-input",{"title":377,"_path":378,"layout":11},"Detail list","/design-system/components/detail-list",{"title":380,"_path":381,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":383,"_path":384,"layout":11},"File","/design-system/components/file",{"title":386,"_path":387,"layout":11},"Footer","/design-system/components/footer",{"title":389,"_path":390,"layout":11},"Form alert","/design-system/components/form-alert",{"title":392,"_path":393,"layout":11},"Form","/design-system/components/form",{"title":395,"_path":396,"layout":11},"Header","/design-system/components/header",{"title":398,"_path":399,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":401,"_path":402,"layout":11},"Input field","/design-system/components/input-field",{"title":404,"_path":405,"layout":11},"Key dates","/design-system/components/key-dates",{"title":407,"_path":408,"layout":11},"Media embed","/design-system/components/media-embed",{"title":410,"_path":411,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":413,"_path":414,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":416,"_path":417,"layout":11},"Media","/design-system/components/media",{"title":419,"_path":420,"layout":11},"Option button","/design-system/components/option-button",{"title":422,"_path":423,"layout":11},"Page action","/design-system/components/page-action",{"title":425,"_path":426,"layout":11},"Pagination","/design-system/components/pagination",{"title":428,"_path":429,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":431,"_path":432,"layout":11},"Profile","/design-system/components/profile",{"title":434,"_path":435,"layout":11},"Radio button","/design-system/components/radio-button",{"title":437,"_path":438,"layout":11},"Related links","/design-system/components/related-links",{"title":440,"_path":441,"layout":11},"Results listing","/design-system/components/results-listing",{"title":443,"_path":444,"layout":11},"Search bar","/design-system/components/search-bar",{"title":446,"_path":447,"layout":11},"Skip link","/design-system/components/skip-link",{"title":449,"_path":450,"layout":11},"Social share","/design-system/components/social-share",{"title":452,"_path":453,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":455,"_path":456,"layout":11},"Table","/design-system/components/table",{"title":458,"_path":459,"layout":11},"Tabs","/design-system/components/tabs",{"title":461,"_path":462,"layout":11},"Tag","/design-system/components/tag",{"title":464,"_path":465,"layout":11},"Text area","/design-system/components/text-area",{"title":467,"_path":468,"layout":11},"Timeline","/design-system/components/timeline",{"title":470,"_path":471,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":473,"_path":474,"children":475,"layout":11},"Ripple Framework","/framework",[476,477,495,517],{"title":473,"_path":474,"layout":11},{"title":478,"_path":479,"children":480},"Key Concepts","/framework/key-concepts",[481,483,486,489,492],{"title":282,"_path":482,"layout":11},"/framework/key-concepts/nuxt",{"title":484,"_path":485,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":487,"_path":488,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":490,"_path":491,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":493,"_path":494,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":496,"_path":497,"children":498},"Guides","/framework/guides",[499,502,505,508,511,514],{"title":500,"_path":501,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":503,"_path":504,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":506,"_path":507,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":509,"_path":510,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":512,"_path":513,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":515,"_path":516,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":518,"_path":519,"layout":11},"Core modules","/framework/core-modules",["Reactive",521],{"module-navigation":522},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> +</span></span><span class="line" line="2"><span>//npm.pkg.github.com/:_authToken=<github personal access token></span></span></code></pre><!--]--></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/1.access-to-github-packages.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/access-to-github-packages/_payload.json">[{"state":1,"_errors":520,"serverRendered":523,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":201,"$sdd-globals":223,"$sdd-navigation":224},{"/design-system/develop/usage/access-to-github-packages":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":196,"_id":197,"_source":198,"_file":199,"_extension":200},"/design-system/develop/usage/access-to-github-packages","usage",false,"","Access to Github Packages","How to access and use repos hosted on Github Packages.","page",{"type":13,"children":14,"toc":194},"root",[15,23,36,41,73,80,103,109,133,139,161],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":22},"text","NPM allows the use of multiple repo hosts, as long as they can be identified by namespace.",{"type":16,"tag":17,"props":24,"children":25},{},[26,28,34],{"type":21,"value":27},"Ripple 2 is hosted publicly on Github Packages (ghcr) under the ",{"type":16,"tag":29,"props":30,"children":31},"strong",{},[32],{"type":21,"value":33},"@dpc/sdp",{"type":21,"value":35}," namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem.",{"type":16,"tag":17,"props":37,"children":38},{},[39],{"type":21,"value":40},"First, create a Personal Access Token on Github:",{"type":16,"tag":42,"props":43,"children":44},"ol",{},[45],{"type":16,"tag":46,"props":47,"children":48},"li",{},[49,51,59,61,66,68],{"type":21,"value":50},"Visit ",{"type":16,"tag":52,"props":53,"children":57},"a",{"href":54,"rel":55},"https://github.com/settings/tokens",[56],"nofollow",[58],{"type":21,"value":54},{"type":21,"value":60}," and select ",{"type":16,"tag":29,"props":62,"children":63},{},[64],{"type":21,"value":65},"Generate new token",{"type":21,"value":67}," > ",{"type":16,"tag":29,"props":69,"children":70},{},[71],{"type":21,"value":72},"Generate new token (classic)",{"type":16,"tag":74,"props":75,"children":79},"docs-image-example",{"alt":76,"src":77,"style":78},"Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic","/img/generate.jpg","width:360px",[],{"type":16,"tag":42,"props":81,"children":83},{"start":82},2,[84],{"type":16,"tag":46,"props":85,"children":86},{},[87,89,94,96,101],{"type":21,"value":88},"Fill in the ",{"type":16,"tag":29,"props":90,"children":91},{},[92],{"type":21,"value":93},"Note",{"type":21,"value":95}," and choose an ",{"type":16,"tag":29,"props":97,"children":98},{},[99],{"type":21,"value":100},"Expiration",{"type":21,"value":102}," - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry",{"type":16,"tag":74,"props":104,"children":108},{"alt":105,"src":106,"style":107},"Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days","/img/token.jpg","width:505px",[],{"type":16,"tag":42,"props":110,"children":112},{"start":111},3,[113],{"type":16,"tag":46,"props":114,"children":115},{},[116,118,124,126,131],{"type":21,"value":117},"Set the scope to only allow ",{"type":16,"tag":119,"props":120,"children":121},"code-inline",{},[122],{"type":21,"value":123},"read:packages",{"type":21,"value":125},", and ",{"type":16,"tag":29,"props":127,"children":128},{},[129],{"type":21,"value":130},"Generate",{"type":21,"value":132}," token",{"type":16,"tag":74,"props":134,"children":138},{"alt":135,"src":136,"style":137},"Screenshot of scope, with only read:packages selected","/img/permissions.jpg","width:827px",[],{"type":16,"tag":42,"props":140,"children":142},{"start":141},4,[143],{"type":16,"tag":46,"props":144,"children":145},{},[146,148,153,155,159],{"type":21,"value":147},"Store the resulting token somewhere secure, and add it to either a user ",{"type":16,"tag":119,"props":149,"children":150},{},[151],{"type":21,"value":152},".npmrc",{"type":21,"value":154}," (recommended) or the project-level ",{"type":16,"tag":119,"props":156,"children":157},{},[158],{"type":21,"value":152},{"type":21,"value":160}," (the url on line 2 below is protocol-less, not a comment):",{"type":16,"tag":162,"props":163,"children":167},"code",{"className":164,"code":166},[165],"language-undefined","@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=\u003Cgithub personal access token>\n",[168],{"type":16,"tag":169,"props":170,"children":171},"pre",{},[172],{"type":16,"tag":162,"props":173,"children":174},{"__ignoreMap":8},[175,186],{"type":16,"tag":176,"props":177,"children":180},"span",{"class":178,"line":179},"line",1,[181],{"type":16,"tag":176,"props":182,"children":183},{},[184],{"type":21,"value":185},"@dpc-sdp:registry=https://npm.pkg.github.com\n",{"type":16,"tag":176,"props":187,"children":188},{"class":178,"line":82},[189],{"type":16,"tag":176,"props":190,"children":191},{},[192],{"type":21,"value":193},"//npm.pkg.github.com/:_authToken=\u003Cgithub personal access token>",{"title":8,"searchDepth":82,"depth":82,"links":195},[],"markdown","content:design-system:3.develop:4.usage:1.access-to-github-packages.md","content","design-system/3.develop/4.usage/1.access-to-github-packages.md","md",{"/design-system/develop/usage/access-to-github-packages":202},[203,217],{"_path":204,"_dir":205,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":206,"description":207,"layout":11,"links":208,"_type":196,"_id":215,"_source":198,"_file":216,"_extension":200},"/design-system/develop/usage","develop","Usage","Ripple components can be used in several different ways depending on your project needs.",[209,212],{"text":210,"url":211},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":213,"url":214},"Storybook","/storybook","content:design-system:3.develop:3.usage.md","design-system/3.develop/3.usage.md",{"_path":218,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":219,"description":220,"layout":11,"_type":196,"_id":221,"_source":198,"_file":222,"_extension":200},"/design-system/develop/usage/vue","Vue","How to use Ripple components with Vue.","content:design-system:3.develop:4.usage:2.vue.md","design-system/3.develop/4.usage/2.vue.md",{},[225,230,472],{"title":226,"_path":227,"icon":228,"layout":229},"Ripple Design System","/","carbon:home","home",{"title":231,"_path":232,"children":233},"Design System","/design-system",[234,250,266,290,324],{"title":235,"_path":236,"children":237},"About","/design-system/about",[238,241,244,247],{"title":239,"_path":240,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":242,"_path":243,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":245,"_path":246,"layout":11},"Support","/design-system/about/getting-support",{"title":248,"_path":249,"layout":11},"Contributing","/design-system/about/contributing",{"title":251,"_path":252,"children":253},"Design","/design-system/design",[254,257,260,263],{"title":255,"_path":256,"layout":11},"Getting started","/design-system/design/getting-started",{"title":258,"_path":259,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":261,"_path":262,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":264,"_path":265,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":267,"_path":268,"children":269},"Develop","/design-system/develop",[270,272,274,277],{"title":255,"_path":271,"layout":11},"/design-system/develop/getting-started",{"title":248,"_path":273,"layout":11},"/design-system/develop/contributing",{"title":275,"_path":276,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":206,"_path":204,"children":278,"layout":11},[279,280,281,284,287],{"title":9,"_path":5,"layout":11},{"title":219,"_path":218,"layout":11},{"title":282,"_path":283,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":285,"_path":286,"layout":11},"Web components","/design-system/develop/usage/webcomponents",{"title":288,"_path":289,"layout":11},"Styles only","/design-system/develop/usage/css-only",{"title":291,"_path":292,"children":293},"Styles","/design-system/styles",[294,297,300,303,306,309,312,315,318,321],{"title":295,"_path":296,"layout":11},"Colour","/design-system/styles/colour",{"title":298,"_path":299,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":301,"_path":302,"layout":11},"Grid","/design-system/styles/grid",{"title":304,"_path":305,"layout":11},"Icons","/design-system/styles/icons",{"title":307,"_path":308,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":310,"_path":311,"layout":11},"Layout","/design-system/styles/layout",{"title":313,"_path":314,"layout":11},"Logo","/design-system/styles/logo",{"title":316,"_path":317,"layout":11},"Motion","/design-system/styles/motion",{"title":319,"_path":320,"layout":11},"Spacing","/design-system/styles/spacing",{"title":322,"_path":323,"layout":11},"Typography","/design-system/styles/typography",{"title":325,"_path":326,"children":327},"Components","/design-system/components",[328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469],{"title":329,"_path":330,"layout":11},"Accordion","/design-system/components/accordion",{"title":332,"_path":333,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":335,"_path":336,"layout":11},"Alert","/design-system/components/alert",{"title":338,"_path":339,"layout":11},"Block quote","/design-system/components/block-quote",{"title":341,"_path":342,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":344,"_path":345,"layout":11},"Button","/design-system/components/button",{"title":347,"_path":348,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":350,"_path":351,"layout":11},"Callout","/design-system/components/callout",{"title":353,"_path":354,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":356,"_path":357,"layout":11},"Card","/design-system/components/card",{"title":359,"_path":360,"layout":11},"Carousel","/design-system/components/carousel",{"title":362,"_path":363,"layout":11},"Category grid","/design-system/components/category-grid",{"title":365,"_path":366,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":368,"_path":369,"layout":11},"Chip","/design-system/components/chip",{"title":371,"_path":372,"layout":11},"Contact us","/design-system/components/contact-us",{"title":374,"_path":375,"layout":11},"Date input","/design-system/components/date-input",{"title":377,"_path":378,"layout":11},"Detail list","/design-system/components/detail-list",{"title":380,"_path":381,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":383,"_path":384,"layout":11},"File","/design-system/components/file",{"title":386,"_path":387,"layout":11},"Footer","/design-system/components/footer",{"title":389,"_path":390,"layout":11},"Form alert","/design-system/components/form-alert",{"title":392,"_path":393,"layout":11},"Form","/design-system/components/form",{"title":395,"_path":396,"layout":11},"Header","/design-system/components/header",{"title":398,"_path":399,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":401,"_path":402,"layout":11},"Input field","/design-system/components/input-field",{"title":404,"_path":405,"layout":11},"Key dates","/design-system/components/key-dates",{"title":407,"_path":408,"layout":11},"Media embed","/design-system/components/media-embed",{"title":410,"_path":411,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":413,"_path":414,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":416,"_path":417,"layout":11},"Media","/design-system/components/media",{"title":419,"_path":420,"layout":11},"Option button","/design-system/components/option-button",{"title":422,"_path":423,"layout":11},"Page action","/design-system/components/page-action",{"title":425,"_path":426,"layout":11},"Pagination","/design-system/components/pagination",{"title":428,"_path":429,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":431,"_path":432,"layout":11},"Profile","/design-system/components/profile",{"title":434,"_path":435,"layout":11},"Radio button","/design-system/components/radio-button",{"title":437,"_path":438,"layout":11},"Related links","/design-system/components/related-links",{"title":440,"_path":441,"layout":11},"Results listing","/design-system/components/results-listing",{"title":443,"_path":444,"layout":11},"Search bar","/design-system/components/search-bar",{"title":446,"_path":447,"layout":11},"Skip link","/design-system/components/skip-link",{"title":449,"_path":450,"layout":11},"Social share","/design-system/components/social-share",{"title":452,"_path":453,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":455,"_path":456,"layout":11},"Table","/design-system/components/table",{"title":458,"_path":459,"layout":11},"Tabs","/design-system/components/tabs",{"title":461,"_path":462,"layout":11},"Tag","/design-system/components/tag",{"title":464,"_path":465,"layout":11},"Text area","/design-system/components/text-area",{"title":467,"_path":468,"layout":11},"Timeline","/design-system/components/timeline",{"title":470,"_path":471,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":473,"_path":474,"children":475,"layout":11},"Ripple Framework","/framework",[476,477,495,517],{"title":473,"_path":474,"layout":11},{"title":478,"_path":479,"children":480},"Key Concepts","/framework/key-concepts",[481,483,486,489,492],{"title":282,"_path":482,"layout":11},"/framework/key-concepts/nuxt",{"title":484,"_path":485,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":487,"_path":488,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":490,"_path":491,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":493,"_path":494,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":496,"_path":497,"children":498},"Guides","/framework/guides",[499,502,505,508,511,514],{"title":500,"_path":501,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":503,"_path":504,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":506,"_path":507,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":509,"_path":510,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":512,"_path":513,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":515,"_path":516,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":518,"_path":519,"layout":11},"Core modules","/framework/core-modules",["Reactive",521],{"module-navigation":522},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/develop/usage/css-only/index.html b/design-system/develop/usage/css-only/index.html index 031c54daa5..0ef39379a3 100644 --- a/design-system/develop/usage/css-only/index.html +++ b/design-system/develop/usage/css-only/index.html @@ -27,7 +27,7 @@ rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Styles only</h1><p class="rpl-type-p-large" data-v-3163c6df>Using the design system styles without a front-end framework.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple UI core exports it's CSS stylesheets directly. If you have a use case where you can't use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook.<!--]--></p><p><!--[-->First, set up <a href="access-to-github-packages" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->access to Github Packages<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->Next, install Ripple UI in your project:<!--]--></p><p><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->npm install @dpc-sdp/ripple-ui-core --save<!--]--></code><!--]--></p><p><!--[-->You can import CSS styles from the ripple-ui-core package.<!--]--></p><div class="docs-code-block language-js" meta data-v-efa4b2dc><!--[--><pre><code><span class="line" line="1"><span class="ct-186825">import</span><span class="ct-996368"> </span><span class="ct-165924">'@dpc-sdp/ripple-ui-core/style'</span><span class="ct-996368">; </span></span><span class="line" line="2"><span class="ct-186825">import</span><span class="ct-996368"> </span><span class="ct-165924">'@dpc-sdp/ripple-ui-core/style/components'</span><span class="ct-996368">;</span></span></code></pre><!--]--></div><p><!--[-->We recommend that you lock the version of <code class="docs-code-inline" data-v-2e6046ca><!--[-->@dpc-sdp/ripple-ui-core<!--]--></code> so that any future changes of styles without changes to markup do not break your application.<!--]--></p><style>.ct-186825{color:#CF222E;} .ct-996368{color:#24292F;} -.ct-165924{color:#0A3069;}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/5.css-only.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/css-only/_payload.json">[{"state":1,"_errors":459,"serverRendered":462,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":146,"$sdd-globals":162,"$sdd-navigation":163},{"/design-system/develop/usage/css-only":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":141,"_id":142,"_source":143,"_file":144,"_extension":145},"/design-system/develop/usage/css-only","usage",false,"","Styles only","Using the design system styles without a front-end framework.","page",{"type":13,"children":14,"toc":139},"root",[15,23,37,42,51,56,122,134],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":22},"text","Ripple UI core exports it's CSS stylesheets directly. If you have a use case where you can't use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook.",{"type":16,"tag":17,"props":24,"children":25},{},[26,28,35],{"type":21,"value":27},"First, set up ",{"type":16,"tag":29,"props":30,"children":32},"a",{"href":31},"access-to-github-packages",[33],{"type":21,"value":34},"access to Github Packages",{"type":21,"value":36},".",{"type":16,"tag":17,"props":38,"children":39},{},[40],{"type":21,"value":41},"Next, install Ripple UI in your project:",{"type":16,"tag":17,"props":43,"children":44},{},[45],{"type":16,"tag":46,"props":47,"children":48},"code-inline",{},[49],{"type":21,"value":50},"npm install @dpc-sdp/ripple-ui-core --save",{"type":16,"tag":17,"props":52,"children":53},{},[54],{"type":21,"value":55},"You can import CSS styles from the ripple-ui-core package.",{"type":16,"tag":57,"props":58,"children":63},"code",{"className":59,"code":61,"language":62,"meta":8},[60],"language-js","import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","js",[64],{"type":16,"tag":65,"props":66,"children":67},"pre",{},[68],{"type":16,"tag":57,"props":69,"children":70},{"__ignoreMap":8},[71,100],{"type":16,"tag":72,"props":73,"children":76},"span",{"class":74,"line":75},"line",1,[77,83,89,95],{"type":16,"tag":72,"props":78,"children":80},{"class":79},"ct-186825",[81],{"type":21,"value":82},"import",{"type":16,"tag":72,"props":84,"children":86},{"class":85},"ct-996368",[87],{"type":21,"value":88}," ",{"type":16,"tag":72,"props":90,"children":92},{"class":91},"ct-165924",[93],{"type":21,"value":94},"'@dpc-sdp/ripple-ui-core/style'",{"type":16,"tag":72,"props":96,"children":97},{"class":85},[98],{"type":21,"value":99},";\n",{"type":16,"tag":72,"props":101,"children":103},{"class":74,"line":102},2,[104,108,112,117],{"type":16,"tag":72,"props":105,"children":106},{"class":79},[107],{"type":21,"value":82},{"type":16,"tag":72,"props":109,"children":110},{"class":85},[111],{"type":21,"value":88},{"type":16,"tag":72,"props":113,"children":114},{"class":91},[115],{"type":21,"value":116},"'@dpc-sdp/ripple-ui-core/style/components'",{"type":16,"tag":72,"props":118,"children":119},{"class":85},[120],{"type":21,"value":121},";",{"type":16,"tag":17,"props":123,"children":124},{},[125,127,132],{"type":21,"value":126},"We recommend that you lock the version of ",{"type":16,"tag":46,"props":128,"children":129},{},[130],{"type":21,"value":131},"@dpc-sdp/ripple-ui-core",{"type":21,"value":133}," so that any future changes of styles without changes to markup do not break your application.",{"type":16,"tag":135,"children":136},"style",[137],{"type":21,"value":138},".ct-186825{color:#CF222E;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}",{"title":8,"searchDepth":102,"depth":102,"links":140},[],"markdown","content:design-system:3.develop:4.usage:5.css-only.md","content","design-system/3.develop/4.usage/5.css-only.md","md",{"/design-system/develop/usage/css-only":147},[148,154],{"_path":149,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":150,"description":151,"layout":11,"_type":141,"_id":152,"_source":143,"_file":153,"_extension":145},"/design-system/develop/usage/webcomponents","Web components","How to use the web component exports with other front-end systems.","content:design-system:3.develop:4.usage:4.webcomponents.md","design-system/3.develop/4.usage/4.webcomponents.md",{"_path":155,"_dir":156,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":157,"description":158,"layout":11,"label":159,"_type":141,"_id":160,"_source":143,"_file":161,"_extension":145},"/design-system/styles/colour","styles","Colour","Colour plays an important role in creating a consistent and strong visual digital products and services.","Core","content:design-system:4.styles:colour.md","design-system/4.styles/colour.md",{},[164,169,411],{"title":165,"_path":166,"icon":167,"layout":168},"Ripple Design System","/","carbon:home","home",{"title":170,"_path":171,"children":172},"Design System","/design-system",[173,189,205,231,263],{"title":174,"_path":175,"children":176},"About","/design-system/about",[177,180,183,186],{"title":178,"_path":179,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":181,"_path":182,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":184,"_path":185,"layout":11},"Support","/design-system/about/getting-support",{"title":187,"_path":188,"layout":11},"Contributing","/design-system/about/contributing",{"title":190,"_path":191,"children":192},"Design","/design-system/design",[193,196,199,202],{"title":194,"_path":195,"layout":11},"Getting started","/design-system/design/getting-started",{"title":197,"_path":198,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":200,"_path":201,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":203,"_path":204,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":206,"_path":207,"children":208},"Develop","/design-system/develop",[209,211,213,216],{"title":194,"_path":210,"layout":11},"/design-system/develop/getting-started",{"title":187,"_path":212,"layout":11},"/design-system/develop/contributing",{"title":214,"_path":215,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":217,"_path":218,"children":219,"layout":11},"Usage","/design-system/develop/usage",[220,223,226,229,230],{"title":221,"_path":222,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":224,"_path":225,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":227,"_path":228,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":150,"_path":149,"layout":11},{"title":9,"_path":5,"layout":11},{"title":232,"_path":233,"children":234},"Styles","/design-system/styles",[235,236,239,242,245,248,251,254,257,260],{"title":157,"_path":155,"layout":11},{"title":237,"_path":238,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":240,"_path":241,"layout":11},"Grid","/design-system/styles/grid",{"title":243,"_path":244,"layout":11},"Icons","/design-system/styles/icons",{"title":246,"_path":247,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":249,"_path":250,"layout":11},"Layout","/design-system/styles/layout",{"title":252,"_path":253,"layout":11},"Logo","/design-system/styles/logo",{"title":255,"_path":256,"layout":11},"Motion","/design-system/styles/motion",{"title":258,"_path":259,"layout":11},"Spacing","/design-system/styles/spacing",{"title":261,"_path":262,"layout":11},"Typography","/design-system/styles/typography",{"title":264,"_path":265,"children":266},"Components","/design-system/components",[267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408],{"title":268,"_path":269,"layout":11},"Accordion","/design-system/components/accordion",{"title":271,"_path":272,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":274,"_path":275,"layout":11},"Alert","/design-system/components/alert",{"title":277,"_path":278,"layout":11},"Block quote","/design-system/components/block-quote",{"title":280,"_path":281,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":283,"_path":284,"layout":11},"Button","/design-system/components/button",{"title":286,"_path":287,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":289,"_path":290,"layout":11},"Callout","/design-system/components/callout",{"title":292,"_path":293,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":295,"_path":296,"layout":11},"Card","/design-system/components/card",{"title":298,"_path":299,"layout":11},"Carousel","/design-system/components/carousel",{"title":301,"_path":302,"layout":11},"Category grid","/design-system/components/category-grid",{"title":304,"_path":305,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":307,"_path":308,"layout":11},"Chip","/design-system/components/chip",{"title":310,"_path":311,"layout":11},"Contact us","/design-system/components/contact-us",{"title":313,"_path":314,"layout":11},"Date input","/design-system/components/date-input",{"title":316,"_path":317,"layout":11},"Detail list","/design-system/components/detail-list",{"title":319,"_path":320,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":322,"_path":323,"layout":11},"File","/design-system/components/file",{"title":325,"_path":326,"layout":11},"Footer","/design-system/components/footer",{"title":328,"_path":329,"layout":11},"Form alert","/design-system/components/form-alert",{"title":331,"_path":332,"layout":11},"Form","/design-system/components/form",{"title":334,"_path":335,"layout":11},"Header","/design-system/components/header",{"title":337,"_path":338,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":340,"_path":341,"layout":11},"Input field","/design-system/components/input-field",{"title":343,"_path":344,"layout":11},"Key dates","/design-system/components/key-dates",{"title":346,"_path":347,"layout":11},"Media embed","/design-system/components/media-embed",{"title":349,"_path":350,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":352,"_path":353,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":355,"_path":356,"layout":11},"Media","/design-system/components/media",{"title":358,"_path":359,"layout":11},"Option button","/design-system/components/option-button",{"title":361,"_path":362,"layout":11},"Page action","/design-system/components/page-action",{"title":364,"_path":365,"layout":11},"Pagination","/design-system/components/pagination",{"title":367,"_path":368,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":370,"_path":371,"layout":11},"Profile","/design-system/components/profile",{"title":373,"_path":374,"layout":11},"Radio button","/design-system/components/radio-button",{"title":376,"_path":377,"layout":11},"Related links","/design-system/components/related-links",{"title":379,"_path":380,"layout":11},"Results listing","/design-system/components/results-listing",{"title":382,"_path":383,"layout":11},"Search bar","/design-system/components/search-bar",{"title":385,"_path":386,"layout":11},"Skip link","/design-system/components/skip-link",{"title":388,"_path":389,"layout":11},"Social share","/design-system/components/social-share",{"title":391,"_path":392,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":394,"_path":395,"layout":11},"Table","/design-system/components/table",{"title":397,"_path":398,"layout":11},"Tabs","/design-system/components/tabs",{"title":400,"_path":401,"layout":11},"Tag","/design-system/components/tag",{"title":403,"_path":404,"layout":11},"Text area","/design-system/components/text-area",{"title":406,"_path":407,"layout":11},"Timeline","/design-system/components/timeline",{"title":409,"_path":410,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":412,"_path":413,"children":414,"layout":11},"Ripple Framework","/framework",[415,416,434,456],{"title":412,"_path":413,"layout":11},{"title":417,"_path":418,"children":419},"Key Concepts","/framework/key-concepts",[420,422,425,428,431],{"title":227,"_path":421,"layout":11},"/framework/key-concepts/nuxt",{"title":423,"_path":424,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":426,"_path":427,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":429,"_path":430,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":432,"_path":433,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":435,"_path":436,"children":437},"Guides","/framework/guides",[438,441,444,447,450,453],{"title":439,"_path":440,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":442,"_path":443,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":445,"_path":446,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":448,"_path":449,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":451,"_path":452,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":454,"_path":455,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":457,"_path":458,"layout":11},"Core modules","/framework/core-modules",["Reactive",460],{"module-navigation":461},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710803607354,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> +.ct-165924{color:#0A3069;}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/5.css-only.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="/_nuxt/flag-aboriginal.1d7179be.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Aboriginal flag"><img src="/_nuxt/flag-torres-strait-islander.fb7e6459.svg" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" width="55" height="38" loading="lazy" fetchpriority="auto" style="" alt="Torres Strait Islander flag"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/css-only/_payload.json">[{"state":1,"_errors":459,"serverRendered":462,"path":5,"prerenderedAt":-1},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":146,"$sdd-globals":162,"$sdd-navigation":163},{"/design-system/develop/usage/css-only":4},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":9,"description":10,"layout":11,"body":12,"_type":141,"_id":142,"_source":143,"_file":144,"_extension":145},"/design-system/develop/usage/css-only","usage",false,"","Styles only","Using the design system styles without a front-end framework.","page",{"type":13,"children":14,"toc":139},"root",[15,23,37,42,51,56,122,134],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":22},"text","Ripple UI core exports it's CSS stylesheets directly. If you have a use case where you can't use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook.",{"type":16,"tag":17,"props":24,"children":25},{},[26,28,35],{"type":21,"value":27},"First, set up ",{"type":16,"tag":29,"props":30,"children":32},"a",{"href":31},"access-to-github-packages",[33],{"type":21,"value":34},"access to Github Packages",{"type":21,"value":36},".",{"type":16,"tag":17,"props":38,"children":39},{},[40],{"type":21,"value":41},"Next, install Ripple UI in your project:",{"type":16,"tag":17,"props":43,"children":44},{},[45],{"type":16,"tag":46,"props":47,"children":48},"code-inline",{},[49],{"type":21,"value":50},"npm install @dpc-sdp/ripple-ui-core --save",{"type":16,"tag":17,"props":52,"children":53},{},[54],{"type":21,"value":55},"You can import CSS styles from the ripple-ui-core package.",{"type":16,"tag":57,"props":58,"children":63},"code",{"className":59,"code":61,"language":62,"meta":8},[60],"language-js","import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","js",[64],{"type":16,"tag":65,"props":66,"children":67},"pre",{},[68],{"type":16,"tag":57,"props":69,"children":70},{"__ignoreMap":8},[71,100],{"type":16,"tag":72,"props":73,"children":76},"span",{"class":74,"line":75},"line",1,[77,83,89,95],{"type":16,"tag":72,"props":78,"children":80},{"class":79},"ct-186825",[81],{"type":21,"value":82},"import",{"type":16,"tag":72,"props":84,"children":86},{"class":85},"ct-996368",[87],{"type":21,"value":88}," ",{"type":16,"tag":72,"props":90,"children":92},{"class":91},"ct-165924",[93],{"type":21,"value":94},"'@dpc-sdp/ripple-ui-core/style'",{"type":16,"tag":72,"props":96,"children":97},{"class":85},[98],{"type":21,"value":99},";\n",{"type":16,"tag":72,"props":101,"children":103},{"class":74,"line":102},2,[104,108,112,117],{"type":16,"tag":72,"props":105,"children":106},{"class":79},[107],{"type":21,"value":82},{"type":16,"tag":72,"props":109,"children":110},{"class":85},[111],{"type":21,"value":88},{"type":16,"tag":72,"props":113,"children":114},{"class":91},[115],{"type":21,"value":116},"'@dpc-sdp/ripple-ui-core/style/components'",{"type":16,"tag":72,"props":118,"children":119},{"class":85},[120],{"type":21,"value":121},";",{"type":16,"tag":17,"props":123,"children":124},{},[125,127,132],{"type":21,"value":126},"We recommend that you lock the version of ",{"type":16,"tag":46,"props":128,"children":129},{},[130],{"type":21,"value":131},"@dpc-sdp/ripple-ui-core",{"type":21,"value":133}," so that any future changes of styles without changes to markup do not break your application.",{"type":16,"tag":135,"children":136},"style",[137],{"type":21,"value":138},".ct-186825{color:#CF222E;}\n.ct-996368{color:#24292F;}\n.ct-165924{color:#0A3069;}",{"title":8,"searchDepth":102,"depth":102,"links":140},[],"markdown","content:design-system:3.develop:4.usage:5.css-only.md","content","design-system/3.develop/4.usage/5.css-only.md","md",{"/design-system/develop/usage/css-only":147},[148,154],{"_path":149,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":150,"description":151,"layout":11,"_type":141,"_id":152,"_source":143,"_file":153,"_extension":145},"/design-system/develop/usage/webcomponents","Web components","How to use the web component exports with other front-end systems.","content:design-system:3.develop:4.usage:4.webcomponents.md","design-system/3.develop/4.usage/4.webcomponents.md",{"_path":155,"_dir":156,"_draft":7,"_partial":7,"_locale":8,"_empty":7,"title":157,"description":158,"layout":11,"label":159,"_type":141,"_id":160,"_source":143,"_file":161,"_extension":145},"/design-system/styles/colour","styles","Colour","Colour plays an important role in creating a consistent and strong visual digital products and services.","Core","content:design-system:4.styles:colour.md","design-system/4.styles/colour.md",{},[164,169,411],{"title":165,"_path":166,"icon":167,"layout":168},"Ripple Design System","/","carbon:home","home",{"title":170,"_path":171,"children":172},"Design System","/design-system",[173,189,205,231,263],{"title":174,"_path":175,"children":176},"About","/design-system/about",[177,180,183,186],{"title":178,"_path":179,"layout":11},"What is Ripple?","/design-system/about/what-is-ripple",{"title":181,"_path":182,"layout":11},"Who's it for?","/design-system/about/whos-it-for",{"title":184,"_path":185,"layout":11},"Support","/design-system/about/getting-support",{"title":187,"_path":188,"layout":11},"Contributing","/design-system/about/contributing",{"title":190,"_path":191,"children":192},"Design","/design-system/design",[193,196,199,202],{"title":194,"_path":195,"layout":11},"Getting started","/design-system/design/getting-started",{"title":197,"_path":198,"layout":11},"Our design principles","/design-system/design/our-design-principles",{"title":200,"_path":201,"layout":11},"Design tokens","/design-system/design/design-tokens",{"title":203,"_path":204,"layout":11},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":206,"_path":207,"children":208},"Develop","/design-system/develop",[209,211,213,216],{"title":194,"_path":210,"layout":11},"/design-system/develop/getting-started",{"title":187,"_path":212,"layout":11},"/design-system/develop/contributing",{"title":214,"_path":215,"layout":11},"Theme and brand application","/design-system/develop/theming",{"title":217,"_path":218,"children":219,"layout":11},"Usage","/design-system/develop/usage",[220,223,226,229,230],{"title":221,"_path":222,"layout":11},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":224,"_path":225,"layout":11},"Vue","/design-system/develop/usage/vue",{"title":227,"_path":228,"layout":11},"Nuxt","/design-system/develop/usage/nuxt",{"title":150,"_path":149,"layout":11},{"title":9,"_path":5,"layout":11},{"title":232,"_path":233,"children":234},"Styles","/design-system/styles",[235,236,239,242,245,248,251,254,257,260],{"title":157,"_path":155,"layout":11},{"title":237,"_path":238,"layout":11},"Focus state","/design-system/styles/focus-state",{"title":240,"_path":241,"layout":11},"Grid","/design-system/styles/grid",{"title":243,"_path":244,"layout":11},"Icons","/design-system/styles/icons",{"title":246,"_path":247,"layout":11},"Layer styles","/design-system/styles/layer-styles",{"title":249,"_path":250,"layout":11},"Layout","/design-system/styles/layout",{"title":252,"_path":253,"layout":11},"Logo","/design-system/styles/logo",{"title":255,"_path":256,"layout":11},"Motion","/design-system/styles/motion",{"title":258,"_path":259,"layout":11},"Spacing","/design-system/styles/spacing",{"title":261,"_path":262,"layout":11},"Typography","/design-system/styles/typography",{"title":264,"_path":265,"children":266},"Components","/design-system/components",[267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408],{"title":268,"_path":269,"layout":11},"Accordion","/design-system/components/accordion",{"title":271,"_path":272,"layout":11},"Acknowledgement","/design-system/components/acknowledgment",{"title":274,"_path":275,"layout":11},"Alert","/design-system/components/alert",{"title":277,"_path":278,"layout":11},"Block quote","/design-system/components/block-quote",{"title":280,"_path":281,"layout":11},"Breadcrumb","/design-system/components/breadcrumb",{"title":283,"_path":284,"layout":11},"Button","/design-system/components/button",{"title":286,"_path":287,"layout":11},"Call to action","/design-system/components/call-to-action",{"title":289,"_path":290,"layout":11},"Callout","/design-system/components/callout",{"title":292,"_path":293,"layout":11},"Campaign banner","/design-system/components/campaign-banner",{"title":295,"_path":296,"layout":11},"Card","/design-system/components/card",{"title":298,"_path":299,"layout":11},"Carousel","/design-system/components/carousel",{"title":301,"_path":302,"layout":11},"Category grid","/design-system/components/category-grid",{"title":304,"_path":305,"layout":11},"Checkbox","/design-system/components/checkbox",{"title":307,"_path":308,"layout":11},"Chip","/design-system/components/chip",{"title":310,"_path":311,"layout":11},"Contact us","/design-system/components/contact-us",{"title":313,"_path":314,"layout":11},"Date input","/design-system/components/date-input",{"title":316,"_path":317,"layout":11},"Detail list","/design-system/components/detail-list",{"title":319,"_path":320,"layout":11},"Dropdown","/design-system/components/dropdown",{"title":322,"_path":323,"layout":11},"File","/design-system/components/file",{"title":325,"_path":326,"layout":11},"Footer","/design-system/components/footer",{"title":328,"_path":329,"layout":11},"Form alert","/design-system/components/form-alert",{"title":331,"_path":332,"layout":11},"Form","/design-system/components/form",{"title":334,"_path":335,"layout":11},"Header","/design-system/components/header",{"title":337,"_path":338,"layout":11},"In-page navigation","/design-system/components/in-page-navigation",{"title":340,"_path":341,"layout":11},"Input field","/design-system/components/input-field",{"title":343,"_path":344,"layout":11},"Key dates","/design-system/components/key-dates",{"title":346,"_path":347,"layout":11},"Media embed","/design-system/components/media-embed",{"title":349,"_path":350,"layout":11},"Media fullscreen","/design-system/components/media-fullscreen",{"title":352,"_path":353,"layout":11},"Media gallery","/design-system/components/media-gallery",{"title":355,"_path":356,"layout":11},"Media","/design-system/components/media",{"title":358,"_path":359,"layout":11},"Option button","/design-system/components/option-button",{"title":361,"_path":362,"layout":11},"Page action","/design-system/components/page-action",{"title":364,"_path":365,"layout":11},"Pagination","/design-system/components/pagination",{"title":367,"_path":368,"layout":11},"Primary navigation","/design-system/components/primary-navigation",{"title":370,"_path":371,"layout":11},"Profile","/design-system/components/profile",{"title":373,"_path":374,"layout":11},"Radio button","/design-system/components/radio-button",{"title":376,"_path":377,"layout":11},"Related links","/design-system/components/related-links",{"title":379,"_path":380,"layout":11},"Results listing","/design-system/components/results-listing",{"title":382,"_path":383,"layout":11},"Search bar","/design-system/components/search-bar",{"title":385,"_path":386,"layout":11},"Skip link","/design-system/components/skip-link",{"title":388,"_path":389,"layout":11},"Social share","/design-system/components/social-share",{"title":391,"_path":392,"layout":11},"Statistics grid","/design-system/components/statistics-grid",{"title":394,"_path":395,"layout":11},"Table","/design-system/components/table",{"title":397,"_path":398,"layout":11},"Tabs","/design-system/components/tabs",{"title":400,"_path":401,"layout":11},"Tag","/design-system/components/tag",{"title":403,"_path":404,"layout":11},"Text area","/design-system/components/text-area",{"title":406,"_path":407,"layout":11},"Timeline","/design-system/components/timeline",{"title":409,"_path":410,"layout":11},"Vertical navigation","/design-system/components/vertical-navigation",{"title":412,"_path":413,"children":414,"layout":11},"Ripple Framework","/framework",[415,416,434,456],{"title":412,"_path":413,"layout":11},{"title":417,"_path":418,"children":419},"Key Concepts","/framework/key-concepts",[420,422,425,428,431],{"title":227,"_path":421,"layout":11},"/framework/key-concepts/nuxt",{"title":423,"_path":424,"layout":11},"Layers","/framework/key-concepts/nuxt-layers",{"title":426,"_path":427,"layout":11},"API endpoints","/framework/key-concepts/api-endpoints",{"title":429,"_path":430,"layout":11},"Content types","/framework/key-concepts/content-types",{"title":432,"_path":433,"layout":11},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":435,"_path":436,"children":437},"Guides","/framework/guides",[438,441,444,447,450,453],{"title":439,"_path":440,"layout":11},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":442,"_path":443,"layout":11},"Setting up a new site","/framework/guides/new-sites",{"title":445,"_path":446,"layout":11},"Applying theme and brand","/framework/guides/brand-application",{"title":448,"_path":449,"layout":11},"Creating content types","/framework/guides/creating-content-types",{"title":451,"_path":452,"layout":11},"Creating new layers","/framework/guides/creating-new-layers",{"title":454,"_path":455,"layout":11},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":457,"_path":458,"layout":11},"Core modules","/framework/core-modules",["Reactive",460],{"module-navigation":461},null,true]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{content:{locales:[],defaultLocale:"",integrity:1710889884934,experimental:{stripQueryParameters:false,clientDB:false},api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"},github:{api:"https://api.github.com",owner:"dpc-sdp",branch:"main",repo:"ripple-framework",disableCache:false,parseContents:true,maxContributors:100}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.29a75128.js" crossorigin></script><script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async=""></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); diff --git a/design-system/develop/usage/index.html b/design-system/develop/usage/index.html index 21fad8ce44..3423343c27 100644 --- a/design-system/develop/usage/index.html +++ b/design-system/develop/usage/index.html @@ -24,7 +24,7 @@ rpl-vertical-nav__list--level-2 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-2 - rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-d730b79e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Usage</h1><p class="rpl-type-p-large" data-v-3163c6df>Ripple components can be used in several different ways depending on your project needs.</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://github.com/dpc-sdp/ripple-framework" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Github<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><li data-v-3163c6df><a href="/storybook" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Storybook<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 id="using-ripple-ui-components"><a href="#using-ripple-ui-components"><!--[-->Using Ripple UI components<!--]--></a></h2><p><!--[-->Whilst Ripple is built to implement sites using a framework built on Vue JS and Nuxt, its modular architecture allows adopting different parts depending on your requirements.<!--]--></p><p><!--[--><img src="/assets/img/modules/rpl-modules.png" alt="ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites"><!--]--></p><p><!--[-->Ripple UI libraries are usable in the following contexts:<!--]--></p><p><!--[--><svg id="docs-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check" viewBox="0 0 24 24"><path d="M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"></path></symbol></defs></svg><!--]--></p><div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Library<!--]--></th><th><!--[-->CSS styles<!--]--></th><th><!--[-->Vue Components<!--]--></th><th><!--[-->Ripple Framework (Nuxt)<!--]--></th><th><!--[-->Web components<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->Ripple UI Core<!--]--></td><td><!--[--><svg width="12" height="12"><title>supportedsupportedsupportedPartial supportRipple UI Formssupportedsupportedsupportednot supported

Using in an SDP website

If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project.

For documentation on using Ripple with Nuxt in SDP sites, visit the Ripple Framework documentation

Github Packages

Ripple 2 is hosted publicly on Github Packages (ghcr) under the @dpc/sdp namespace, please read these setup instructions for accessing Github Packages.


Propose a change to this page on GitHub.
Aboriginal flagTorres Strait Islander flag

The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

This site is powered by Netlify (opens in a new window)

© Copyright State Government of Victoria

Victoria government home
+ rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Usage

    Ripple components can be used in several different ways depending on your project needs.

    Using Ripple UI components

    Whilst Ripple is built to implement sites using a framework built on Vue JS and Nuxt, its modular architecture allows adopting different parts depending on your requirements.

    ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites

    Ripple UI libraries are usable in the following contexts:

    LibraryCSS stylesVue ComponentsRipple Framework (Nuxt)Web components
    Ripple UI CoresupportedsupportedsupportedPartial support
    Ripple UI Formssupportedsupportedsupportednot supported

    Using in an SDP website

    If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project.

    For documentation on using Ripple with Nuxt in SDP sites, visit the Ripple Framework documentation

    Github Packages

    Ripple 2 is hosted publicly on Github Packages (ghcr) under the @dpc/sdp namespace, please read these setup instructions for accessing Github Packages.


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    +.ct-109545{color:#0550AE;}
    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    +.ct-109545{color:#0550AE;}
    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    +https://www.webcomponents.org/

    Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce.

    Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment here.

    As with the other methods, set up access to Github Packages and then install Ripple UI in your project:

    npm install @dpc-sdp/ripple-ui-core --save

    A basic example of how to use the web component exports can be found under examples/webcomponents in the ripple-framework monorepo.


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Colour

    Colour plays an important role in creating a consistent and strong visual digital products and services.

    You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel.

    The default colours, made up of two blues, reflect vic.gov.au branding. This strengthens the association with the Victorian Government.

    The design system contains a colour framework. You can change it if your site requires department or entity branding.

    We've designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you're meeting WCAG requirements.

    If you change your core brand colours, your styles and components will re-theme automatically using the design system's colour framework.

    For more guidance on theming options, see theming guidance for designers or theming guidance for developers.

    You don’t need to use hex colours in code.

    By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation.

    Core palette

    The core palette includes primary and secondary colours.

    • The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette.
    • The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It's used in combination with the primary colour to create a more dynamic and engaging visual experience.

    Primary

    SwatchColourValueCSS Variable
    		 primary #0052C2rpl-clr-primary
    		 primary alphargb(0 82 194 / 50%)rpl-clr-primary-alpha
    		 primary alt#003174rpl-clr-primary-alt

    Accent

    SwatchColourValueCSS Variable
    		 accent #0095ECrpl-clr-accent
    		 accent alt#E6F5FDrpl-clr-accent-alt

    Neutral palette

    The Neutral palette is on a colour scale of white to black.

    The 10 steps represent this scale based on our requirements.

    Neutral colours are consistent throughout the design system. They are for:

    • text colours
    • borders
    • other elements, like a neutral background.
    SwatchColourValueCSS Variable
    		 neutral 0#FFFFFFrpl-clr-neutral-0
    		 neutral 100#F5F5F5rpl-clr-neutral-100
    		 neutral 200#E6E6E6rpl-clr-neutral-200
    		 neutral 300#CCCCCCrpl-clr-neutral-300
    		 neutral 400#999999rpl-clr-neutral-400
    		 neutral 500#7F7F7Frpl-clr-neutral-500
    		 neutral 600#666666rpl-clr-neutral-600
    		 neutral 700#333333rpl-clr-neutral-700
    		 neutral 800#1A1A1Arpl-clr-neutral-800
    		 neutral 900#0D0D0Drpl-clr-neutral-900
    		 neutral alpha 0rgb(255 255 255 / 75%)rpl-clr-neutral-alpha-0
    		 neutral alpha 700rgb(51 51 51 / 90%)rpl-clr-neutral-alpha-700
    SwatchColourValueCSS Variable
    		 light#FFFFFFrpl-clr-light
    		 dark#1A1A1Arpl-clr-dark

    Typography colours

    Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1).

    Interaction colours are in addition to the core colour palette. This guarantees accessible text.

    SwatchColourValueCSS Variable
    		 type default#1A1A1Arpl-clr-type-default
    		 type light#FFFFFFrpl-clr-type-light
    		 type primary contrast#FFFFFFrpl-clr-type-primary-contrast
    		 type accent contrast#FFFFFFrpl-clr-type-accent-contrast
    SwatchColourValueCSS Variable
    		 link#0052C2rpl-clr-link
    		 link visited#9F46B1rpl-clr-link-visited
    		 focus#FF9E1Brpl-clr-focus

    Gradients

    Gradients bring attention to components or information. Only use them on occasion.

    All gradients should appear from dark to light in their usage.

    SwatchColourCSS Variable
    		 gradient horizontalrpl-clr-gradient-horizontal
    		 gradient verticalrpl-clr-gradient-vertical
    ValuePosition
    		#0052C20%
    		#825DFF12%
    		#EF4A8124%
    		#E5720036%
    		#FFC16652%
    		#F9E06280%

    Sematics

    Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:

    • Information
    • Success
    • Warning
    • Error

    Avoid using them outside of their semantic meaning.

    These colours help signal to users the meaning of some components. For example, for alerts or error messages.

    SwatchColourValueCSS Variable
    		 information #005BA5rpl-clr-information
    		 information light#E6EFF6rpl-clr-information-light
    		 information dark#004984rpl-clr-information-dark
    		 success #007D85rpl-clr-success
    		 success light#E6F2F3rpl-clr-success-light
    		 success dark#00646Arpl-clr-success-dark
    		 warning #B75B00rpl-clr-warning
    		 warning light#F8EFE6rpl-clr-warning-light
    		 warning dark#924900rpl-clr-warning-dark
    		 error #AA0028rpl-clr-error
    		 error light#F7E6EArpl-clr-error-light
    		 error dark#880020rpl-clr-error-dark

    Focus

    See focus state for guidance.

    SwatchColourValueCSS Variable
    		 focus#FF9E1Brpl-clr-focus

    Theming

    To create your own theme, see theming guidance for designers or developers.


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Focus state

    Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.

    Some users use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states help users understand which element is currently selected and ready for interaction.

    Focus states are orange and neutral-800, aiming to conform to the WCAG 2.1 Level AA non-text contrast on any background colour.

    We have chosen this orange colour as it is a direct opposite of our primary colour. This allows all colourblind users to see a visual difference. Focus state styling also removes any border radius to create a bigger visual difference to surrounding elements.

    Inline style

    The inline focus state helps links stand out from the rest of the content on a page. When a link receives focus, it will underline and change background colour. Other components and elements that look like links use the inline style.

    An example of focus state colour contrast
    .rpl-u-focusable-inline

    Block style

    The block style completely highlights a section or whole component with the focus state. For example, when a button receives focus, a border is added to the bottom of the container and the background colour will change.

    Focus Link Visual Block Sample
    .rpl-u-focusable-block

    Outline focus state style

    The outline styles are for when form inputs are focused. When a form field receives focus, it adds a border. If the element already has a border, the border gets thicker.

    Focus Link Visual Outline Focus Sample
    .rpl-u-focusable-outline

    Modified focus states for components

    The alert component has a modified focus state colour. This is consistent across all alert variants. It meets colour contrast requirements on all semantic colours, including danger and warning.

    The modified styling uses a white background in place of the orange, still with the dark content and border.

    Component Modified Focus State Sample

    CSS Variables

    The focus state has three CSS Variables.

    SwatchElementValueCSS Variable
    		Background Fill#FF9E1Brpl-clr-focus
    		Content / Text / Icons#1A1A1Arpl-clr-focus-contrast
    		Bottom Border#1A1A1Arpl-clr-dark

    Theming

    For advice on focus state theming, see theming guidance for designers or theming guidance for developers.


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Grid

    With up to 12 columns, you can build grids with responsive layouts across different breakpoints.

    Grids are a crucial component of any design system. They provide a framework for arranging content in an appealing and structured manner.

    We've designed the grid for a high degree of flexibility and responsiveness.

    Breakpoints

    Ripple has 5 breakpoints. These ensure content is at an optimal layout for readability and accessibility.

    BreakpointWidthActive content area
    XS<575px288 – 543px
    S576 – 767px544 – 735px
    M768 – 991px736 – 927px
    L992 – 1199px864 – 1071px
    XL1200px +1040px

    Grids

    The grid is made up of three elements: columns, gutters, and margins.

    Visual of basic grid / column / gutter / margin anatomy

    BreakpointMarginsGutterColumn type / width
    XS • <575px16px16pxFluid
    S • 576 – 767px16px16pxFluid
    M • 768 – 991px32px24pxFluid
    L • 992 – 1199px64px24pxFluid
    XL • 1200px +80px28pxFixed / 61px

    Usage

    Use the grid system to structure your content.

    Most vic.gov.au pages follow a ‘two-thirds and one-third’ layout. But, the grid system allows for more combinations if needed.

    Your main content should always be in a two-thirds column. This is even if you’re not using a corresponding one-third column for secondary content.

    Column layouts

    Column SpanLayoutBreakpoint
    12FullXS • S • M • L • XL
    6HalfXS • S • M • L • XL
    7Two thirdsM • L • XL
    4One thirdM • L • XL
    3One quarterL • XL

    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Icons

    Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.

    Icons are a visual representation of an action, idea, or object. They provide a quick and easy way to communicate information. They can also enhance the usability of a design.

    Use the Ripple Design System's icon set for a consistent user experience and a cohesive look and feel.

    You can add icons to components or pair them with text. Icons should have a clear relationship with their corresponding text or action. This keeps them accessible to users with visual impairments or disabilities.

    Avoid using icons alone, as one user may interpret them differently to another.

    Icon Library

    Alerts

    • Fire
    • Flood
    • Lightning
    • Medical
    • Smoke
    • Temperature
    • Traffic

    Social

    • Facebook
    • Instagram
    • Linkedin
    • Spotify
    • Wechat
    • Whatsapp
    • Youtube
    • X

    Standard

    • Accessible
    • Add
    • Arrow Up
    • Arrow Right
    • Arrow Down
    • Arrow Left
    • Attach
    • Browser
    • Calendar Lined
    • Cancel
    • Cancel Circle Filled
    • Car
    • Check
    • Check Circle Filled
    • Chevron Up
    • Chevron Right
    • Chevron Down
    • Chevron Left
    • Child Lined
    • Current Location
    • Document
    • Document Lined
    • Dollar Circle Filled
    • Download
    • Enlarge
    • Enlarge Square Filled
    • Exclamation Circle Filled
    • Free
    • Home
    • Information Circle Filled
    • Link
    • Link External Square Filled
    • List
    • Loading
    • Log In Lined
    • Mail
    • Mail Lined
    • Menu
    • Microphone
    • Pause Circle Lined
    • Person
    • Phone
    • Pin
    • Play Circle Lined
    • Print Lined
    • Question Circle Lined
    • Search
    • Senior
    • Share
    • Star
    • Stop Circle Lined
    • Table Lined
    • Trash Lined
    • Upload
    • User Circle Filled
    • Video
    • View
    • Zoom In
    • Zoom Out

    Accessibility tip

    If you're using an icon by itself, ensure it's using the right label for screen readers.

    If you're using an icon and text, ensure only the text gets read out.

    Application

    Sizing

    The Ripple Design System displays icons at four sizes (12px, 16px, 24px, 32px) depending on their type, use and screen size.

    PreviewValueSize
    12pxxs
    16pxs
    24pxm
    32pxl

    Spacing

    Ensure you use the right amount of space around an icon to allow for legibility. At the least, icons must have clear space of 50% of the height/width of the icon.

    Visual of min space

    Accessibility

    For accessibility, ensure you:

    • wrap icons within their interactive component
    • specify if an icon is decorative and informative by assigning the property in code
    • use descriptive and meaningful titles for informative icons
    • use icons to represent the same action or idea.

    Styling

    Colour

    If a background changes the colour of the text (for example, a button) the icon should take on the same colour as the text.

    Open this example in a new tab (opens in a new window) View in storybook (opens in a new window)

    Icons used to represent a state should use the correct colour. For example, an icon used in a success notification should use rpl-clr-success.

    Open this example in a new tab (opens in a new window) View in storybook (opens in a new window)

    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Layer styles

    Border

    Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container.

    Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px.

    You can use a border to:

    • separate or segment blocks or sections of content
    • highlight important elements such as featured content or a call to action
    • aid information hierarchy
    • support navigational structure
    • highlight an active navigation item.
    VisualValueCSS Variable
    1pxrpl-border-1
    2pxrpl-border-2
    4pxrpl-border-3
    8pxrpl-border-4

    Usage

    Find examples of borders that add visual consistency on the in-page navigation, cards and contact us pages.

    Borders can also segment content (like on banners).

    Open this example in a new tab (opens in a new window) View in storybook (opens in a new window)

    Border Radius

    Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel.

    We've defined a set of radius values for use.

    VisualValueCSS Variable
    2pxrpl-border-radius-1
    4pxrpl-border-radius-2
    8pxrpl-border-radius-3
    12pxrpl-border-radius-4

    Usage

    Border radius is on containers such as buttons, cards and form inputs.

    Open this example in a new tab (opens in a new window) View in storybook (opens in a new window)

    When a container has a defined border radius, but is in focus, discard the border radius.

    A 0px value is applied for consistency and clarity.

    Elevation

    Elevation adds depth to components.

    Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.

    VisualValueCSS Variable
    0 2px 8px rgb(26 26 26 / 16%)rpl-elevation-1
    0 4px 8px 2px rgb(26 26 26 / 16%)rpl-elevation-2

    Usage

    Elevation is on components such as cards, button (elevated variant only) and breadcrumbs.

    Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open.

    Open this example in a new tab (opens in a new window) View in storybook (opens in a new window)

    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Layout

    Layouts are common page composition patterns that offer ways of structuring components and content.

    Always design for small screens first.

    For most types of pages, use either a ‘two-thirds’ or a ‘two-thirds and one-third’ layout. Doing this reduces long lines of text that can make a page hard to read on desktop devices. This approach should limit lines of text to 75 characters.

    You should never assume what devices people are using. This is why you should design for different screen sizes instead of specific devices.

    Page layouts

    There are 2 standard page layouts:

    • Full width.
    • Two column - right side.

    Full width

    Displays the main content area the full width of the container.

    Sample visual of full width layout

    Two column

    Displays a right hand sidebar that stacks on <991px breakpoints. The main content area is always visible.

    Sample visual of two column layout

    White Space

    Use adequate white space in the layout to separate elements and create a sense of hierarchy. This helps to make elements on the page easier to distinguish and understand, and creates visual harmony.

    Page Section Spacing

    Spacing is used between the ‘above’, ‘body’ and ‘below’ content sections.

    For both XS and S breakpoints, section spacing is added between the body section and sidebar section when in use.

    Sample visual of page section layout spacing

    BreakpointValueCSS Variable
    XS • <576px32pxrpl-sp-8
    S • 576-767px32pxrpl-sp-8
    M • 768-991px48pxrpl-sp-10
    L • 992-1199px64pxrpl-sp-12
    XL • 1200px+80pxrpl-sp-13

    Content Layout Spacing

    We define spacing between components and elements at a breakpoint level. This compliments the grid and applied layout.

    Sample visual of content layout spacing

    BreakpointValueCSS VariableSidebar ValueSidebar CSS Variable
    XS • <576px16pxrpl-sp-424pxrpl-sp-6
    S • 576-767px16pxrpl-sp-424pxrpl-sp-6
    M • 768-991px24pxrpl-sp-624pxrpl-sp-6
    L • 992-1199px32pxrpl-sp-832pxrpl-sp-8
    XL • 1200px+40pxrpl-sp-940pxrpl-sp-9

    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Logo

    The visual representation of vic.gov.au and the Victorian Government.

    The vic.gov.au logo is the primary logo used in the design system.

    vic.gov.au logo
    Download logo

    Clear space

    The clear space for the vic.gov.au logo is 100% of the height of the ‘V’ across all applications.

    Clear space visual

    Co-branding

    Where the vic.gov.au logo appears next to another logo, it should be:

    • centred vertically
    • separated by a minimum distance of 16px
    • separated by a divider line.

    Co-branded visual

    Sizing

    The vic.gov.au logo should be 16px in height on all screens.

    No modification

    Don't change the logo. This includes changing its colour, adding effects, or altering its shape.

    This helps to maintain the integrity and consistency of the logo.

    Accessibility

    Always add alternative text to the logo. This is for screen reader users.

    The Victorian State Government logo is the secondary logo used in the design system. It’s used in the footer.

    Victoria State Government logo
    Download logo

    Clear space

    The clear space for the Victorian State Government logo is at least 20% the height.

    Clear space visual

    Co-branding

    Where the Victorian State Government logo appears next to another logo, it should be:

    • centred vertically
    • separated by a distance of at least 50% the height of the Victorian State Government logo.

    Co-branded visual

    Sizing

    The Victorian State Government logo should be 42px in height on all screens.

    Use the Victorian State Government logo where size permits. But, at times, we need to use a smaller logo depending on the application:

    • VIC only logo (favicons only).

    We've designed these logos to ensure accessibility and clarity at all sizes.

    See primary navigation and footer for size requirements.


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Motion

    Motion gradually changes an element from one state to another. It can also indicate an interaction.

    Use motion with a purpose in mind. This could be to draw attention to important elements or to provide feedback to users.

    Usage

    Each animation needs at least these four parts:

    • Trigger — what causes the animation to happen (gestures, time, etc.).
    • Duration — how long should the transition take.
    • Easing — how an element transitions.
    • Property — the characteristic of the element transitioning (position, opacity, scale, etc.).

    Duration (speed)

    The duration of motion should be consistent throughout. Use:

    • shorter durations for more subtle motions
    • longer durations for more significant or complex motions.

    A general rule of thumb is:

    • 0.06-0.2s for simple interface movements
    • up to 0.5s for more complex or larger movements.
    TimeValueCSS Variable
    60 milliseconds60msrpl-motion-speed-1
    80 milliseconds80msrpl-motion-speed-2
    120 milliseconds120msrpl-motion-speed-3
    160 milliseconds160msrpl-motion-speed-4
    200 milliseconds200msrpl-motion-speed-5
    240 milliseconds240msrpl-motion-speed-6
    300 milliseconds300msrpl-motion-speed-7
    360 milliseconds360msrpl-motion-speed-8
    420 milliseconds420msrpl-motion-speed-9
    500 milliseconds500msrpl-motion-speed-10

    Easing

    Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion.

    Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code.

    Definitions:

    • Ease-in: slow at the beginning, fast/abrupt at the end.
    • Ease-out: fast/abrupt at the beginning, slow at the end.

    When to use:

    • Ease-in: when things are moving out.
    • Ease-out: when things are moving in.

    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Spacing

    In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.

    We use a spacing system in a 4-pixel grid.

    It helps to create a visual hierarchy and organises page content.

    The 4px framework creates consistent spacing relationships and alignment across breakpoints. This is crucial for good UI design.

    SizeCSS Variable
    4pxrpl-sp-1
    8pxrpl-sp-2
    12pxrpl-sp-3
    16pxrpl-sp-4
    20pxrpl-sp-5
    24pxrpl-sp-6
    28pxrpl-sp-7
    32pxrpl-sp-8
    40pxrpl-sp-9
    48pxrpl-sp-10
    56pxrpl-sp-11
    64pxrpl-sp-12
    80pxrpl-sp-13
    120pxrpl-sp-14

    Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight.

    Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices.

    For page level, component and content spacing see layout.


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Accordion
  • Acknowledgement
  • Alert
  • Block quote
  • Breadcrumb
  • Button
  • Call to action
  • Callout
  • Campaign banner
  • Card
  • Carousel
  • Category grid
  • Checkbox
  • Chip
  • Contact us
  • Date input
  • Detail list
  • Dropdown
  • File
  • Footer
  • Form alert
  • Form
  • Header
  • In-page navigation
  • Input field
  • Key dates
  • Media embed
  • Media fullscreen
  • Media gallery
  • Media
  • Option button
  • Page action
  • Pagination
  • Primary navigation
  • Profile
  • Radio button
  • Related links
  • Results listing
  • Search bar
  • Skip link
  • Social share
  • Statistics grid
  • Table
  • Tabs
  • Tag
  • Text area
  • Timeline
  • Vertical navigation
    • Ripple Framework

    Typography

    Type styles are used to present content clearly.

    Font

    'VIC' is the brand font to be used across all Victorian Government communications. This creates a distinct but consistent look and feel.

    It is free to download from vic.gov.au.

    Only use VIC font. The Ripple Design System only uses ‘Regular’ and ‘Bold’ weights of VIC font.

    As VIC is a custom font, it's recommended to use Web Safe Font as a fallback when declaring your font stack. The preferred fallback font for the Ripple Design System is Arial.

    Font FamilyValueCSS Variable
    VICVIC, Arial, Helvetica, sans-serifrpl-type-font-family

    Type Styles

    In the Ripple Design System there are two type sets, one for fixed use and one for fluid (responsive) use:

    • The fixed type set uses fixed sizes. This means they use the <991 fluid styles, but do not respond.
    • The fluid type set has two fixed sizes. These both respond at certain breakpoints for larger or smaller styles.

    Headings

    Headings have both fluid and fixed sets. Headings are bold by default for emphasis and to create contrast.

    Fluid

    StyleValuesCSS Class
    Heading 1
    Font size: 32px / 56px
    Line height: 36px / 60px
    Letter spacing: 1.4% / 0.8%
    Font weight: Bold (700)
    		rpl-type-h1
    Heading 1 Highlight
    Font size: 32px / 56px
    Line height: 36px / 60px
    Letter spacing: 1.4% / 0.8%
    Font weight: Bold (700)
    		rpl-type-h1-highlight
    Heading 2
    Font size: 24px / 32px
    Line height: 32px / 40px
    Letter spacing: 1.6% / 1.4%
    Font weight: Bold (700)
    		rpl-type-h2
    Heading 3
    Font size: 20px / 24px
    Line height: 28px / 32px
    Letter spacing: 1.8% / 1.6%
    Font weight: Bold (700)
    		rpl-type-h3
    Heading 3 Highlight
    Font size: 20px / 24px
    Line height: 28px / 32px
    Letter spacing: 1.8% / 1.6%
    Font weight: Bold (700)
    		rpl-type-h3-highlight
    Heading 4
    Font size: 16px / 20px
    Line height: 24px / 28px
    Letter spacing: 1.92% / 1.8%
    Font weight: Bold (700)
    		rpl-type-h4

    Fixed

    StyleValuesCSS Class
    Heading 1 Fixed
    Font size: 32px
    Line height: 36px
    Letter spacing: 1.4%
    Font weight: Bold (700)
    		rpl-type-h1-fixed
    Heading 1 Highlight Fixed
    Font size: 32px
    Line height: 44px
    Letter spacing: 1.4%
    Font weight: Bold (700)
    		rpl-type-h1-highlight-fixed
    Heading 2 Fixed
    Font size: 24px
    Line height: 32px
    Letter spacing: 1.6%
    Font weight: Bold (700)
    		rpl-type-h2-fixed
    Heading 3 Fixed
    Font size: 20px
    Line height: 28px
    Letter spacing: 1.8%
    Font weight: Bold (700)
    		rpl-type-h3-fixed
    Heading 3 Highlight Fixed
    Font size: 20px
    Line height: 28px
    Letter spacing: 1.8%
    Font weight: Bold (700)
    		rpl-type-h3-highlight-fixed
    Heading 4 Fixed
    Font size: 16px
    Line height: 24px
    Letter spacing: 1.92%
    Font weight: Bold (700)
    		rpl-type-h4-fixed

    Paragraph

    The default paragraph font size is 16px on all screens.

    The majority of your body copy should use the standard 16px paragraph size.

    StyleValuesCSS Class
    Paragraph Large
    Font size: 20px / 24px
    Line height: 28px / 32px
    Letter Spacing: 1.8% / 1.6%
    		rpl-type-p-large
    Paragraph Large Fixed
    Font size: 20px
    Line height: 28px
    Letter Spacing: 1.8%
    		rpl-type-p-large-fixed
    Paragraph Large Highlight
    Font size: 20px / 24px
    Line height: 28px / 32px
    Letter Spacing: 1.8% / 1.6%
    		rpl-type-p-large-highlight
    Paragraph
    Font size: 16px
    Line height: 24px
    Letter spacing: 1.92%
    		rpl-type-p
    Paragraph Small
    Font size: 14px
    Line height: 20px
    Letter spacing: 1.92%
    		rpl-type-p-small

    Lists

    Use lists to make blocks of text easier to read, and to break information into manageable chunks.

    List styles are based on rpl-type-p with extra spacing.

    Margin TopParagraph SpacingItem SpacingIndent Amount
    rpl-sp-4rpl-sp-2rpl-sp-2rpl-sp-9

    Unordered Lists

    Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end.

    Unordered lists allow for two nested levels which are styled as:

    • level 1 - bullet
    • level 2 - dash
    An example of an unordered list

    Ordered Lists

    Use numbered lists instead of bulleted lists when the order of the items is relevant.

    You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence.

    Ordered lists allow for three nested levels which are styled as

    • level 1 - numbers
    • level 2 - alphabet
    • level 3 - roman numerals.
    An example of an ordered list

    Text Alignment

    You should usually left-align body copy that’s read left to right. Right-aligned body copy can be hard for users to find and read when they magnify their screen.

    Do not ‘justify’ blocks of body copy so that they’re aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read.

    Font weight

    You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss.

    Try to avoid bold. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to.

    Acomparison between regular text and bold text

    Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

    A visual example of a link within regular text

    List of variables

    All values are stored as variables nested in the type variable.

    Type size

    ValueCSS Variable
    1.4remrpl-type-size-1
    1.6remrpl-type-size-2
    2remrpl-type-size-3
    2.4remrpl-type-size-4
    2.8remrpl-type-size-5
    3.2remrpl-type-size-6
    4remrpl-type-size-7
    5.6remrpl-type-size-8

    Line Height

    ValueCSS Variable
    1.4remrpl-type-lh-1
    1.6remrpl-type-lh-2
    2remrpl-type-lh-3
    2.4remrpl-type-lh-4
    2.8remrpl-type-lh-5
    3.2remrpl-type-lh-6
    3.6remrpl-type-lh-7
    4remrpl-type-lh-8
    4.4remrpl-type-lh-9
    5.2remrpl-type-lh-10
    6remrpl-type-lh-11
    8remrpl-type-lh-12

    Letter Spacing

    ValueCSS Variable
    0.0192emrpl-type-ls-1
    0.018emrpl-type-ls-2
    0.0168emrpl-type-ls-3
    0.016emrpl-type-ls-4
    0.014emrpl-type-ls-5
    0.012emrpl-type-ls-6
    0.008emrpl-type-ls-7

    Font Weights

    ValueCSS Variable
    400rpl-type-weight-regular
    700rpl-type-weight-bold

    List Styling

    StyleLevel 1Level 2Level 3
    Unordered list• (filled circle)- (dash)
    Ordered List1. (numbers)a. (letters)i. (roman numerals)

    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Migrating from Ripple 1.x
  • Setting up a new site
  • Applying theme and brand
  • Creating content types
  • Creating new layers
  • Adding a new dynamic component
  • Core modules
    • Ripple Design System

    Core modules

    A listing of all current core Ripple layers and packages

    View each package on NPM for their individual READMEs.

    Core UI Libraries

    Tide API

    Nuxt-ripple base layer

    Core content types

    Other core modules

    Scaffolding, testing and supporting packages


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    +})

    Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible light-on-dark and dark-on-light theming options.


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    +.ct-892505{color:#82071E;font-style:italic;}
    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    +.ct-690235{color:#6E7781;}
    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    +.ct-109545{color:#0550AE;}
    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    +The mapping of the tide API response was done through tide.config.js. The JSON API response was returned in its entirety and mapping the Drupal fields to Ripple components was done through the Page component.

    In Ripple 2.x we move the mapping of data to the Nuxt server layer. This allows us to only return the necessary data needed to the end user, reducing the JSON payload from Drupal.

    For more information on creating new content types see the guide on creating content types

    Dynamic components

    Tide CMS makes use of Drupal paragraphs to structure content types to allow content creators flexibility when composing content. Creating new paragraph types that can be reused for the landing page content or across others is a common customisation task.

    In Ripple 1, new paragraph support was added through custom mappings See Ripple 1

    In Ripple 2, we need to add similar support - See Guide to creating dynamic components

    Search listing pages

    This feature is still in Beta, please see the feature proposal for more information.

    Listing pages are pages that contain dynamic lists of links to other pages. These are typically used to generate index pages when there are large amounts of similar items. See https://www.vic.gov.au/grants, https://www.vic.gov.au/victorian-honour-roll-of-women for example.

    In Ripple 1 there was no dedicated content type for creating listing pages and hence these pages were usually created as static pages in the frontend.

    In Ripple 2 we intend to move to a standard content type that allows configuring the search experience from the backend. Please see the feature proposal for more info.


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Migrating from Ripple 1.x
  • Setting up a new site
  • Applying theme and brand
  • Creating content types
  • Creating new layers
  • Adding a new dynamic component
  • Core modules
    • Ripple Design System

    Setting up a new site

    A guide to setting up new SDP frontend sites using Ripple framework.

    Setting up new sites with Ripple 2 is made easy with our CLI tool and provisioning process. Before you do so though please ensure you have got in touch with the SDP engagement manager (digital@dpc.vic.gov.au) prior and have submitted a support request to the Digital Victoria Help Centre https://digital-vic.atlassian.net/servicedesk/customer/portals

    Requirements

    When onboarding a new project to SDP the following will be provisioned for you:

    • Git repo created
    • Required platform files added to repo, required Dockerfile, etc
    • Bay hosting environment configured
    • Section.io CDN setup and configured
    • Environment variables set to your project specific requirements

    Local development dependencies

    Please make sure you have the following dependencies installed before proceeding. Typically local development is not performed through a docker container on the front end.

    • Node version 16.11.0 or greater (We recommend installing Node through Node Version Manager - See https://github.com/nvm-sh/nvm for install guide)
    • NPM version 8.1.0 or greater

    Please see the engines key in package.json for most accurate versions.

    Installing Ripple

    For SDP sites, this will also be applied. However, if you wish to create a local install of Ripple outside of a project see below.

    Installing Ripple is easy with the included CLI tool:

    npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name "My Site"

    This will copy the required files needed to setup your site into ~/path/to/site

    cd ~/path/to/site && npm install

    This will install all dependencies with NPM, you can then run the development server with

    npm run dev

    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Migrating from Ripple 1.x
  • Setting up a new site
  • Applying theme and brand
  • Creating content types
  • Creating new layers
  • Adding a new dynamic component
  • Core modules
    • Ripple Design System

    Ripple Framework

    Ripple framework contains the tools for building SDP sites using the Ripple design system components.

    Ripple Framework

    What is it?

    The Ripple design system consists of the design elements and components used to build any web application using the Victorian government brand. Ripple framework is a collection of Nuxt 3 modules and layers primarily used to create headless SDP websites using the Tide Drupal CMS.

    ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites

    Who's it for?

    Whilst the Ripple UI components can be used in non SDP projects, Ripple framework assumes a Tide Drupal backend in most cases.

    Using the Ripple framework, developers are able to build headless frontend websites that derive content from the Tide Drupal CMS via it's JSON API.

    SDP architecture

    SDP Architecture

    To find out more about Single Digital Presence please visit https://www.vic.gov.au/single-digital-presence


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Migrating from Ripple 1.x
  • Setting up a new site
  • Applying theme and brand
  • Creating content types
  • Creating new layers
  • Adding a new dynamic component
  • Core modules
    • Ripple Design System

    API endpoints

    Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.

    In Ripple 2 we use API routes to create a backend for frontend API that handles communicating with the Drupal Tide JSON API and maps the response to only what is required to render the page in Ripple.

    API routes diagram

    Nitro server routes

    Nuxt 3 introduces the concept of server API routes powered by the Nitro rendering engine and H3 server.

    Nitro is the server layer that creates API routes in a Nuxt application. Nitro plugins run at build time and we use them to add the mapping needed to tell Ripple-tide-api package how to respond to a Drupal JSON API request for a content type node

    Ripple Tide API

    Ripple Tide API is the module that handles communication with Tide Drupal JSON API. It provides a wrapper service for API calls to Tide and provides an interface for adding mapping functions which transform the response from Drupal into only what's needed for rendering the website. This makes creating pages easier and improves performance by moving all data transformation into the server bundle where it can be easily cached.

    API routes diagram


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Migrating from Ripple 1.x
  • Setting up a new site
  • Applying theme and brand
  • Creating content types
  • Creating new layers
  • Adding a new dynamic component
  • Core modules
    • Ripple Design System

    Content types

    Implementing content type specific page layouts

    Content types are a Drupal concept that allow for modelling content using fields to describe the data structure. See the Drupal documentation for more details.

    Ripple content types

    As SDP is a headless CMS using a decoupled architecture once we have modelled content in Tide, we need a way to render it into a template that can be delivered to end users. Ripple content types allow you to support custom templates for new content types.

    Ripple content types consist of the following parts:

    API Mapping

    See API Endpoints for more information the Tide API translation layer. For each content type we supply a function that maps the Tide Drupal API response into more concise fields that match the data needed for

    Template

    To render the page using Ripple UI components, we need to create a Vue component that is passed the data from the API request and, using Ripple UI components, creates a layout that matches your intended design.

    See the Content type guide for more information on creating new content types.

    Core content types

    In Tide we have a number of content types which are part of the core distribution and are initially included in SDP sites

    • Landing page
    • Event
    • Grant
    • News
    • Publication (page)
    • Alert

    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Migrating from Ripple 1.x
  • Setting up a new site
  • Applying theme and brand
  • Creating content types
  • Creating new layers
  • Adding a new dynamic component
  • Core modules
    • Ripple Design System

    Dynamic components

    Dynamic components are a concept in Ripple that is closely tied to the concept of 'Paragraphs' in Drupal. See the Drupal documentation for Paragraphs.

    Dynamic components/paragraphs can be added to pages in drupal (see Key concepts - content types).

    In Ripple the raw paragraphs from the Drupal JSON API and 'mapped' to a Vue component, along with the props required for that component to render. This Vue component, along with the associated mapping is what is referred to as the 'Dynamic component'.

    Illustration of hows how dynamic components are mapped from drupal paragraphs to vue components


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Migrating from Ripple 1.x
  • Setting up a new site
  • Applying theme and brand
  • Creating content types
  • Creating new layers
  • Adding a new dynamic component
  • Core modules
    • Ripple Design System

    Layers

    Nuxt layers are used to encapsulate Ripple functionality to share and reuse

    Nuxt 3 provides a way to encapsulate part of a Nuxt project into what they call a Layer.

    Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.

    In Ripple 2, we utilise Nuxt Layers extensively to share isolated features between SDP sites. A good example is a content type. Using a Nuxt Layer we are able to add the components, API endpoints, composables, etc needed to implement the feature, without having the overhead of a Nuxt Module.

    A great feature of Nuxt Layers is that you can reference them from any public or private Git repo in addition to publishing via an NPM module.

    Below is a diagram showing how Ripple 2 features are distributed through Nuxt layers and used within projects.

    Ripple layers architecture diagram. Shows how modules can be shared between projects


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    + rpl-type-p-small">
  • Migrating from Ripple 1.x
  • Setting up a new site
  • Applying theme and brand
  • Creating content types
  • Creating new layers
  • Adding a new dynamic component
  • Core modules
    • Ripple Design System

    Nuxt

    Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.

    Nuxt is a framework for building web applications that can be rendered both server side using Node.js and client side with Vue.js components. Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.

    "Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best practices while maintaining excellent Vue.js DX"

    Addy Osmani - Chief Engineer of Chrome

    It is recommended that developers new to Ripple familiarise themselves with Nuxt by reading the documentation site, in particular, the following sections:

    For support and help working with Nuxt please see https://nuxt.com/docs/community/getting-help and https://nuxt.com/support/solutions

    There are a number of recommended resources for learning Nuxt 3 including:


    Propose a change to this page on GitHub.
    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home
    +
    These Docs are for Ripple version 2.0. If you are looking for the original Ripple Storybook please click below
    View Ripple 1 storybook
    Ripple Design System

    Ripple Design System

    Ripple is the design system for Victorian government digital products

    Getting Started

    For Designers

    Information for designers using Ripple to create brand Victoria compliant digital experiences.

    For Developers

    How to get started implementing Ripple UI components in digital products.

    Find out more

    About Ripple

    Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.

    Who should use it

    Ripple is built by government for government to deliver services Victorians trust and rely on.

    Design principles

    The guiding principles that are the foundation of the Ripple Design System.

    Using Ripple in SDP sites

    Ripple framework

    Ripple framework contains the tools for building SDP sites using Ripple design system components.

    Aboriginal flagTorres Strait Islander flag

    The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.

    This site is powered by Netlify (opens in a new window)

    © Copyright State Government of Victoria

    Victoria government home